chorama 0.0.0

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 (256) hide show
  1. package/.configs/tsconfig.lib.json +43 -0
  2. package/.configs/tsconfig.website.json +34 -0
  3. package/.github/workflows/static.yml +88 -0
  4. package/.vscode/launch.json +29 -0
  5. package/.vscode/tasks.json +19 -0
  6. package/README.md +127 -0
  7. package/assets/images/disappointed.jpg +0 -0
  8. package/assets/images/skybox/grimmnight_back.png +0 -0
  9. package/assets/images/skybox/grimmnight_bottom.png +0 -0
  10. package/assets/images/skybox/grimmnight_front.png +0 -0
  11. package/assets/images/skybox/grimmnight_left.png +0 -0
  12. package/assets/images/skybox/grimmnight_right.png +0 -0
  13. package/assets/images/skybox/grimmnight_top.png +0 -0
  14. package/assets/images/skybox/miramar_back.png +0 -0
  15. package/assets/images/skybox/miramar_bottom.png +0 -0
  16. package/assets/images/skybox/miramar_front.png +0 -0
  17. package/assets/images/skybox/miramar_left.png +0 -0
  18. package/assets/images/skybox/miramar_right.png +0 -0
  19. package/assets/images/skybox/miramar_top.png +0 -0
  20. package/assets/images/uv.jpg +0 -0
  21. package/assets/models/gltf/flight_helmet/FlightHelmet_Materials_GlassPlasticMat_BaseColor.png +0 -0
  22. package/assets/models/gltf/flight_helmet/FlightHelmet_Materials_GlassPlasticMat_Normal.png +0 -0
  23. package/assets/models/gltf/flight_helmet/FlightHelmet_Materials_GlassPlasticMat_OcclusionRoughMetal.png +0 -0
  24. package/assets/models/gltf/flight_helmet/FlightHelmet_Materials_LeatherPartsMat_BaseColor.png +0 -0
  25. package/assets/models/gltf/flight_helmet/FlightHelmet_Materials_LeatherPartsMat_Normal.png +0 -0
  26. package/assets/models/gltf/flight_helmet/FlightHelmet_Materials_LeatherPartsMat_OcclusionRoughMetal.png +0 -0
  27. package/assets/models/gltf/flight_helmet/FlightHelmet_Materials_LensesMat_BaseColor.png +0 -0
  28. package/assets/models/gltf/flight_helmet/FlightHelmet_Materials_LensesMat_Normal.png +0 -0
  29. package/assets/models/gltf/flight_helmet/FlightHelmet_Materials_LensesMat_OcclusionRoughMetal.png +0 -0
  30. package/assets/models/gltf/flight_helmet/FlightHelmet_Materials_MetalPartsMat_BaseColor.png +0 -0
  31. package/assets/models/gltf/flight_helmet/FlightHelmet_Materials_MetalPartsMat_Normal.png +0 -0
  32. package/assets/models/gltf/flight_helmet/FlightHelmet_Materials_MetalPartsMat_OcclusionRoughMetal.png +0 -0
  33. package/assets/models/gltf/flight_helmet/FlightHelmet_Materials_RubberWoodMat_BaseColor.png +0 -0
  34. package/assets/models/gltf/flight_helmet/FlightHelmet_Materials_RubberWoodMat_Normal.png +0 -0
  35. package/assets/models/gltf/flight_helmet/FlightHelmet_Materials_RubberWoodMat_OcclusionRoughMetal.png +0 -0
  36. package/assets/models/gltf/flight_helmet/index.bin +0 -0
  37. package/assets/models/gltf/flight_helmet/index.gltf +705 -0
  38. package/assets/models/gltf/object.gltf +23 -0
  39. package/assets/models/gltf/pirate_girl/index.bin +0 -0
  40. package/assets/models/gltf/pirate_girl/index.gltf +2082 -0
  41. package/assets/models/obj/pirate_girl/pirate_girl.obj +18459 -0
  42. package/assets/models/obj/pirate_girl/pirate_girl.png +0 -0
  43. package/astro.config.mjs +45 -0
  44. package/content/guide/api-map.md +89 -0
  45. package/content/guide/camera-and-controls.md +98 -0
  46. package/content/guide/first-scene.md +176 -0
  47. package/content/guide/index.md +72 -0
  48. package/content/guide/installation.md +179 -0
  49. package/content/guide/materials-and-lighting.md +138 -0
  50. package/content/guide/plugins-and-render-pipeline.md +124 -0
  51. package/content/guide/render-targets-and-views.md +147 -0
  52. package/content/guide/scene-graph-and-transforms.md +113 -0
  53. package/content/guide/textures-and-assets.md +120 -0
  54. package/content/guide/troubleshooting.md +49 -0
  55. package/env.d.ts +19 -0
  56. package/examples/addons/rendergraph_gui.js +580 -0
  57. package/examples/camera/orthographic.js +120 -0
  58. package/examples/camera/perspective.js +138 -0
  59. package/examples/lights/directional.js +397 -0
  60. package/examples/lights/multiple_spot_lights.js +304 -0
  61. package/examples/lights/point.js +337 -0
  62. package/examples/lights/spot.js +366 -0
  63. package/examples/loader/gltf_material.js +111 -0
  64. package/examples/loader/gltfloader.js +78 -0
  65. package/examples/loader/objloader.js +95 -0
  66. package/examples/material/cullface.js +111 -0
  67. package/examples/material/materials.js +126 -0
  68. package/examples/material/standard/basic.js +164 -0
  69. package/examples/mesh/circle.js +117 -0
  70. package/examples/mesh/cuboid.js +151 -0
  71. package/examples/mesh/cylinder.js +139 -0
  72. package/examples/mesh/geometries.js +108 -0
  73. package/examples/mesh/meshTopology.js +103 -0
  74. package/examples/mesh/plane.js +117 -0
  75. package/examples/mesh/skinning.js +136 -0
  76. package/examples/mesh/uvsphere.js +113 -0
  77. package/examples/other/rotatingCube.js +93 -0
  78. package/examples/other/rotatingSphere.js +96 -0
  79. package/examples/rendertarget/basic_canvas.js +130 -0
  80. package/examples/rendertarget/depth_texture.js +130 -0
  81. package/examples/rendertarget/image_target.js +140 -0
  82. package/examples/rendertarget/multiple_views.js +158 -0
  83. package/examples/rendertarget/render_masks.js +173 -0
  84. package/examples/rendertarget/split_screen.js +123 -0
  85. package/examples/rendertarget/split_view.js +137 -0
  86. package/examples/skybox/skybox.js +111 -0
  87. package/examples/texture/arrays.js +156 -0
  88. package/examples/texture/textureWrap.js +118 -0
  89. package/examples/transform/propagation.js +92 -0
  90. package/package.json +55 -0
  91. package/rollup.config.js +66 -0
  92. package/scripts/stage-chorama.mjs +29 -0
  93. package/src/caches/cache.js +420 -0
  94. package/src/caches/index.js +2 -0
  95. package/src/caches/uniformbuffers.js +104 -0
  96. package/src/cameracontrols/index.js +258 -0
  97. package/src/constants/index.js +3 -0
  98. package/src/constants/mesh.js +197 -0
  99. package/src/constants/others.js +218 -0
  100. package/src/constants/texture.js +183 -0
  101. package/src/core/constants.js +14 -0
  102. package/src/core/extensions.js +42 -0
  103. package/src/core/index.js +7 -0
  104. package/src/core/layouts/index.js +4 -0
  105. package/src/core/layouts/meshvertex.js +60 -0
  106. package/src/core/layouts/uniform.js +21 -0
  107. package/src/core/layouts/uniformbuffer.js +15 -0
  108. package/src/core/layouts/vertexbuffer.js +43 -0
  109. package/src/core/limits.js +247 -0
  110. package/src/core/resources/blendparams.js +89 -0
  111. package/src/core/resources/framebuffer.js +127 -0
  112. package/src/core/resources/gpubuffer.js +32 -0
  113. package/src/core/resources/gpumesh.js +43 -0
  114. package/src/core/resources/gputexture.js +73 -0
  115. package/src/core/resources/index.js +5 -0
  116. package/src/core/shader.js +62 -0
  117. package/src/core/webgl/bindgroup.js +89 -0
  118. package/src/core/webgl/descriptors.js +104 -0
  119. package/src/core/webgl/index.js +5 -0
  120. package/src/core/webgl/renderpassencoder.js +96 -0
  121. package/src/core/webgl/renderpipeline.js +54 -0
  122. package/src/core/webgl/utils.js +371 -0
  123. package/src/core/webgl/webglrenderdevice.js +235 -0
  124. package/src/function.js +358 -0
  125. package/src/index.js +15 -0
  126. package/src/loader/gltf.js +2172 -0
  127. package/src/loader/index.js +3 -0
  128. package/src/loader/loader.js +174 -0
  129. package/src/loader/obj.js +188 -0
  130. package/src/loader/texture.js +85 -0
  131. package/src/loader/utils.js +16 -0
  132. package/src/material/basic.js +75 -0
  133. package/src/material/depth.js +73 -0
  134. package/src/material/index.js +8 -0
  135. package/src/material/lambert.js +73 -0
  136. package/src/material/material.js +106 -0
  137. package/src/material/normal.js +30 -0
  138. package/src/material/phong.js +86 -0
  139. package/src/material/raw.js +52 -0
  140. package/src/material/standard.js +221 -0
  141. package/src/math/index.js +3 -0
  142. package/src/math/transform.js +38 -0
  143. package/src/mesh/attribute/attribute.js +79 -0
  144. package/src/mesh/attribute/index.js +1 -0
  145. package/src/mesh/attributedata/index.js +1 -0
  146. package/src/mesh/attributedata/separate.js +180 -0
  147. package/src/mesh/builders/base.js +41 -0
  148. package/src/mesh/builders/circle.js +63 -0
  149. package/src/mesh/builders/cuboid.js +135 -0
  150. package/src/mesh/builders/cylinder.js +131 -0
  151. package/src/mesh/builders/index.js +7 -0
  152. package/src/mesh/builders/plane.js +73 -0
  153. package/src/mesh/builders/utils.js +20 -0
  154. package/src/mesh/builders/uvsphere.js +80 -0
  155. package/src/mesh/builders/wireframe.js +62 -0
  156. package/src/mesh/index.js +4 -0
  157. package/src/mesh/mesh.js +149 -0
  158. package/src/objects/bone.js +17 -0
  159. package/src/objects/camera/camera.js +56 -0
  160. package/src/objects/camera/index.js +2 -0
  161. package/src/objects/camera/projection.js +203 -0
  162. package/src/objects/debug/index.js +1 -0
  163. package/src/objects/debug/skeleton.js +28 -0
  164. package/src/objects/index.js +7 -0
  165. package/src/objects/light/ambient.js +20 -0
  166. package/src/objects/light/directional.js +29 -0
  167. package/src/objects/light/index.js +5 -0
  168. package/src/objects/light/point.js +32 -0
  169. package/src/objects/light/shadow/index.js +1 -0
  170. package/src/objects/light/shadow/shadow.js +67 -0
  171. package/src/objects/light/spot.js +56 -0
  172. package/src/objects/mesh.js +141 -0
  173. package/src/objects/object3d.js +167 -0
  174. package/src/objects/skybox.js +38 -0
  175. package/src/plugins/camera/camera.js +19 -0
  176. package/src/plugins/camera/index.js +2 -0
  177. package/src/plugins/camera/nodes/cameraview.js +46 -0
  178. package/src/plugins/camera/nodes/index.js +2 -0
  179. package/src/plugins/camera/nodes/opaquepass.js +79 -0
  180. package/src/plugins/index.js +6 -0
  181. package/src/plugins/light/index.js +2 -0
  182. package/src/plugins/light/light.js +23 -0
  183. package/src/plugins/light/nodes/index.js +1 -0
  184. package/src/plugins/light/nodes/light.js +127 -0
  185. package/src/plugins/meshmaterial/index.js +3 -0
  186. package/src/plugins/meshmaterial/meshmaterial.js +381 -0
  187. package/src/plugins/meshmaterial/nodes/index.js +1 -0
  188. package/src/plugins/meshmaterial/nodes/meshmaterial.js +50 -0
  189. package/src/plugins/meshmaterial/resources/index.js +1 -0
  190. package/src/plugins/meshmaterial/resources/meshmaterialpipelines.js +50 -0
  191. package/src/plugins/shadow/index.js +3 -0
  192. package/src/plugins/shadow/nodes/index.js +3 -0
  193. package/src/plugins/shadow/nodes/shadow.js +272 -0
  194. package/src/plugins/shadow/nodes/shadowOccluder.js +112 -0
  195. package/src/plugins/shadow/nodes/shadowOpaquePass.js +73 -0
  196. package/src/plugins/shadow/resources/ShadowMap.js +99 -0
  197. package/src/plugins/shadow/resources/index.js +2 -0
  198. package/src/plugins/shadow/resources/shadowpipelines.js +25 -0
  199. package/src/plugins/shadow/shadow.js +31 -0
  200. package/src/plugins/skeletonhelper/index.js +1 -0
  201. package/src/plugins/skeletonhelper/skeletonhelper.js +160 -0
  202. package/src/plugins/skybox/index.js +3 -0
  203. package/src/plugins/skybox/nodes/index.js +1 -0
  204. package/src/plugins/skybox/nodes/skybox.js +143 -0
  205. package/src/plugins/skybox/resources/index.js +2 -0
  206. package/src/plugins/skybox/resources/skyboxmesh.js +14 -0
  207. package/src/plugins/skybox/resources/skyboxpipeline.js +6 -0
  208. package/src/plugins/skybox/skybox.js +137 -0
  209. package/src/renderer/core/index.js +179 -0
  210. package/src/renderer/graph/index.js +3 -0
  211. package/src/renderer/graph/nodes.js +34 -0
  212. package/src/renderer/graph/rendergraph.js +182 -0
  213. package/src/renderer/index.js +5 -0
  214. package/src/renderer/plugin.js +36 -0
  215. package/src/renderer/renderer.js +179 -0
  216. package/src/renderer/views.js +28 -0
  217. package/src/rendertarget/canvastarget.js +30 -0
  218. package/src/rendertarget/image.js +132 -0
  219. package/src/rendertarget/index.js +3 -0
  220. package/src/rendertarget/rendertarget.js +89 -0
  221. package/src/shader/basicFragment.glsl +30 -0
  222. package/src/shader/basicVertex.glsl +87 -0
  223. package/src/shader/common/color.glsl +7 -0
  224. package/src/shader/common/common.glsl +25 -0
  225. package/src/shader/common/index.js +4 -0
  226. package/src/shader/common/light.glsl +437 -0
  227. package/src/shader/common/math.glsl +12 -0
  228. package/src/shader/debug/index.js +2 -0
  229. package/src/shader/debug/skeletonFragment.glsl +8 -0
  230. package/src/shader/debug/skeletonVertex.glsl +27 -0
  231. package/src/shader/depthFragment.glsl +37 -0
  232. package/src/shader/index.js +11 -0
  233. package/src/shader/lambertFragment.glsl +126 -0
  234. package/src/shader/normalFragment.glsl +25 -0
  235. package/src/shader/phongFragment.glsl +140 -0
  236. package/src/shader/skyboxFragment.glsl +16 -0
  237. package/src/shader/skyboxVertex.glsl +20 -0
  238. package/src/shader/standardFragment.glsl +274 -0
  239. package/src/texture/index.js +2 -0
  240. package/src/texture/sampler.js +111 -0
  241. package/src/texture/texture.js +234 -0
  242. package/src/utils/index.js +115 -0
  243. package/tsconfig.json +11 -0
  244. package/website/config/index.ts +1 -0
  245. package/website/config/navigation.ts +53 -0
  246. package/website/content.config.ts +92 -0
  247. package/website/layouts/DocLayout.astro +501 -0
  248. package/website/layouts/Example.astro +91 -0
  249. package/website/pages/examples/[...slug].astro +77 -0
  250. package/website/pages/examples/index.astro +98 -0
  251. package/website/pages/examples/samples/[...slug].astro +17 -0
  252. package/website/pages/guide/[slug].astro +30 -0
  253. package/website/pages/guide/index.astro +21 -0
  254. package/website/pages/index.astro +9 -0
  255. package/website/plugins/remark-link-base.js +23 -0
  256. package/website/utils/url.ts +30 -0
