@mapcomponents/three 1.7.2

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 (40) hide show
  1. package/.babelrc +12 -0
  2. package/.storybook/main.ts +20 -0
  3. package/.storybook/preview.ts +0 -0
  4. package/README.md +54 -0
  5. package/cypress.config.ts +13 -0
  6. package/eslint.config.mjs +12 -0
  7. package/package.json +24 -0
  8. package/project.json +15 -0
  9. package/public/assets/3D/godzilla_simple.glb +0 -0
  10. package/public/assets/splats/output.splat +0 -0
  11. package/src/components/MlThreeModelLayer/MlThreeModelLayer.cy.tsx +63 -0
  12. package/src/components/MlThreeModelLayer/MlThreeModelLayer.meta.json +21 -0
  13. package/src/components/MlThreeModelLayer/MlThreeModelLayer.stories.tsx +161 -0
  14. package/src/components/MlThreeModelLayer/MlThreeModelLayer.tsx +153 -0
  15. package/src/components/MlThreeSplatLayer/MlThreeSplatLayer.cy.tsx +62 -0
  16. package/src/components/MlThreeSplatLayer/MlThreeSplatLayer.meta.json +21 -0
  17. package/src/components/MlThreeSplatLayer/MlThreeSplatLayer.stories.tsx +151 -0
  18. package/src/components/MlThreeSplatLayer/MlThreeSplatLayer.tsx +158 -0
  19. package/src/components/MlTransformControls.tsx +112 -0
  20. package/src/components/ThreeContext.tsx +26 -0
  21. package/src/components/ThreeObjectControls.tsx +197 -0
  22. package/src/components/ThreeProvider.tsx +149 -0
  23. package/src/cypress/support/commands.ts +1 -0
  24. package/src/cypress/support/component-index.html +13 -0
  25. package/src/cypress/support/component.ts +13 -0
  26. package/src/decorators/ThreejsContextDecorator.tsx +42 -0
  27. package/src/decorators/style.css +33 -0
  28. package/src/index.ts +7 -0
  29. package/src/lib/ThreejsSceneHelper.ts +250 -0
  30. package/src/lib/ThreejsSceneRenderer.ts +73 -0
  31. package/src/lib/ThreejsUtils.ts +62 -0
  32. package/src/lib/splats/GaussianSplattingMesh.ts +848 -0
  33. package/src/lib/splats/GaussianSplattingShaders.ts +266 -0
  34. package/src/lib/splats/loaders/PlySplatLoader.ts +537 -0
  35. package/src/lib/splats/loaders/SplatLoader.ts +52 -0
  36. package/src/lib/utils/coroutine.ts +121 -0
  37. package/tsconfig.json +21 -0
  38. package/tsconfig.lib.json +27 -0
  39. package/tsconfig.storybook.json +24 -0
  40. package/vite.config.ts +49 -0
