matrix-engine-wgpu 1.3.17 → 1.3.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (273) hide show
  1. package/.codesandbox/tasks.json +46 -0
  2. package/.devcontainer/devcontainer.json +22 -0
  3. package/.github/dependabot.yml +12 -0
  4. package/REFERENCE.md +59 -0
  5. package/app-worker.js +45 -0
  6. package/dev.md +541 -0
  7. package/empty.js +17 -0
  8. package/examples/camera-texture.js +60 -0
  9. package/examples/games/jamb/html-content.js +128 -0
  10. package/examples/games/jamb/jamb.js +1341 -0
  11. package/examples/games/jamb/readme.md +3 -0
  12. package/examples/load-jamb.js +6 -0
  13. package/examples/load-obj-file.js +95 -0
  14. package/examples/load-objs-sequence.js +68 -0
  15. package/examples/unlit-textures.js +31 -0
  16. package/examples/video-texture.js +61 -0
  17. package/examples.js +73 -0
  18. package/main.js +635 -0
  19. package/non-project-files/cubebuffer-example.js +51 -0
  20. package/non-project-files/dev.txt +21 -0
  21. package/non-project-files/image1.png +0 -0
  22. package/non-project-files/image6.png +0 -0
  23. package/package.json +1 -4
  24. package/public/ammojs/ammo.js +957 -0
  25. package/public/ammojs/ammo.wasm.js +921 -0
  26. package/public/ammojs/ammo.wasm.wasm +0 -0
  27. package/public/app-worker.js +47 -0
  28. package/public/app.js +12744 -0
  29. package/public/css/style.css +711 -0
  30. package/public/empty.html +25 -0
  31. package/public/empty.js +10453 -0
  32. package/public/examples.html +30 -0
  33. package/public/examples.js +11217 -0
  34. package/public/index.html +20 -0
  35. package/public/manifest copy.web +35 -0
  36. package/public/manifest.web +25 -0
  37. package/public/res/audios/block.mp3 +0 -0
  38. package/public/res/audios/dice-roll.mp3 +0 -0
  39. package/public/res/audios/dice1.mp3 +0 -0
  40. package/public/res/audios/dice2.mp3 +0 -0
  41. package/public/res/audios/kenney/Kenney.url +2 -0
  42. package/public/res/audios/kenney/License.txt +22 -0
  43. package/public/res/audios/kenney/Patreon.url +2 -0
  44. package/public/res/audios/kenney/audios/back_001.ogg +0 -0
  45. package/public/res/audios/kenney/audios/back_002.ogg +0 -0
  46. package/public/res/audios/kenney/audios/back_003.ogg +0 -0
  47. package/public/res/audios/kenney/audios/back_004.ogg +0 -0
  48. package/public/res/audios/kenney/audios/bong_001.ogg +0 -0
  49. package/public/res/audios/kenney/audios/click_001.ogg +0 -0
  50. package/public/res/audios/kenney/audios/click_002.ogg +0 -0
  51. package/public/res/audios/kenney/audios/click_003.ogg +0 -0
  52. package/public/res/audios/kenney/audios/click_004.ogg +0 -0
  53. package/public/res/audios/kenney/audios/click_005.ogg +0 -0
  54. package/public/res/audios/kenney/audios/close_001.ogg +0 -0
  55. package/public/res/audios/kenney/audios/close_002.ogg +0 -0
  56. package/public/res/audios/kenney/audios/close_003.ogg +0 -0
  57. package/public/res/audios/kenney/audios/close_004.ogg +0 -0
  58. package/public/res/audios/kenney/audios/confirmation_001.ogg +0 -0
  59. package/public/res/audios/kenney/audios/confirmation_002.ogg +0 -0
  60. package/public/res/audios/kenney/audios/confirmation_003.ogg +0 -0
  61. package/public/res/audios/kenney/audios/confirmation_004.ogg +0 -0
  62. package/public/res/audios/kenney/audios/drop_001.ogg +0 -0
  63. package/public/res/audios/kenney/audios/drop_002.ogg +0 -0
  64. package/public/res/audios/kenney/audios/drop_003.ogg +0 -0
  65. package/public/res/audios/kenney/audios/drop_004.ogg +0 -0
  66. package/public/res/audios/kenney/audios/error_001.ogg +0 -0
  67. package/public/res/audios/kenney/audios/error_002.ogg +0 -0
  68. package/public/res/audios/kenney/audios/error_003.ogg +0 -0
  69. package/public/res/audios/kenney/audios/error_004.ogg +0 -0
  70. package/public/res/audios/kenney/audios/error_005.ogg +0 -0
  71. package/public/res/audios/kenney/audios/error_006.ogg +0 -0
  72. package/public/res/audios/kenney/audios/error_007.ogg +0 -0
  73. package/public/res/audios/kenney/audios/error_008.ogg +0 -0
  74. package/public/res/audios/kenney/audios/glass_001.ogg +0 -0
  75. package/public/res/audios/kenney/audios/glass_002.ogg +0 -0
  76. package/public/res/audios/kenney/audios/glass_003.ogg +0 -0
  77. package/public/res/audios/kenney/audios/glass_004.ogg +0 -0
  78. package/public/res/audios/kenney/audios/glass_005.ogg +0 -0
  79. package/public/res/audios/kenney/audios/glass_006.ogg +0 -0
  80. package/public/res/audios/kenney/audios/glitch_001.ogg +0 -0
  81. package/public/res/audios/kenney/audios/glitch_002.ogg +0 -0
  82. package/public/res/audios/kenney/audios/glitch_003.ogg +0 -0
  83. package/public/res/audios/kenney/audios/glitch_004.ogg +0 -0
  84. package/public/res/audios/kenney/audios/maximize_001.ogg +0 -0
  85. package/public/res/audios/kenney/audios/maximize_002.ogg +0 -0
  86. package/public/res/audios/kenney/audios/maximize_003.ogg +0 -0
  87. package/public/res/audios/kenney/audios/maximize_004.ogg +0 -0
  88. package/public/res/audios/kenney/audios/maximize_005.ogg +0 -0
  89. package/public/res/audios/kenney/audios/maximize_006.ogg +0 -0
  90. package/public/res/audios/kenney/audios/maximize_007.ogg +0 -0
  91. package/public/res/audios/kenney/audios/maximize_008.ogg +0 -0
  92. package/public/res/audios/kenney/audios/maximize_009.ogg +0 -0
  93. package/public/res/audios/kenney/audios/minimize_001.ogg +0 -0
  94. package/public/res/audios/kenney/audios/minimize_002.ogg +0 -0
  95. package/public/res/audios/kenney/audios/minimize_003.ogg +0 -0
  96. package/public/res/audios/kenney/audios/minimize_004.ogg +0 -0
  97. package/public/res/audios/kenney/audios/minimize_005.ogg +0 -0
  98. package/public/res/audios/kenney/audios/minimize_006.ogg +0 -0
  99. package/public/res/audios/kenney/audios/minimize_007.ogg +0 -0
  100. package/public/res/audios/kenney/audios/minimize_008.ogg +0 -0
  101. package/public/res/audios/kenney/audios/minimize_009.ogg +0 -0
  102. package/public/res/audios/kenney/audios/open_001.ogg +0 -0
  103. package/public/res/audios/kenney/audios/open_002.ogg +0 -0
  104. package/public/res/audios/kenney/audios/open_003.ogg +0 -0
  105. package/public/res/audios/kenney/audios/open_004.ogg +0 -0
  106. package/public/res/audios/kenney/audios/pluck_001.ogg +0 -0
  107. package/public/res/audios/kenney/audios/pluck_002.ogg +0 -0
  108. package/public/res/audios/kenney/audios/question_001.ogg +0 -0
  109. package/public/res/audios/kenney/audios/question_002.ogg +0 -0
  110. package/public/res/audios/kenney/audios/question_003.ogg +0 -0
  111. package/public/res/audios/kenney/audios/question_004.ogg +0 -0
  112. package/public/res/audios/kenney/audios/scratch_001.ogg +0 -0
  113. package/public/res/audios/kenney/audios/scratch_002.ogg +0 -0
  114. package/public/res/audios/kenney/audios/scratch_003.ogg +0 -0
  115. package/public/res/audios/kenney/audios/scratch_004.ogg +0 -0
  116. package/public/res/audios/kenney/audios/scratch_005.ogg +0 -0
  117. package/public/res/audios/kenney/audios/scroll_001.ogg +0 -0
  118. package/public/res/audios/kenney/audios/scroll_002.ogg +0 -0
  119. package/public/res/audios/kenney/audios/scroll_003.ogg +0 -0
  120. package/public/res/audios/kenney/audios/scroll_004.ogg +0 -0
  121. package/public/res/audios/kenney/audios/scroll_005.ogg +0 -0
  122. package/public/res/audios/kenney/audios/select_001.ogg +0 -0
  123. package/public/res/audios/kenney/audios/select_002.ogg +0 -0
  124. package/public/res/audios/kenney/audios/select_003.ogg +0 -0
  125. package/public/res/audios/kenney/audios/select_004.ogg +0 -0
  126. package/public/res/audios/kenney/audios/select_005.ogg +0 -0
  127. package/public/res/audios/kenney/audios/select_006.ogg +0 -0
  128. package/public/res/audios/kenney/audios/select_007.ogg +0 -0
  129. package/public/res/audios/kenney/audios/select_008.ogg +0 -0
  130. package/public/res/audios/kenney/audios/switch_001.ogg +0 -0
  131. package/public/res/audios/kenney/audios/switch_002.ogg +0 -0
  132. package/public/res/audios/kenney/audios/switch_003.ogg +0 -0
  133. package/public/res/audios/kenney/audios/switch_004.ogg +0 -0
  134. package/public/res/audios/kenney/audios/switch_005.ogg +0 -0
  135. package/public/res/audios/kenney/audios/switch_006.ogg +0 -0
  136. package/public/res/audios/kenney/audios/switch_007.ogg +0 -0
  137. package/public/res/audios/kenney/audios/tick_001.ogg +0 -0
  138. package/public/res/audios/kenney/audios/tick_002.ogg +0 -0
  139. package/public/res/audios/kenney/audios/tick_004.ogg +0 -0
  140. package/public/res/audios/kenney/audios/toggle_001.ogg +0 -0
  141. package/public/res/audios/kenney/audios/toggle_002.ogg +0 -0
  142. package/public/res/audios/kenney/audios/toggle_003.ogg +0 -0
  143. package/public/res/audios/kenney/audios/toggle_004.ogg +0 -0
  144. package/public/res/audios/start.mp3 +0 -0
  145. package/public/res/audios/toggle_002.mp3 +0 -0
  146. package/public/res/fonts/Accuratist.ttf +0 -0
  147. package/public/res/fonts/Closeness.ttf +0 -0
  148. package/public/res/fonts/WARGAMES.TTF +0 -0
  149. package/public/res/fonts/readme.txt +5 -0
  150. package/public/res/fonts/stormfaze.ttf +0 -0
  151. package/public/res/icons/512.png +0 -0
  152. package/public/res/icons/webgpu-horizontal.svg +45 -0
  153. package/public/res/meshes/blender/cube.blend +0 -0
  154. package/public/res/meshes/blender/cube.blend1 +0 -0
  155. package/public/res/meshes/blender/cube.mtl +12 -0
  156. package/public/res/meshes/blender/cube.obj +46 -0
  157. package/public/res/meshes/blender/cube.png +0 -0
  158. package/public/res/meshes/blender/cubeSmartUV.blend +0 -0
  159. package/public/res/meshes/blender/cubeSmartUV.mtl +12 -0
  160. package/public/res/meshes/blender/cubeSmartUV.obj +46 -0
  161. package/public/res/meshes/blender/lopta.mtl +10 -0
  162. package/public/res/meshes/blender/lopta.obj +3402 -0
  163. package/public/res/meshes/blender/piramyd.blend +0 -0
  164. package/public/res/meshes/blender/piramyd.blend1 +0 -0
  165. package/public/res/meshes/blender/piramyd.js +42 -0
  166. package/public/res/meshes/blender/piramyd.mtl +10 -0
  167. package/public/res/meshes/blender/piramyd.obj +18696 -0
  168. package/public/res/meshes/blender/piramyd1.js +42 -0
  169. package/public/res/meshes/blender/sphepe.blend +0 -0
  170. package/public/res/meshes/blender/sphepe.blend1 +0 -0
  171. package/public/res/meshes/blender/sphere.mtl +10 -0
  172. package/public/res/meshes/blender/sphere.obj +3402 -0
  173. package/public/res/meshes/blender/welcomeTextblend.blend +0 -0
  174. package/public/res/meshes/dragon/stanfordDragonData.js +5 -0
  175. package/public/res/meshes/jamb/bg.blend +0 -0
  176. package/public/res/meshes/jamb/bg.blend1 +0 -0
  177. package/public/res/meshes/jamb/bg.mtl +12 -0
  178. package/public/res/meshes/jamb/bg.obj +17 -0
  179. package/public/res/meshes/jamb/bg.png +0 -0
  180. package/public/res/meshes/jamb/dice-default.png +0 -0
  181. package/public/res/meshes/jamb/dice-mark.png +0 -0
  182. package/public/res/meshes/jamb/dice.mtl +12 -0
  183. package/public/res/meshes/jamb/dice.obj +40 -0
  184. package/public/res/meshes/jamb/dice.png +0 -0
  185. package/public/res/meshes/jamb/jamb-title.mtl +12 -0
  186. package/public/res/meshes/jamb/jamb-title.obj +26008 -0
  187. package/public/res/meshes/jamb/jamb.blend +0 -0
  188. package/public/res/meshes/jamb/jamb.blend1 +0 -0
  189. package/public/res/meshes/jamb/logo.png +0 -0
  190. package/public/res/meshes/jamb/nidzaDice.blend +0 -0
  191. package/public/res/meshes/jamb/nidzaDice.blend1 +0 -0
  192. package/public/res/meshes/jamb/pile.blend +0 -0
  193. package/public/res/meshes/jamb/simpleCube.blend +0 -0
  194. package/public/res/meshes/jamb/simpleCube.blend1 +0 -0
  195. package/public/res/meshes/jamb/sounds/roll1.wav +0 -0
  196. package/public/res/meshes/jamb/text.png +0 -0
  197. package/public/res/meshes/obj/armor.obj +319 -0
  198. package/public/res/meshes/obj/armor.png +0 -0
  199. package/public/res/meshes/objs-sequence/swat-walk-pistol_000001.mtl +22 -0
  200. package/public/res/meshes/objs-sequence/swat-walk-pistol_000001.obj +23264 -0
  201. package/public/res/meshes/objs-sequence/swat-walk-pistol_000002.mtl +22 -0
  202. package/public/res/meshes/objs-sequence/swat-walk-pistol_000002.obj +23261 -0
  203. package/public/res/meshes/objs-sequence/swat-walk-pistol_000003.mtl +22 -0
  204. package/public/res/meshes/objs-sequence/swat-walk-pistol_000003.obj +23264 -0
  205. package/public/res/meshes/objs-sequence/swat-walk-pistol_000004.mtl +22 -0
  206. package/public/res/meshes/objs-sequence/swat-walk-pistol_000004.obj +23261 -0
  207. package/public/res/meshes/objs-sequence/swat-walk-pistol_000005.mtl +22 -0
  208. package/public/res/meshes/objs-sequence/swat-walk-pistol_000005.obj +23261 -0
  209. package/public/res/meshes/objs-sequence/swat-walk-pistol_000006.mtl +22 -0
  210. package/public/res/meshes/objs-sequence/swat-walk-pistol_000006.obj +23261 -0
  211. package/public/res/meshes/objs-sequence/swat-walk-pistol_000007.mtl +22 -0
  212. package/public/res/meshes/objs-sequence/swat-walk-pistol_000007.obj +23264 -0
  213. package/public/res/meshes/objs-sequence/swat-walk-pistol_000008.mtl +22 -0
  214. package/public/res/meshes/objs-sequence/swat-walk-pistol_000008.obj +23263 -0
  215. package/public/res/meshes/objs-sequence/swat-walk-pistol_000009.mtl +22 -0
  216. package/public/res/meshes/objs-sequence/swat-walk-pistol_000009.obj +23264 -0
  217. package/public/res/meshes/objs-sequence/swat-walk-pistol_000010.mtl +22 -0
  218. package/public/res/meshes/objs-sequence/swat-walk-pistol_000010.obj +23260 -0
  219. package/public/res/meshes/objs-sequence/swat-walk-pistol_000011.mtl +22 -0
  220. package/public/res/meshes/objs-sequence/swat-walk-pistol_000011.obj +23262 -0
  221. package/public/res/meshes/objs-sequence/swat-walk-pistol_000012.mtl +22 -0
  222. package/public/res/meshes/objs-sequence/swat-walk-pistol_000012.obj +23262 -0
  223. package/public/res/meshes/objs-sequence/swat-walk-pistol_000013.mtl +22 -0
  224. package/public/res/meshes/objs-sequence/swat-walk-pistol_000013.obj +23263 -0
  225. package/public/res/meshes/objs-sequence/swat-walk-pistol_000014.mtl +22 -0
  226. package/public/res/meshes/objs-sequence/swat-walk-pistol_000014.obj +23262 -0
  227. package/public/res/meshes/objs-sequence/swat-walk-pistol_000015.mtl +22 -0
  228. package/public/res/meshes/objs-sequence/swat-walk-pistol_000015.obj +23263 -0
  229. package/public/res/meshes/objs-sequence/swat-walk-pistol_000016.mtl +22 -0
  230. package/public/res/meshes/objs-sequence/swat-walk-pistol_000016.obj +23264 -0
  231. package/public/res/meshes/objs-sequence/swat-walk-pistol_000017.mtl +22 -0
  232. package/public/res/meshes/objs-sequence/swat-walk-pistol_000017.obj +23263 -0
  233. package/public/res/meshes/objs-sequence/swat-walk-pistol_000018.mtl +22 -0
  234. package/public/res/meshes/objs-sequence/swat-walk-pistol_000018.obj +23261 -0
  235. package/public/res/meshes/objs-sequence/swat-walk-pistol_000019.mtl +22 -0
  236. package/public/res/meshes/objs-sequence/swat-walk-pistol_000019.obj +23263 -0
  237. package/public/res/meshes/objs-sequence/swat-walk-pistol_000020.mtl +22 -0
  238. package/public/res/meshes/objs-sequence/swat-walk-pistol_000020.obj +23261 -0
  239. package/public/res/meshes/shapes/star1.obj +60 -0
  240. package/public/res/multilang/en.json +39 -0
  241. package/public/res/multilang/sr.json +39 -0
  242. package/public/res/textures/default.png +0 -0
  243. package/public/res/textures/rust.jpg +0 -0
  244. package/public/res/textures/tex1.jpg +0 -0
  245. package/public/res/videos/readme.txt +2 -0
  246. package/public/res/videos/tunel.mp4 +0 -0
  247. package/public/test.html +636 -0
  248. package/public/three-test.js +165 -0
  249. package/public/worker.html +25 -0
  250. package/src/engine/ball.js +482 -0
  251. package/src/engine/cube.js +496 -0
  252. package/src/engine/engine.js +404 -0
  253. package/src/engine/final/adaptJSON1.js +53 -0
  254. package/src/engine/final/utils2.js +63 -0
  255. package/src/engine/lights.js +153 -0
  256. package/src/engine/loader-obj.js +473 -0
  257. package/src/engine/materials.js +295 -0
  258. package/src/engine/matrix-class.js +252 -0
  259. package/src/engine/mesh-obj.js +574 -0
  260. package/src/engine/raycast.js +218 -0
  261. package/src/engine/utils.js +881 -0
  262. package/src/libs/mat.js +0 -0
  263. package/src/multilang/lang.js +35 -0
  264. package/src/physics/matrix-ammo.js +363 -0
  265. package/src/shaders/fragment.video.wgsl.js +83 -0
  266. package/src/shaders/fragment.wgsl.js +75 -0
  267. package/src/shaders/shaders.js +51 -0
  268. package/src/shaders/standard-matrix-engine-shaders/standard-matrix-engine-fs.glsl +56 -0
  269. package/src/shaders/standard-matrix-engine-shaders/standard-matrix-engine-vs.glsl +75 -0
  270. package/src/shaders/vertex.wgsl.js +54 -0
  271. package/src/shaders/vertexShadow.wgsl.js +20 -0
  272. package/src/sounds/sounds.js +69 -0
  273. package/src/world.js +474 -0