package/website/layouts/DocLayout.astro ADDED
@@ -0,0 +1,501 @@
1
+ ---
2
+ interface Tab {
3
+ label: string;
4
+ href?: string;
5
+ children?: Tab[];
6
+ }
7
+
8
+ interface Props {
9
+ title?: string;
10
+ tabs?: Tab[];
11
+ }
12
+
13
+ const { title = "Chorama", tabs = [] } = Astro.props;
14
+ ---
15
+
16
+ <!doctype html>
17
+ <html lang="en">
18
+ <head>
19
+ <meta charset="UTF-8" />
20
+ <meta name="viewport" content="width=device-width" />
21
+ <meta name="generator" content={Astro.generator} />
22
+ <title>{title}</title>
23
+ <style is:global>
24
+ .markdown-alert {
25
+ padding: 1rem 1.2rem;
26
+ margin: 1.25rem 0;
27
+ border-left: 4px solid;
28
+ border-radius: 8px;
29
+ background-color: #161b22;
30
+ color: #e6edf3;
31
+ font-size: 0.95rem;
32
+ line-height: 1.6;
33
+ }
34
+
35
+ .markdown-alert-title {
36
+ display: inline-flex;
37
+ align-items: center;
38
+ gap: 0.5rem;
39
+
40
+ font-size: 1.5rem;
41
+ font-weight: 1000;
42
+ letter-spacing: 0.05em;
43
+ text-transform: uppercase;
44
+
45
+ padding: 0.25rem 0.6rem;
46
+ border-radius: 999px;
47
+ }
48
+
49
+ .markdown-alert p {
50
+ margin: 0.5rem 0 0;
51
+ }
52
+
53
+ .markdown-alert strong {
54
+ display: block;
55
+ margin-bottom: 0.25rem;
56
+ font-weight: 600;
57
+ }
58
+ /* NOTE */
59
+ .markdown-alert-note {
60
+ border-color: #2f81f7;
61
+ background-color: rgba(47, 129, 247, 0.15);
62
+ }
63
+
64
+ /* TIP */
65
+ .markdown-alert-tip {
66
+ border-color: #3fb950;
67
+ background-color: rgba(63, 185, 80, 0.15);
68
+ }
69
+
70
+ /* IMPORTANT */
71
+ .markdown-alert-important {
72
+ border-color: #a371f7;
73
+ background-color: rgba(163, 113, 247, 0.15);
74
+ }
75
+
76
+ /* WARNING */
77
+ .markdown-alert-warning {
78
+ border-color: #d29922;
79
+ background-color: rgba(210, 153, 34, 0.15);
80
+ }
81
+
82
+ /* CAUTION */
83
+ .markdown-alert-caution {
84
+ border-color: #f85149;
85
+ background-color: rgba(248, 81, 73, 0.15);
86
+ }
87
+ </style>
88
+ <style>
89
+ :root {
90
+ color-scheme: dark;
91
+ --bg: #000000;
92
+ --panel: #0a0a0a;
93
+ --text: #f3f4f6;
94
+ --muted: #b6b8bd;
95
+ --border: #22252b;
96
+ --accent: #ffffff;
97
+ --accent-secondary: #c9ced6;
98
+ --code-bg: #050505;
99
+ --code-text: #f2f3f5;
100
+ }
101
+
102
+ * {
103
+ box-sizing: border-box;
104
+ }
105
+
106
+ body {
107
+ margin: 0;
108
+ font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
109
+ color: var(--text);
110
+ background: var(--bg);
111
+ }
112
+
113
+ .shell {
114
+ min-height: 100vh;
115
+ }
116
+
117
+ .menu-toggle {
118
+ position: fixed;
119
+ top: 0.9rem;
120
+ left: 0.9rem;
121
+ width: 2.8rem;
122
+ height: 2.8rem;
123
+ display: none;
124
+ align-items: center;
125
+ justify-content: center;
126
+ flex-direction: column;
127
+ gap: 0.32rem;
128
+ padding: 0;
129
+ border: 1px solid #2f333b;
130
+ border-radius: 8px;
131
+ background: #111318;
132
+ color: var(--text);
133
+ z-index: 1000;
134
+ }
135
+
136
+ .menu-toggle span {
137
+ width: 1.25rem;
138
+ height: 2px;
139
+ background: var(--text);
140
+ border-radius: 3px;
141
+ transition:
142
+ transform 150ms ease,
143
+ opacity 150ms ease;
144
+ }
145
+
146
+ aside {
147
+ position: fixed;
148
+ top: 0;
149
+ left: 0;
150
+ height: 100vh;
151
+ width: 260px;
152
+ padding: 1.25rem 1rem;
153
+ background: var(--panel);
154
+ border: 1px solid var(--border);
155
+ border-radius: 0;
156
+ box-shadow: none;
157
+ overflow-y: auto;
158
+ z-index: 900;
159
+ }
160
+
161
+ .tabs-title {
162
+ margin: 0 0 0.75rem;
163
+ font-size: 0.82rem;
164
+ letter-spacing: 0.08em;
165
+ text-transform: uppercase;
166
+ color: var(--accent-secondary);
167
+ }
168
+
169
+ .tabs {
170
+ list-style: none;
171
+ margin: 0;
172
+ padding: 0;
173
+ display: flex;
174
+ flex-direction: column;
175
+ gap: 0;
176
+ width: 100%;
177
+ }
178
+
179
+ .tabs > li {
180
+ display: flex;
181
+ flex-direction: column;
182
+ gap: 0;
183
+ width: 100%;
184
+ }
185
+
186
+ .tabs a {
187
+ display: block;
188
+ width: 100%;
189
+ padding: 0.65rem 0.8rem;
190
+ border: 1px solid #2f333b;
191
+ border-radius: 0;
192
+ text-decoration: none;
193
+ color: var(--text);
194
+ background: linear-gradient(180deg, #171a20 0%, #111318 100%);
195
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
196
+ font-size: 0.92rem;
197
+ font-weight: 600;
198
+ transition:
199
+ transform 120ms ease,
200
+ color 120ms ease,
201
+ border-color 120ms ease,
202
+ background-color 120ms ease;
203
+ }
204
+
205
+ .tab-toggle {
206
+ width: 100%;
207
+ display: flex;
208
+ align-items: center;
209
+ justify-content: space-between;
210
+ padding: 0.65rem 0.8rem;
211
+ border: 1px solid #2f333b;
212
+ border-radius: 0;
213
+ color: var(--text);
214
+ background: linear-gradient(180deg, #171a20 0%, #111318 100%);
215
+ font-size: 0.92rem;
216
+ font-weight: 600;
217
+ text-align: left;
218
+ cursor: pointer;
219
+ }
220
+
221
+ .tab-toggle .chevron {
222
+ color: var(--muted);
223
+ transition: transform 140ms ease;
224
+ }
225
+
226
+ .tab-toggle[aria-expanded="true"] .chevron {
227
+ transform: rotate(90deg);
228
+ }
229
+
230
+ .tabs a:hover {
231
+ color: #22c55e;
232
+ border-color: #4a5060;
233
+ background: linear-gradient(180deg, #1f242d 0%, #171b22 100%);
234
+ transform: translateY(-1px);
235
+ }
236
+
237
+ .tabs a.is-active,
238
+ .tab-toggle.is-active,
239
+ .subtabs a.is-active {
240
+ color: #79b8ff;
241
+ border-color: #2f5f8f;
242
+ background: #101a24;
243
+ }
244
+
245
+ .tabs a:active {
246
+ transform: translateY(0);
247
+ background: #12151b;
248
+ }
249
+
250
+ .subtabs {
251
+ list-style: none;
252
+ margin: 0;
253
+ padding: 0;
254
+ display: flex;
255
+ flex-direction: column;
256
+ gap: 0;
257
+ width: 100%;
258
+ }
259
+
260
+ .subtabs a {
261
+ font-size: 0.88rem;
262
+ padding: 0.56rem 0.9rem;
263
+ color: var(--muted);
264
+ background: #0d0f13;
265
+ border-top: 0;
266
+ border-left: 1px solid #2f333b;
267
+ border-right: 1px solid #2f333b;
268
+ }
269
+
270
+ .subtabs li:last-child a {
271
+ border-bottom: 1px solid #2f333b;
272
+ }
273
+
274
+ .subtabs[hidden] {
275
+ display: none;
276
+ }
277
+
278
+ .subtabs a:hover {
279
+ color: #22c55e;
280
+ }
281
+
282
+ main {
283
+ min-height: 100vh;
284
+ margin: 0 0 0 260px;
285
+ padding: 2rem;
286
+ background: transparent;
287
+ border: 0;
288
+ border-radius: 0;
289
+ box-shadow: none;
290
+ }
291
+
292
+ h1,
293
+ h2,
294
+ h3 {
295
+ line-height: 1.25;
296
+ }
297
+
298
+ h1 {
299
+ margin-top: 0;
300
+ }
301
+
302
+ h2 {
303
+ margin-top: 2rem;
304
+ padding-bottom: 0.35rem;
305
+ border-bottom: 1px solid var(--border);
306
+ color: var(--accent);
307
+ }
308
+
309
+ p,
310
+ li {
311
+ color: var(--muted);
312
+ line-height: 1.6;
313
+ }
314
+
315
+ code {
316
+ font-family: "Cascadia Code", "Fira Code", Consolas, monospace;
317
+ }
318
+
319
+ pre {
320
+ padding: 1rem;
321
+ border-radius: 10px;
322
+ background: var(--code-bg);
323
+ color: var(--code-text);
324
+ overflow-x: auto;
325
+ }
326
+
327
+ pre code {
328
+ color: inherit;
329
+ }
330
+
331
+ a {
332
+ color: var(--accent);
333
+ }
334
+
335
+ a:hover {
336
+ color: var(--accent-secondary);
337
+ }
338
+
339
+ @media (max-width: 900px) {
340
+ .menu-toggle {
341
+ display: inline-flex;
342
+ }
343
+
344
+ aside {
345
+ transform: translateX(-100%);
346
+ transition: transform 180ms ease;
347
+ box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
348
+ border-radius: 0 12px 12px 0;
349
+ }
350
+
351
+ body.menu-open aside {
352
+ transform: translateX(0);
353
+ }
354
+
355
+ body.menu-open .menu-toggle span:nth-child(1) {
356
+ transform: translateY(6px) rotate(45deg);
357
+ }
358
+
359
+ body.menu-open .menu-toggle span:nth-child(2) {
360
+ opacity: 0;
361
+ }
362
+
363
+ body.menu-open .menu-toggle span:nth-child(3) {
364
+ transform: translateY(-6px) rotate(-45deg);
365
+ }
366
+
367
+ .tabs {
368
+ flex-direction: column;
369
+ }
370
+
371
+ main {
372
+ margin: 4.8rem 0 0;
373
+ min-height: calc(100vh - 4.8rem);
374
+ }
375
+ }
376
+ </style>
377
+ </head>
378
+ <body>
379
+ <div class="shell">
380
+ <button
381
+ class="menu-toggle"
382
+ id="menu-toggle"
383
+ type="button"
384
+ aria-label="Toggle menu"
385
+ aria-expanded="false"
386
+ aria-controls="site-sidebar"
387
+ >
388
+ <span></span>
389
+ <span></span>
390
+ <span></span>
391
+ </button>
392
+ <aside id="site-sidebar" aria-label="Sidebar navigation">
393
+ <p class="tabs-title">Navigation</p>
394
+ {
395
+ tabs.length > 0 && (
396
+ <ul class="tabs">
397
+ {tabs.map((tab, index) => (
398
+ <li>
399
+ {tab.children && tab.children.length > 0 ? (
400
+ <button
401
+ class="tab-toggle"
402
+ type="button"
403
+ aria-expanded={index === 0 ? "true" : "false"}
404
+ >
405
+ <span>{tab.label}</span>
406
+ <span class="chevron">›</span>
407
+ </button>
408
+ ) : (
409
+ <a href={tab.href || "#"}>{tab.label}</a>
410
+ )}
411
+ {tab.children && tab.children.length > 0 && (
412
+ <ul class="subtabs" hidden={index !== 0}>
413
+ {tab.children.map((child) => (
414
+ <li>
415
+ <a href={child.href || "#"}>{child.label}</a>
416
+ </li>
417
+ ))}
418
+ </ul>
419
+ )}
420
+ </li>
421
+ ))}
422
+ </ul>
423
+ )
424
+ }
425
+ <slot name="sidebar" />
426
+ </aside>
427
+ <main>
428
+ <slot />
429
+ </main>
430
+ </div>
431
+ <script>
432
+ const button = document.getElementById("menu-toggle");
433
+ button?.addEventListener("click", () => {
434
+ const open = document.body.classList.toggle("menu-open");
435
+ button.setAttribute("aria-expanded", open ? "true" : "false");
436
+ });
437
+
438
+ const setPanelState = (toggle, panel, expanded) => {
439
+ toggle.setAttribute("aria-expanded", expanded ? "true" : "false");
440
+ panel.hidden = !expanded;
441
+ panel.querySelectorAll("a").forEach((link) => {
442
+ link.tabIndex = expanded ? 0 : -1;
443
+ });
444
+ };
445
+
446
+ document.querySelectorAll(".tab-toggle").forEach((toggle) => {
447
+ const panel = toggle.nextElementSibling;
448
+ if (!(panel instanceof HTMLElement)) return;
449
+ const initiallyExpanded =
450
+ toggle.getAttribute("aria-expanded") === "true";
451
+ setPanelState(toggle, panel, initiallyExpanded);
452
+
453
+ toggle.addEventListener("click", () => {
454
+ const expanded = toggle.getAttribute("aria-expanded") === "true";
455
+ setPanelState(toggle, panel, !expanded);
456
+ });
457
+ });
458
+
459
+ const navLinks = Array.from(document.querySelectorAll("aside a"));
460
+ const normalizePath = (value) => {
461
+ if (!value) return "/";
462
+ const trimmed = value.replace(/\/+$/, "");
463
+ return trimmed === "" ? "/" : trimmed;
464
+ };
465
+
466
+ const applyActiveLink = () => {
467
+ const currentPath = normalizePath(window.location.pathname);
468
+ const currentHash = window.location.hash;
469
+
470
+ navLinks.forEach((link) => {
471
+ const href = link.getAttribute("href") || "";
472
+ let isActive = false;
473
+
474
+ if (href.startsWith("#")) {
475
+ const hash = currentHash || "#chorama";
476
+ isActive = currentPath === "/" && href === hash;
477
+ } else {
478
+ isActive = normalizePath(href) === currentPath;
479
+ }
480
+
481
+ link.classList.toggle("is-active", isActive);
482
+ });
483
+
484
+ document.querySelectorAll(".tab-toggle").forEach((toggle) => {
485
+ const panel = toggle.nextElementSibling;
486
+ if (!(panel instanceof HTMLElement)) return;
487
+ const hasActiveChild = panel.querySelector("a.is-active") !== null;
488
+ if (hasActiveChild) {
489
+ setPanelState(toggle, panel, true);
490
+ toggle.classList.add("is-active");
491
+ } else {
492
+ toggle.classList.remove("is-active");
493
+ }
494
+ });
495
+ };
496
+
497
+ applyActiveLink();
498
+ window.addEventListener("hashchange", applyActiveLink);
499
+ </script>
500
+ </body>
501
+ </html>
package/website/layouts/Example.astro ADDED
@@ -0,0 +1,91 @@
1
+ ---
2
+ import { withBase } from "../utils/url";
3
+ import packageJson from "../../package.json";
4
+ import path from "node:path";
5
+
6
+ interface Props {
7
+ source: string;
8
+ title?: string;
9
+ }
10
+
11
+ const { source, title = "Example" } = Astro.props;
12
+ const isProd = import.meta.env.PROD;
13
+
14
+ const datGuiVersion = packageJson.dependencies["dat.gui"].replace(/^[^\d]*/, "");
15
+ const statsVersion = packageJson.dependencies["stats.js"].replace(/^[^\d]*/, "");
16
+ const marangiVersion = packageJson.dependencies["marangi"].replace(/^[^\d]*/, "");
17
+ const hisabatiVersion = packageJson.dependencies["hisabati"].replace(/^[^\d]*/, "");
18
+ const datGuiUrl = isProd
19
+ ? `https://cdn.jsdelivr.net/nisabatipm/dat.gui@${datGuiVersion}/build/dat.gui.module.js`
20
+ : "/node_modules/dat.gui/build/dat.gui.module.js";
21
+ const statsUrl = isProd
22
+ ? `https://cdn.jsdelivr.net/npm/stats.js@${statsVersion}/src/Stats.js`
23
+ : "/node_modules/stats.js/src/Stats.js";
24
+ const marangiUrl = isProd
25
+ ? `https://cdn.jsdelivr.net/npm/marangi@${marangiVersion}/build/index.module.js`
26
+ : "/node_modules/marangi/build/index.module.js";
27
+ const hisabatiUrl = isProd
28
+ ? `https://cdn.jsdelivr.net/npm/hisabati@${hisabatiVersion}/build/index.module.js`
29
+ : "/node_modules/hisabati/build/index.module.js";
30
+ const addonsEntry = path
31
+ .resolve("./examples/addons/rendergraph_gui.js")
32
+ .split(path.sep)
33
+ .join("/");
34
+ const renderGraphAddonUrl = isProd
35
+ ? withBase("/examples/addons/rendergraph_gui.js")
36
+ : `/@fs/${addonsEntry}`;
37
+
38
+ const importMap = JSON.stringify({
39
+ imports: {
40
+ "chorama": isProd ? withBase("/vendor/chorama/index.module.js") : "/src/index.js",
41
+ "marangi":marangiUrl,
42
+ "hisabati":hisabatiUrl,
43
+ "dat.gui": datGuiUrl,
44
+ "stats.js": statsUrl,
45
+ "@examples/rendergraph_gui": renderGraphAddonUrl,
46
+ },
47
+ });
48
+
49
+ const rewriteAssetLiterals = (script: string): string =>
50
+ script.replace(/(["'`])\/?assets\/([^"'`]+)\1/g, (_, _quote: string, rest: string) => {
51
+ return '`' + withBase(`/${rest}`) + '`';
52
+ });
53
+ const runnerScript = isProd? rewriteAssetLiterals(source) : source
54
+
55
+ ---
56
+
57
+ <!doctype html>
58
+ <html lang="en">
59
+ <head>
60
+ <meta charset="UTF-8" />
61
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
62
+ <title>{title}</title>
63
+ <style is:global>
64
+ html,
65
+ body {
66
+ margin: 0;
67
+ width: 100%;
68
+ height: 100%;
69
+ background: #ffffff;
70
+ overflow: hidden;
71
+ }
72
+
73
+ canvas {
74
+ background-color: black;
75
+ touch-action: none;
76
+ }
77
+ .performance-monitor {
78
+ position: fixed;
79
+ top: 0%;
80
+ right: 0%;
81
+ cursor: pointer;
82
+ opacity: 0.9;
83
+ z-index: 10000;
84
+ }
85
+ </style>
86
+ <script type="importmap" set:html={importMap} />
87
+ </head>
88
+ <body>
89
+ <script type="module" set:html={runnerScript} />
90
+ </body>
91
+ </html>
package/website/pages/examples/[...slug].astro ADDED
@@ -0,0 +1,77 @@
1
+ ---
2
+ import { getCollection } from "astro:content";
3
+ import { Code } from "astro:components";
4
+ import DocLayout from "@layouts/DocLayout.astro";
5
+ import { sidebarTabs } from "@configs/navigation";
6
+ import { withBase } from "../../utils/url";
7
+
8
+ export async function getStaticPaths() {
9
+ const entries = await getCollection("examples");
10
+
11
+ return entries.map((entry) => ({
12
+ params: { slug: entry.id },
13
+ props: { entry }
14
+ }));
15
+ }
16
+
17
+ const { entry } = Astro.props;
18
+ const title = entry.data.title;
19
+ const sampleUrl = withBase(`/examples/samples/${entry.id}`);
20
+ ---
21
+
22
+ <DocLayout title={`${title} | Chorama`} tabs={sidebarTabs}>
23
+ <div class="example-frame">
24
+ <a href={withBase("/examples")}>← Back to examples</a>
25
+ <h1 style="text-align:center">{title}</h1>
26
+ <a class="example-link" href={sampleUrl} target="_blank" rel="noreferrer">
27
+ Open as a stand-alone example
28
+ </a>
29
+ <iframe
30
+ title={`${title} preview`}
31
+ src={sampleUrl}
32
+ style="display:block;width:min(100%,1000px);height:560px;background:#fff;border:1px solid #d1d5db;border-radius:8px;margin:0 0 1.25rem;"
33
+ />
34
+ </div>
35
+ <p>Source file: {entry.data.filePath}</p>
36
+ <div class="source-code">
37
+ <Code code={entry.data.source} lang="js" />
38
+ </div>
39
+ </DocLayout>
40
+
41
+ <style>
42
+ .example-frame {
43
+ position: relative;
44
+ width: min(100%, 1000px);
45
+ margin-bottom: 1.25rem;
46
+ }
47
+
48
+ .example-link {
49
+ position: absolute;
50
+ top: 7rem;
51
+ left: 50%;
52
+ transform: translateX(-50%);
53
+ z-index: 1;
54
+ color: #22d3ee;
55
+ text-decoration: underline;
56
+ font-weight: 600;
57
+ background: rgba(0, 0, 0, 0.35);
58
+ padding: 0.2rem 0.5rem;
59
+ border-radius: 6px;
60
+ }
61
+
62
+ .example-link:hover {
63
+ color: #67e8f9;
64
+ }
65
+
66
+ .source-code {
67
+ outline: 1px solid #3f4754;
68
+ outline-offset: 0;
69
+ border-radius: 8px;
70
+ overflow: hidden;
71
+ }
72
+
73
+ .source-code pre {
74
+ margin: 0px;
75
+ padding: 10px;
76
+ }
77
+ </style>