@@ -0,0 +1,266 @@
1
+ /**
2
+ * This file is part of mapbox-3d-tiles.
3
+ * Copyright (c) 2024 Jianshun Yang
4
+ * Licensed under the MIT License.
5
+ * Source: https://github.com/yangjs6/mapbox-3d-tiles
6
+ */
7
+
8
+ const vertexShaderSource = /* glsl */ `
9
+ precision highp float;
10
+ #include <common>
11
+
12
+ attribute float splatIndex;
13
+
14
+ uniform vec2 invViewport;
15
+ uniform vec2 dataTextureSize;
16
+ uniform vec2 focal;
17
+ uniform sampler2D covariancesATexture;
18
+ uniform sampler2D covariancesBTexture;
19
+ uniform sampler2D centersTexture;
20
+ uniform sampler2D colorsTexture;
21
+
22
+ #if SH_DEGREE > 0
23
+ uniform highp usampler2D shTexture0;
24
+ #endif
25
+ #if SH_DEGREE > 1
26
+ uniform highp usampler2D shTexture1;
27
+ #endif
28
+ #if SH_DEGREE > 2
29
+ uniform highp usampler2D shTexture2;
30
+ #endif
31
+
32
+ varying vec4 vColor;
33
+ varying vec2 vPosition;
34
+
35
+ vec2 getDataUV(float index, vec2 textureSize) {
36
+ float y = floor(index / textureSize.x);
37
+ float x = index - y * textureSize.x;
38
+ return vec2((x + 0.5) / textureSize.x, (y + 0.5) / textureSize.y);
39
+ }
40
+
41
+ #if SH_DEGREE > 0
42
+ ivec2 getDataUVint(float index, vec2 textureSize) {
43
+ float y = floor(index / textureSize.x);
44
+ float x = index - y * textureSize.x;
45
+ return ivec2(uint(x + 0.5), uint(y + 0.5));
46
+ }
47
+ #endif
48
+
49
+ struct Splat {
50
+ vec4 center;
51
+ vec4 color;
52
+ vec4 covA;
53
+ vec4 covB;
54
+ #if SH_DEGREE > 0
55
+ uvec4 sh0;
56
+ #endif
57
+ #if SH_DEGREE > 1
58
+ uvec4 sh1;
59
+ #endif
60
+ #if SH_DEGREE > 2
61
+ uvec4 sh2;
62
+ #endif
63
+ };
64
+
65
+ Splat readSplat(float splatIndex) {
66
+ Splat splat;
67
+ vec2 splatUV = getDataUV(splatIndex, dataTextureSize);
68
+ splat.center = texture2D(centersTexture, splatUV);
69
+ splat.color = texture2D(colorsTexture, splatUV);
70
+ splat.covA = texture2D(covariancesATexture, splatUV) * splat.center.w;
71
+ splat.covB = texture2D(covariancesBTexture, splatUV) * splat.center.w;
72
+ #if SH_DEGREE > 0
73
+ ivec2 splatUVint = getDataUVint(splatIndex, dataTextureSize);
74
+ splat.sh0 = texelFetch(shTexture0, splatUVint, 0);
75
+ #endif
76
+ #if SH_DEGREE > 1
77
+ splat.sh1 = texelFetch(shTexture1, splatUVint, 0);
78
+ #endif
79
+ #if SH_DEGREE > 2
80
+ splat.sh2 = texelFetch(shTexture2, splatUVint, 0);
81
+ #endif
82
+ return splat;
83
+ }
84
+
85
+ vec3 computeColorFromSHDegree(vec3 dir, const vec3 sh[16]) {
86
+ const float SH_C0 = 0.28209479;
87
+ const float SH_C1 = 0.48860251;
88
+ float SH_C2[5];
89
+ SH_C2[0] = 1.092548430;
90
+ SH_C2[1] = -1.09254843;
91
+ SH_C2[2] = 0.315391565;
92
+ SH_C2[3] = -1.09254843;
93
+ SH_C2[4] = 0.546274215;
94
+
95
+ float SH_C3[7];
96
+ SH_C3[0] = -0.59004358;
97
+ SH_C3[1] = 2.890611442;
98
+ SH_C3[2] = -0.45704579;
99
+ SH_C3[3] = 0.373176332;
100
+ SH_C3[4] = -0.45704579;
101
+ SH_C3[5] = 1.445305721;
102
+ SH_C3[6] = -0.59004358;
103
+
104
+ vec3 result = sh[0];
105
+
106
+ #if SH_DEGREE > 0
107
+ float x = dir.x;
108
+ float y = dir.y;
109
+ float z = dir.z;
110
+ result += -SH_C1 * y * sh[1] + SH_C1 * z * sh[2] - SH_C1 * x * sh[3];
111
+
112
+ #if SH_DEGREE > 1
113
+ float xx = x * x, yy = y * y, zz = z * z;
114
+ float xy = x * y, yz = y * z, xz = x * z;
115
+ result +=
116
+ SH_C2[0] * xy * sh[4] +
117
+ SH_C2[1] * yz * sh[5] +
118
+ SH_C2[2] * (2.0f * zz - xx - yy) * sh[6] +
119
+ SH_C2[3] * xz * sh[7] +
120
+ SH_C2[4] * (xx - yy) * sh[8];
121
+
122
+ #if SH_DEGREE > 2
123
+ result +=
124
+ SH_C3[0] * y * (3.0f * xx - yy) * sh[9] +
125
+ SH_C3[1] * xy * z * sh[10] +
126
+ SH_C3[2] * y * (4.0f * zz - xx - yy) * sh[11] +
127
+ SH_C3[3] * z * (2.0f * zz - 3.0f * xx - 3.0f * yy) * sh[12] +
128
+ SH_C3[4] * x * (4.0f * zz - xx - yy) * sh[13] +
129
+ SH_C3[5] * z * (xx - yy) * sh[14] +
130
+ SH_C3[6] * x * (xx - 3.0f * yy) * sh[15];
131
+ #endif
132
+ #endif
133
+ #endif
134
+
135
+ return result;
136
+ }
137
+
138
+ vec4 decompose(uint value) {
139
+ vec4 components = vec4(
140
+ float((value) & 255u),
141
+ float((value >> uint(8)) & 255u),
142
+ float((value >> uint(16)) & 255u),
143
+ float((value >> uint(24)) & 255u)
144
+ );
145
+ return components * vec4(2./255.) - vec4(1.);
146
+ }
147
+
148
+ vec3 computeSH(Splat splat, vec3 color, vec3 dir) {
149
+ vec3 sh[16];
150
+ sh[0] = color;
151
+
152
+ #if SH_DEGREE > 0
153
+ vec4 sh00 = decompose(splat.sh0.x);
154
+ vec4 sh01 = decompose(splat.sh0.y);
155
+ vec4 sh02 = decompose(splat.sh0.z);
156
+ sh[1] = vec3(sh00.x, sh00.y, sh00.z);
157
+ sh[2] = vec3(sh00.w, sh01.x, sh01.y);
158
+ sh[3] = vec3(sh01.z, sh01.w, sh02.x);
159
+ #endif
160
+ #if SH_DEGREE > 1
161
+ vec4 sh03 = decompose(splat.sh0.w);
162
+ vec4 sh04 = decompose(splat.sh1.x);
163
+ vec4 sh05 = decompose(splat.sh1.y);
164
+ sh[4] = vec3(sh02.y, sh02.z, sh02.w);
165
+ sh[5] = vec3(sh03.x, sh03.y, sh03.z);
166
+ sh[6] = vec3(sh03.w, sh04.x, sh04.y);
167
+ sh[7] = vec3(sh04.z, sh04.w, sh05.x);
168
+ sh[8] = vec3(sh05.y, sh05.z, sh05.w);
169
+ #endif
170
+ #if SH_DEGREE > 2
171
+ vec4 sh06 = decompose(splat.sh1.z);
172
+ vec4 sh07 = decompose(splat.sh1.w);
173
+ vec4 sh08 = decompose(splat.sh2.x);
174
+ vec4 sh09 = decompose(splat.sh2.y);
175
+ vec4 sh10 = decompose(splat.sh2.z);
176
+ vec4 sh11 = decompose(splat.sh2.w);
177
+ sh[9] = vec3(sh06.x, sh06.y, sh06.z);
178
+ sh[10] = vec3(sh06.w, sh07.x, sh07.y);
179
+ sh[11] = vec3(sh07.z, sh07.w, sh08.x);
180
+ sh[12] = vec3(sh08.y, sh08.z, sh08.w);
181
+ sh[13] = vec3(sh09.x, sh09.y, sh09.z);
182
+ sh[14] = vec3(sh09.w, sh10.x, sh10.y);
183
+ sh[15] = vec3(sh10.z, sh10.w, sh11.x);
184
+ #endif
185
+
186
+ return computeColorFromSHDegree(dir, sh);
187
+ }
188
+
189
+ vec4 gaussianSplatting(vec2 meshPos, vec3 worldPos, vec2 scale, vec3 covA, vec3 covB, mat4 worldMatrix, mat4 viewMatrix, mat4 projectionMatrix) {
190
+ mat4 modelView = viewMatrix * worldMatrix;
191
+ vec4 camspace = viewMatrix * vec4(worldPos, 1.0);
192
+ vec4 pos2d = projectionMatrix * camspace;
193
+
194
+ float bounds = 1.2 * pos2d.w;
195
+ if (pos2d.z < -pos2d.w || pos2d.x < -bounds || pos2d.x > bounds || pos2d.y < -bounds || pos2d.y > bounds) {
196
+ return vec4(0.0, 0.0, 2.0, 1.0);
197
+ }
198
+
199
+ mat3 Vrk = mat3(
200
+ covA.x, covA.y, covA.z,
201
+ covA.y, covB.x, covB.y,
202
+ covA.z, covB.y, covB.z
203
+ );
204
+
205
+ mat3 J = mat3(
206
+ focal.x / camspace.z, 0., -(focal.x * camspace.x) / (camspace.z * camspace.z),
207
+ 0., focal.y / camspace.z, -(focal.y * camspace.y) / (camspace.z * camspace.z),
208
+ 0., 0., 0.
209
+ );
210
+
211
+ mat3 T = transpose(mat3(modelView)) * J;
212
+ mat3 cov2d = transpose(T) * Vrk * T;
213
+
214
+ float mid = (cov2d[0][0] + cov2d[1][1]) / 2.0;
215
+ float radius = length(vec2((cov2d[0][0] - cov2d[1][1]) / 2.0, cov2d[0][1]));
216
+ float lambda1 = mid + radius, lambda2 = mid - radius;
217
+
218
+ if (lambda2 < 0.0) {
219
+ return vec4(0.0, 0.0, 2.0, 1.0);
220
+ }
221
+
222
+ vec2 diagonalVector = normalize(vec2(cov2d[0][1], lambda1 - cov2d[0][0]));
223
+ vec2 majorAxis = min(sqrt(2.0 * lambda1), 1024.0) * diagonalVector;
224
+ vec2 minorAxis = min(sqrt(2.0 * lambda2), 1024.0) * vec2(diagonalVector.y, -diagonalVector.x);
225
+
226
+ vec2 vCenter = vec2(pos2d);
227
+ return vec4(
228
+ vCenter + ((meshPos.x * majorAxis + meshPos.y * minorAxis) * invViewport * pos2d.w) * scale,
229
+ pos2d.zw
230
+ );
231
+ }
232
+
233
+ void main() {
234
+ Splat splat = readSplat(splatIndex);
235
+ vec3 covA = splat.covA.xyz;
236
+ vec3 covB = vec3(splat.covA.w, splat.covB.xy);
237
+
238
+ vec4 worldPos = modelMatrix * vec4(splat.center.xyz, 1.0);
239
+
240
+ vColor = splat.color;
241
+ vPosition = position.xy;
242
+
243
+ gl_Position = gaussianSplatting(vPosition, worldPos.xyz, vec2(1.0, 1.0), covA, covB, modelMatrix, viewMatrix, projectionMatrix);
244
+ }
245
+ `;
246
+
247
+ const fragmentShaderSource = /* glsl */ `
248
+ precision highp float;
249
+ #include <common>
250
+
251
+ varying vec4 vColor;
252
+ varying vec2 vPosition;
253
+
254
+ vec4 gaussianColor(vec4 inColor) {
255
+ float A = -dot(vPosition, vPosition);
256
+ if (A < -4.0) discard;
257
+ float B = exp(A) * inColor.a;
258
+ return vec4(inColor.rgb, B);
259
+ }
260
+
261
+ void main() {
262
+ gl_FragColor = gaussianColor(vColor);
263
+ }
264
+ `;
265
+
266
+ export { vertexShaderSource, fragmentShaderSource };