package/public/test.html ADDED
@@ -0,0 +1,636 @@
1
+ <html>
2
+
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport"
6
+ content="width=device-width, initial-scale=1">
7
+ <link rel="icon"
8
+ type="image/png"
9
+ href="rotation-icon.png">
10
+ <link rel="apple-touch-icon"
11
+ type="image/png"
12
+ href="rotation-icon.png">
13
+ <title>3D Rotation Converter</title>
14
+ <style>
15
+ @media all {
16
+ html {
17
+ font-family: Garamond, Palatino, serif;
18
+ font-size: 18px;
19
+ line-height: 1.3;
20
+ }
21
+
22
+ .dcol {
23
+ float: left;
24
+ width: 50%;
25
+ padding-right: 1.5rem;
26
+ box-sizing: border-box;
27
+ }
28
+ }
29
+
30
+ @media all and (max-width:1200px) {
31
+ html {
32
+ font-size: 16px;
33
+ }
34
+ }
35
+
36
+ @media all and (max-width:980px) {
37
+ html {
38
+ font-size: 16px;
39
+ }
40
+
41
+ .dcol {
42
+ width: 100%;
43
+ }
44
+ }
45
+
46
+ @media all and (max-width:800px) {
47
+ html {
48
+ font-size: 15px;
49
+ }
50
+ }
51
+
52
+ @media all and (max-width:600px) {
53
+ html {
54
+ font-size: 13px;
55
+ }
56
+ }
57
+
58
+ @media all and (max-width:400px) {
59
+ html {
60
+ font-size: 11px;
61
+ }
62
+ }
63
+
64
+ select,
65
+ input,
66
+ textarea,
67
+ label {
68
+ font-family: "Lucida Console", "DejaVu Sans Mono", monospace;
69
+ font-size: 0.9rem;
70
+ background: #dfdff5;
71
+ border: 1px solid #323296;
72
+ color: #000;
73
+ margin: 0.1rem;
74
+ }
75
+
76
+ textarea {
77
+ background: #fff;
78
+ font-weight: bold;
79
+ }
80
+
81
+ select,
82
+ label {
83
+ font-family: Garamond, Palatino, Times;
84
+ font-size: 1rem;
85
+ margin: 0rem 0.2rem;
86
+ padding: 0.1rem 0.2rem;
87
+ }
88
+
89
+ body {
90
+ margin: 0.5rem auto;
91
+ max-width: 1800px;
92
+ padding: 1.5rem;
93
+ padding-right: 0rem;
94
+ position: relative;
95
+ }
96
+
97
+ .pi,
98
+ textarea {
99
+ padding: 0.3rem;
100
+ }
101
+
102
+ input {
103
+ width: 5rem;
104
+ }
105
+
106
+ input[type="radio"] {
107
+ height: auto;
108
+ width: auto;
109
+ }
110
+
111
+ input,
112
+ select {
113
+ margin-right: 0.5rem;
114
+ margin-top: 0.5rem;
115
+ }
116
+
117
+ .pi {
118
+ background: #eee;
119
+ transition: border-color 0.6s;
120
+ -webkit-transition: border-color 0.6s;
121
+ border: 1px solid #fff;
122
+ }
123
+
124
+ .phigh {
125
+ border: 1px solid #323296;
126
+ }
127
+
128
+ .phigh input {
129
+ font-weight: bold;
130
+ }
131
+
132
+ .dl,
133
+ .dl2 {
134
+ display: inline-block;
135
+ text-align: right;
136
+ min-width: 5rem;
137
+ margin-right: 0.3rem;
138
+ }
139
+
140
+ .dl2 {
141
+ min-width: 1rem;
142
+ }
143
+
144
+ textarea {
145
+ width: 100%;
146
+ }
147
+
148
+ input[type=number]::-webkit-outer-spin-button,
149
+ input[type=number]::-webkit-inner-spin-button {
150
+ -webkit-appearance: none;
151
+ appearance: none;
152
+ margin: 0;
153
+ }
154
+
155
+ input[type=number] {
156
+ -moz-appearance: textfield;
157
+ }
158
+ </style>
159
+ </head>
160
+
161
+ <body>
162
+ <div class="main">
163
+ <div>
164
+ <form novalidate>
165
+
166
+ <h1><img src="rotation-icon.svg"
167
+ style="height:1.2em; width:1.2em; margin-right:0.5em;"
168
+ onerror="this.onerror=null; this.src='rotation-icon.png';" /> 3D Rotation Converter</h1>
169
+
170
+ <div class="dcol">
171
+ <h2>Input</h2>
172
+ <p>Input angle format
173
+ <label><input type="radio"
174
+ id="iformatrad"
175
+ name="iformat"
176
+ value="0"
177
+ checked
178
+ onchange="update(inputMode)" />Radians</label>
179
+ <label><input type="radio"
180
+ id="iformatdeg"
181
+ name="iformat"
182
+ value="1"
183
+ onchange="update(inputMode)" />Degrees</label>
184
+ <p class="pi"
185
+ id="ip0">Rotation matrix
186
+ <br /><span class="dl"></span><input type="number"
187
+ pattern="\d+(\.\d*)?"
188
+ id="m00"
189
+ value="1"
190
+ oninput="update(0)" />
191
+ <span class="dl2"></span><input type="number"
192
+ pattern="\d+(\.\d*)?"
193
+ id="m01"
194
+ value="0"
195
+ oninput="update(0)" />
196
+ <span class="dl2"></span><input type="number"
197
+ pattern="\d+(\.\d*)?"
198
+ id="m02"
199
+ value="0"
200
+ oninput="update(0)" /> &nbsp;
201
+ <br /><span class="dl"></span><input type="number"
202
+ pattern="\d+(\.\d*)?"
203
+ id="m10"
204
+ value="0"
205
+ oninput="update(0)" />
206
+ <span class="dl2"></span><input type="number"
207
+ pattern="\d+(\.\d*)?"
208
+ id="m11"
209
+ value="1"
210
+ oninput="update(0)" />
211
+ <span class="dl2"></span><input type="number"
212
+ pattern="\d+(\.\d*)?"
213
+ id="m12"
214
+ value="0"
215
+ oninput="update(0)" /> &nbsp;
216
+ <br /><span class="dl"></span><input type="number"
217
+ pattern="\d+(\.\d*)?"
218
+ id="m20"
219
+ value="0"
220
+ oninput="update(0)" />
221
+ <span class="dl2"></span><input type="number"
222
+ pattern="\d+(\.\d*)?"
223
+ id="m21"
224
+ value="0"
225
+ oninput="update(0)" />
226
+ <span class="dl2"></span><input type="number"
227
+ pattern="\d+(\.\d*)?"
228
+ id="m22"
229
+ value="1"
230
+ oninput="update(0)" />
231
+ <p class="pi"
232
+ id="ip1">Quaternion
233
+ <br />
234
+ <span class="dl">x</span><input type="number"
235
+ pattern="\d+(\.\d*)?"
236
+ id="q0"
237
+ value="0"
238
+ oninput="update(1)" />
239
+ <span class="dl2">y</span><input type="number"
240
+ pattern="\d+(\.\d*)?"
241
+ id="q1"
242
+ value="0"
243
+ oninput="update(1)" />
244
+ <span class="dl2">z</span><input type="number"
245
+ pattern="\d+(\.\d*)?"
246
+ id="q2"
247
+ value="0"
248
+ oninput="update(1)" />
249
+ <span class="dl">w (real part) <input type="number"
250
+ pattern="\d+(\.\d*)?"
251
+ id="q3"
252
+ value="1"
253
+ oninput="update(1)" /></span>
254
+ <p class="pi"
255
+ id="ip2">Axis-angle
256
+ <br />
257
+ <span class="dl">Axis x</span><input type="number"
258
+ pattern="\d+(\.\d*)?"
259
+ id="a0"
260
+ value="0"
261
+ oninput="update(2)" />
262
+ <span class="dl2">y</span><input type="number"
263
+ pattern="\d+(\.\d*)?"
264
+ id="a1"
265
+ value="0"
266
+ oninput="update(2)" />
267
+ <span class="dl2">z</span><input type="number"
268
+ pattern="\d+(\.\d*)?"
269
+ id="a2"
270
+ value="0"
271
+ oninput="update(2)" />
272
+ <span class="dl">Angle<span name="spananglei"> (radians)</span> <input type="number"
273
+ pattern="\d+(\.\d*)?"
274
+ id="a3"
275
+ value="0"
276
+ oninput="update(2)" /></span>
277
+ <p class="pi"
278
+ id="ip3">Axis with angle magnitude<span name="spananglei"> (radians)</span>
279
+ <br /><span class="dl">Axis x</span><input type="number"
280
+ pattern="\d+(\.\d*)?"
281
+ id="r0"
282
+ value="0"
283
+ oninput="update(3)" />
284
+ <span class="dl2">y</span><input type="number"
285
+ pattern="\d+(\.\d*)?"
286
+ id="r1"
287
+ value="0"
288
+ oninput="update(3)" />
289
+ <span class="dl2">z</span><input type="number"
290
+ pattern="\d+(\.\d*)?"
291
+ id="r2"
292
+ value="0"
293
+ oninput="update(3)" />
294
+ <p class="pi"
295
+ id="ip4">Euler angles of multiple axis rotations<span name="spananglei"> (radians)</span>
296
+ <br />
297
+ <span class="dl"><select id="euler"
298
+ onchange="update(4)">
299
+ <option value="XYZ"
300
+ selected>XYZ</option>
301
+ <option value="XZY">XZY</option>
302
+ <option value="YXZ">YXZ</option>
303
+ <option value="YZX">YZX</option>
304
+ <option value="ZXY">ZXY</option>
305
+ <option value="ZYX">ZYX</option>
306
+ </select></span>
307
+ <span class="dl2">x</span><input type="number"
308
+ pattern="\d+(\.\d*)?"
309
+ id="e0"
310
+ value="0"
311
+ oninput="update(4)" />
312
+ <span class="dl2">y</span><input type="number"
313
+ pattern="\d+(\.\d*)?"
314
+ id="e1"
315
+ value="0"
316
+ oninput="update(4)" />
317
+ <span class="dl2">z</span><input type="number"
318
+ pattern="\d+(\.\d*)?"
319
+ id="e2"
320
+ value="0"
321
+ oninput="update(4)" />
322
+ <p class="pi"
323
+ id="ip5">Triple of points, P, Q, R,
324
+ such that
325
+ X &#x2225; (Q&minus;P), &nbsp;
326
+ Z &#x2225; X &times; (R&minus;P), &nbsp;and
327
+ Y &#x2225; Z &times; X.
328
+ <br />
329
+ P:
330
+ <span class="dl2">x</span><input type="number"
331
+ pattern="\d+(\.\d*)?"
332
+ id="Px"
333
+ value="0"
334
+ oninput="update(5)" />
335
+ <span class="dl2">y</span><input type="number"
336
+ pattern="\d+(\.\d*)?"
337
+ id="Py"
338
+ value="0"
339
+ oninput="update(5)" />
340
+ <span class="dl2">z</span><input type="number"
341
+ pattern="\d+(\.\d*)?"
342
+ id="Pz"
343
+ value="0"
344
+ oninput="update(5)" />
345
+ <br />
346
+ Q:
347
+ <span class="dl2">x</span><input type="number"
348
+ pattern="\d+(\.\d*)?"
349
+ id="Qx"
350
+ value="1"
351
+ oninput="update(5)" />
352
+ <span class="dl2">y</span><input type="number"
353
+ pattern="\d+(\.\d*)?"
354
+ id="Qy"
355
+ value="0"
356
+ oninput="update(5)" />
357
+ <span class="dl2">z</span><input type="number"
358
+ pattern="\d+(\.\d*)?"
359
+ id="Qz"
360
+ value="0"
361
+ oninput="update(5)" />
362
+ <br />
363
+ R:
364
+ <span class="dl2">x</span><input type="number"
365
+ pattern="\d+(\.\d*)?"
366
+ id="Rx"
367
+ value="0"
368
+ oninput="update(5)" />
369
+ <span class="dl2">y</span><input type="number"
370
+ pattern="\d+(\.\d*)?"
371
+ id="Ry"
372
+ value="1"
373
+ oninput="update(5)" />
374
+ <span class="dl2">z</span><input type="number"
375
+ pattern="\d+(\.\d*)?"
376
+ id="Rz"
377
+ value="0"
378
+ oninput="update(5)" />
379
+ <br />
380
+ </div>
381
+
382
+ <div class="dcol">
383
+ <h2>Output</h2>
384
+ <script src="three-test.js"></script>
385
+ <script>
386
+ var quat = new THREE.Quaternion();
387
+ var highlightedId = 'ip0';
388
+ var inputMode = 0;
389
+ function matrixToString(m) {
390
+ var r = m.elements;
391
+ var s =
392
+ '[ ' + toFixedWidth(r[0]) + ', ' + toFixedWidth(r[4]) + ', ' + toFixedWidth(r[8]) + ';\n'
393
+ + ' ' + toFixedWidth(r[1]) + ', ' + toFixedWidth(r[5]) + ', ' + toFixedWidth(r[9]) + ';\n'
394
+ + ' ' + toFixedWidth(r[2]) + ', ' + toFixedWidth(r[6]) + ', ' + toFixedWidth(r[10]) + ' ]';
395
+ return s;
396
+ }
397
+ function highlight(id) {
398
+ if (document.getElementById(highlightedId)) document.getElementById(highlightedId).classList.remove('phigh');
399
+ highlightedId = id;
400
+ document.getElementById(id).classList.add('phigh');
401
+ }
402
+ function setQ(q) {
403
+ q.normalize();
404
+ quat = q;
405
+ doOutput();
406
+ }
407
+ function doOutput() {
408
+ var q = quat;
409
+ var m = new THREE.Matrix4();
410
+ m.makeRotationFromQuaternion(q);
411
+ document.getElementById("resmatrix").value = matrixToString(m);
412
+ document.getElementById("resq").value = '[ ' + toReal(q.x) + ', ' + toReal(q.y) + ', ' + toReal(q.z) + ', ' + toReal(q.w) + ' ]';
413
+
414
+ var axis = [0, 0, 0];
415
+ var angle = 2 * Math.acos(q.w);
416
+ if(1 - (q.w * q.w) < 0.000001) {
417
+ axis[0] = q.x;
418
+ axis[1] = q.y;
419
+ axis[2] = q.z;
420
+ }
421
+ else {
422
+ // http://www.euclideanspace.com/maths/geometry/rotations/conversions/quaternionToAngle/
423
+ var s = Math.sqrt(1 - (q.w * q.w));
424
+ axis[0] = q.x / s;
425
+ axis[1] = q.y / s;
426
+ axis[2] = q.z / s;
427
+ }
428
+ document.getElementById("resa").value = '{ [ ' + toReal(axis[0]) + ', ' + toReal(axis[1]) + ', ' + toReal(axis[2]) + ' ], ' + toReal(toAngle(angle)) + ' }';
429
+
430
+ document.getElementById("resr").value = '[ ' + toReal(toAngle(axis[0] * angle)) + ', ' + toReal(toAngle(axis[1] * angle)) + ', ' + toReal(toAngle(axis[2] * angle)) + ' ]';
431
+
432
+ var eu = new THREE.Euler();
433
+ eu.setFromRotationMatrix(m, document.getElementById("reseuler").value);
434
+ document.getElementById("rese").value = '[ x: ' + toReal(toAngle(eu.toArray()[0])) + ', y: ' + toReal(toAngle(eu.toArray()[1])) + ', z: ' + toReal(toAngle(eu.toArray()[2])) + ' ]';
435
+
436
+ var spansi = document.getElementsByName('spananglei');
437
+ for(var i = 0;i < spansi.length;i++) {
438
+ if(document.getElementById('iformatrad').checked) {
439
+ spansi[i].textContent = ' (radians)';
440
+ }
441
+ else {
442
+ spansi[i].textContent = ' (degrees)';
443
+ }
444
+ }
445
+
446
+ var spansres = document.getElementsByName('spanangleres');
447
+ for(var i = 0;i < spansres.length;i++) {
448
+ if(document.getElementById('resformatrad').checked) {
449
+ spansres[i].textContent = ' (radians)';
450
+ }
451
+ else {
452
+ spansres[i].textContent = ' (degrees)';
453
+ }
454
+ }
455
+ }
456
+ function update(mode) {
457
+ inputMode = mode;
458
+ var q = new THREE.Quaternion();
459
+ if(inputMode == 0) {
460
+ var m = new THREE.Matrix4();
461
+ var m00 = document.getElementById("m00").value;
462
+ var m01 = document.getElementById("m01").value;
463
+ var m02 = document.getElementById("m02").value;
464
+ var m10 = document.getElementById("m10").value;
465
+ var m11 = document.getElementById("m11").value;
466
+ var m12 = document.getElementById("m12").value;
467
+ var m20 = document.getElementById("m20").value;
468
+ var m21 = document.getElementById("m21").value;
469
+ var m22 = document.getElementById("m22").value;
470
+ m.set(m00, m01, m02, 1, m10, m11, m12, 1, m20, m21, m22, 1, 0, 0, 0, 1);
471
+ q.setFromRotationMatrix(m);
472
+ }
473
+ else if(inputMode == 1) {
474
+ q = new THREE.Quaternion(document.getElementById("q0").value,
475
+ document.getElementById("q1").value,
476
+ document.getElementById("q2").value,
477
+ document.getElementById("q3").value);
478
+ }
479
+ else if(inputMode == 2) {
480
+ q = new THREE.Quaternion();
481
+ var axis = new THREE.Vector3(document.getElementById("a0").value,
482
+ document.getElementById("a1").value,
483
+ document.getElementById("a2").value);
484
+ axis.normalize();
485
+ q.setFromAxisAngle(axis, toRad(document.getElementById("a3").value));
486
+ }
487
+ else if(inputMode == 3) {
488
+ var axis = new THREE.Vector3(document.getElementById("r0").value,
489
+ document.getElementById("r1").value,
490
+ document.getElementById("r2").value);
491
+ var angle = toRad(axis.length());
492
+ axis.normalize();
493
+ q.setFromAxisAngle(axis, angle);
494
+ }
495
+ else if(inputMode == 4) {
496
+ var e = new THREE.Euler(toRad(document.getElementById("e0").value),
497
+ toRad(document.getElementById("e1").value),
498
+ toRad(document.getElementById("e2").value),
499
+ document.getElementById("euler").value);
500
+ q.setFromEuler(e);
501
+ }
502
+ else if(inputMode == 5) {
503
+ var m = new THREE.Matrix4();
504
+ var P = getVector("P");
505
+ var Q = getVector("Q");
506
+ var R = getVector("R");
507
+ var x = new THREE.Vector3();
508
+ var y = new THREE.Vector3();
509
+ var z = new THREE.Vector3();
510
+ x.subVectors(Q, P).normalize();
511
+ y.subVectors(R, P);
512
+ z.crossVectors(x, y).normalize();
513
+ y.crossVectors(z, x).normalize();
514
+ m.set(x.x, y.x, z.x, 1, x.y, y.y, z.y, 1, x.z, y.z, z.z, 1, 0, 0, 0, 1);
515
+ q.setFromRotationMatrix(m);
516
+ }
517
+ setQ(q);
518
+ highlight('ip' + inputMode);
519
+ }
520
+ function getVector(root) {
521
+ vx = document.getElementById(root + "x").value;
522
+ vy = document.getElementById(root + "y").value;
523
+ vz = document.getElementById(root + "z").value;
524
+ return new THREE.Vector3(vx, vy, vz);
525
+ }
526
+ function toRad(x) {
527
+ if(document.getElementById("iformatdeg").checked) {
528
+ return x / 180 * Math.PI;
529
+ }
530
+ else {
531
+ return x;
532
+ }
533
+ }
534
+ function toAngle(x) {
535
+ if(document.getElementById("resformatdeg").checked) {
536
+ return x * 180 / Math.PI;
537
+ }
538
+ else {
539
+ return x;
540
+ }
541
+ }
542
+ function toReal(x) {
543
+ if(!isNaN(parseFloat(x)) && isFinite(parseFloat(x))) {
544
+ return parseFloat(parseFloat(x).toFixed(7));
545
+ }
546
+ else {
547
+ return x;
548
+ }
549
+ }
550
+ function toFixedWidth(x) {
551
+ if(!isNaN(parseFloat(x)) && isFinite(parseFloat(x))) {
552
+ var s = x.toFixed(7);
553
+ if(x >= 0) s = ' ' + s;
554
+ return s;
555
+ }
556
+ else {
557
+ return x;
558
+ }
559
+ }
560
+ </script>
561
+ <p>Output angle format
562
+ <label><input type="radio"
563
+ id="resformatrad"
564
+ name="resformat"
565
+ value="0"
566
+ checked
567
+ onchange="doOutput()" />Radians</label>
568
+ <label><input type="radio"
569
+ id="resformatdeg"
570
+ name="resformat"
571
+ value="1"
572
+ onchange="doOutput()" />Degrees</label>
573
+ <p>Rotation matrix
574
+ <br /><textarea id="resmatrix"
575
+ rows="3"
576
+ cols="70"
577
+ readonly></textarea>
578
+ <p>Quaternion [x, y, z, w]
579
+ <br /><textarea id="resq"
580
+ rows="1"
581
+ cols="85"
582
+ readonly></textarea>
583
+ <p>Axis-Angle {[x, y, z], angle<span name="spanangleres"> (radians)</span>}
584
+ <br /><textarea id="resa"
585
+ rows="1"
586
+ cols="85"
587
+ readonly></textarea>
588
+ <p>Axis with angle magnitude<span name="spanangleres"> (radians)</span> [x, y, z]
589
+ <br /><textarea id="resr"
590
+ rows="1"
591
+ cols="85"
592
+ readonly></textarea>
593
+ <p>Euler angles<span name="spanangleres"> (radians)</span>
594
+ <select id="reseuler"
595
+ onchange="doOutput()">
596
+ <option value="XYZ"
597
+ selected>XYZ</option>
598
+ <option value="XZY">XZY</option>
599
+ <option value="YXZ">YXZ</option>
600
+ <option value="YZX">YZX</option>
601
+ <option value="ZXY">ZXY</option>
602
+ <option value="ZYX">ZYX</option>
603
+ </select>
604
+ <br />
605
+ <textarea id="rese"
606
+ rows="1"
607
+ cols="70"
608
+ readonly></textarea>
609
+ </div>
610
+ <br style="clear: left;" />
611
+
612
+ <div class="dcol">
613
+ <h2>Details</h2>
614
+ <p>
615
+ Please note that rotation formats vary.
616
+ For quaternions, it is not uncommon to denote the real part first.
617
+ Euler angles can be defined with many different combinations (see <a href="https://en.wikipedia.org/wiki/Euler_angles#Tait.E2.80.93Bryan_angles">definition of Cardan angles</a>).
618
+ All input is normalized to unit quaternions and may therefore mapped to different ranges.
619
+ The converter can therefore also be used to normalize a rotation matrix or a quaternion.
620
+ Results are rounded to seven digits.
621
+ </div>
622
+
623
+ <div class="dcol">
624
+ <h2>Software</h2>
625
+ <p>
626
+ This calculator for 3D rotations is open-source software.
627
+ If there are any bugs, please push fixes to the <a href="https://github.com/gaschler/rotationconverter">Rotation Converter git repo</a>.
628
+ For almost all conversions, <a href="https://threejs.org/docs/index.html#api/math/Quaternion">three.js Math</a> is used internally.
629
+ </div>
630
+
631
+ </form>
632
+ </div>
633
+ </div>
634
+ </body>
635
+
636
+ </html>