three-gpu-pathtracer 0.0.1 → 0.0.4

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 (36) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +678 -386
  3. package/build/index.module.js +3166 -1690
  4. package/build/index.module.js.map +1 -1
  5. package/build/index.umd.cjs +3176 -1692
  6. package/build/index.umd.cjs.map +1 -1
  7. package/package.json +60 -57
  8. package/src/core/DynamicPathTracingSceneGenerator.js +106 -0
  9. package/src/core/MaterialReducer.js +256 -256
  10. package/src/core/PathTracingRenderer.js +125 -28
  11. package/src/core/PathTracingSceneGenerator.js +52 -46
  12. package/src/core/PhysicalCamera.js +28 -0
  13. package/src/index.js +25 -21
  14. package/src/materials/AlphaDisplayMaterial.js +48 -0
  15. package/src/materials/AmbientOcclusionMaterial.js +197 -197
  16. package/src/materials/BlendMaterial.js +67 -0
  17. package/src/materials/LambertPathTracingMaterial.js +285 -285
  18. package/src/materials/MaterialBase.js +56 -56
  19. package/src/materials/PhysicalPathTracingMaterial.js +684 -370
  20. package/src/shader/shaderEnvMapSampling.js +67 -0
  21. package/src/shader/shaderGGXFunctions.js +108 -107
  22. package/src/shader/shaderMaterialSampling.js +345 -333
  23. package/src/shader/shaderStructs.js +131 -30
  24. package/src/shader/shaderUtils.js +246 -140
  25. package/src/uniforms/EquirectHdrInfoUniform.js +263 -0
  26. package/src/uniforms/MaterialsTexture.js +251 -0
  27. package/src/uniforms/PhysicalCameraUniform.js +36 -0
  28. package/src/uniforms/RenderTarget2DArray.js +93 -80
  29. package/src/utils/BlurredEnvMapGenerator.js +113 -0
  30. package/src/utils/GeometryPreparationUtils.js +194 -172
  31. package/src/utils/UVUnwrapper.js +101 -101
  32. package/src/workers/PathTracingSceneWorker.js +40 -0
  33. package/src/uniforms/EquirectPdfUniform.js +0 -132
  34. package/src/uniforms/MaterialStructArrayUniform.js +0 -18
  35. package/src/uniforms/MaterialStructUniform.js +0 -94
  36. package/src/viewers/PathTracingViewer.js +0 -259
@@ -0,0 +1,263 @@
1
+ import { DataTexture, FloatType, RedFormat, LinearFilter, DataUtils, HalfFloatType, Source, RepeatWrapping } from 'three';
2
+
3
+ function binarySearchFindClosestIndexOf( array, targetValue, offset = 0, count = array.length ) {
4
+
5
+ let lower = 0;
6
+ let upper = count;
7
+ while ( lower < upper ) {
8
+
9
+ const mid = ~ ~ ( 0.5 * upper + 0.5 * lower );
10
+
11
+
12
+ // check if the middle array value is above or below the target and shift
13
+ // which half of the array we're looking at
14
+ if ( array[ offset + mid ] < targetValue ) {
15
+
16
+ lower = mid + 1;
17
+
18
+ } else {
19
+
20
+ upper = mid;
21
+
22
+ }
23
+
24
+ }
25
+
26
+ return lower;
27
+
28
+ }
29
+
30
+ function colorToLuminance( r, g, b ) {
31
+
32
+ // https://en.wikipedia.org/wiki/Relative_luminance
33
+ return 0.2126 * r + 0.7152 * g + 0.0722 * b;
34
+
35
+ }
36
+
37
+ // ensures the data is all floating point values and flipY is false
38
+ function preprocessEnvMap( envMap ) {
39
+
40
+ const map = envMap.clone();
41
+ map.source = new Source( { ...map.image } );
42
+ const { width, height, data } = map.image;
43
+
44
+ // TODO: is there a simple way to avoid cloning and adjusting the env map data here?
45
+ // convert the data from half float uint 16 arrays to float arrays for cdf computation
46
+ let newData = data;
47
+ if ( map.type === HalfFloatType ) {
48
+
49
+ newData = new Float32Array( data.length );
50
+ for ( const i in data ) {
51
+
52
+ newData[ i ] = DataUtils.fromHalfFloat( data[ i ] );
53
+
54
+ }
55
+
56
+ map.image.data = newData;
57
+ map.type = FloatType;
58
+
59
+ }
60
+
61
+ // remove any y flipping for cdf computation
62
+ if ( map.flipY ) {
63
+
64
+ const ogData = newData;
65
+ newData = newData.slice();
66
+ for ( let y = 0; y < height; y ++ ) {
67
+
68
+ for ( let x = 0; x < width; x ++ ) {
69
+
70
+ const newY = height - y - 1;
71
+ const ogIndex = 4 * ( y * width + x );
72
+ const newIndex = 4 * ( newY * width + x );
73
+
74
+ newData[ newIndex + 0 ] = ogData[ ogIndex + 0 ];
75
+ newData[ newIndex + 1 ] = ogData[ ogIndex + 1 ];
76
+ newData[ newIndex + 2 ] = ogData[ ogIndex + 2 ];
77
+ newData[ newIndex + 3 ] = ogData[ ogIndex + 3 ];
78
+
79
+ }
80
+
81
+ }
82
+
83
+ map.flipY = false;
84
+ map.image.data = newData;
85
+
86
+ }
87
+
88
+ return map;
89
+
90
+ }
91
+
92
+ export class EquirectHdrInfoUniform {
93
+
94
+ constructor() {
95
+
96
+ // Stores a map of [0, 1] value -> cumulative importance row & pdf
97
+ // used to sampling a random value to a relevant row to sample from
98
+ const marginalWeights = new DataTexture();
99
+ marginalWeights.type = FloatType;
100
+ marginalWeights.format = RedFormat;
101
+ marginalWeights.minFilter = LinearFilter;
102
+ marginalWeights.magFilter = LinearFilter;
103
+ marginalWeights.generateMipmaps = false;
104
+
105
+ // Stores a map of [0, 1] value -> cumulative importance column & pdf
106
+ // used to sampling a random value to a relevant pixel to sample from
107
+ const conditionalWeights = new DataTexture();
108
+ conditionalWeights.type = FloatType;
109
+ conditionalWeights.format = RedFormat;
110
+ conditionalWeights.minFilter = LinearFilter;
111
+ conditionalWeights.magFilter = LinearFilter;
112
+ conditionalWeights.generateMipmaps = false;
113
+
114
+ // store the total sum in a 1x1 tex since some android mobile devices have issues
115
+ // storing large values in structs.
116
+ const totalSumTex = new DataTexture();
117
+ totalSumTex.type = FloatType;
118
+ totalSumTex.format = RedFormat;
119
+ totalSumTex.minFilter = LinearFilter;
120
+ totalSumTex.magFilter = LinearFilter;
121
+ totalSumTex.generateMipmaps = false;
122
+
123
+ this.marginalWeights = marginalWeights;
124
+ this.conditionalWeights = conditionalWeights;
125
+ this.totalSum = totalSumTex;
126
+ this.map = null;
127
+
128
+ }
129
+
130
+ dispose() {
131
+
132
+ this.marginalWeights.dispose();
133
+ this.conditionalWeights.dispose();
134
+ this.totalSum.dispose();
135
+ if ( this.map ) this.map.dispose();
136
+
137
+ }
138
+
139
+ updateFrom( hdr ) {
140
+
141
+ // https://github.com/knightcrawler25/GLSL-PathTracer/blob/3c6fd9b6b3da47cd50c527eeb45845eef06c55c3/src/loaders/hdrloader.cpp
142
+ // https://pbr-book.org/3ed-2018/Light_Transport_I_Surface_Reflection/Sampling_Light_Sources#InfiniteAreaLights
143
+ const map = preprocessEnvMap( hdr );
144
+ map.wrapS = RepeatWrapping;
145
+ map.wrapT = RepeatWrapping;
146
+
147
+ const { width, height, data } = map.image;
148
+
149
+ // "conditional" = "pixel relative to row pixels sum"
150
+ // "marginal" = "row relative to row sum"
151
+
152
+ // track the importance of any given pixel in the image by tracking its weight relative to other pixels in the image
153
+ const pdfConditional = new Float32Array( width * height );
154
+ const cdfConditional = new Float32Array( width * height );
155
+
156
+ const pdfMarginal = new Float32Array( height );
157
+ const cdfMarginal = new Float32Array( height );
158
+
159
+ let totalSumValue = 0.0;
160
+ let cumulativeWeightMarginal = 0.0;
161
+ for ( let y = 0; y < height; y ++ ) {
162
+
163
+ let cumulativeRowWeight = 0.0;
164
+ for ( let x = 0; x < width; x ++ ) {
165
+
166
+ const i = y * width + x;
167
+ const r = data[ 4 * i + 0 ];
168
+ const g = data[ 4 * i + 1 ];
169
+ const b = data[ 4 * i + 2 ];
170
+
171
+ // the probability of the pixel being selected in this row is the
172
+ // scale of the luminance relative to the rest of the pixels.
173
+ // TODO: this should also account for the solid angle of the pixel when sampling
174
+ const weight = colorToLuminance( r, g, b );
175
+ cumulativeRowWeight += weight;
176
+ totalSumValue += weight;
177
+
178
+ pdfConditional[ i ] = weight;
179
+ cdfConditional[ i ] = cumulativeRowWeight;
180
+
181
+ }
182
+
183
+ // can happen if the row is all black
184
+ if ( cumulativeRowWeight !== 0 ) {
185
+
186
+ // scale the pdf and cdf to [0.0, 1.0]
187
+ for ( let i = y * width, l = y * width + width; i < l; i ++ ) {
188
+
189
+ pdfConditional[ i ] /= cumulativeRowWeight;
190
+ cdfConditional[ i ] /= cumulativeRowWeight;
191
+
192
+ }
193
+
194
+ }
195
+
196
+ cumulativeWeightMarginal += cumulativeRowWeight;
197
+
198
+ // compute the marginal pdf and cdf along the height of the map.
199
+ pdfMarginal[ y ] = cumulativeRowWeight;
200
+ cdfMarginal[ y ] = cumulativeWeightMarginal;
201
+
202
+ }
203
+
204
+ // can happen if the texture is all black
205
+ if ( cumulativeWeightMarginal !== 0 ) {
206
+
207
+ // scale the marginal pdf and cdf to [0.0, 1.0]
208
+ for ( let i = 0, l = pdfMarginal.length; i < l; i ++ ) {
209
+
210
+ pdfMarginal[ i ] /= cumulativeWeightMarginal;
211
+ cdfMarginal[ i ] /= cumulativeWeightMarginal;
212
+
213
+ }
214
+
215
+ }
216
+
217
+ // compute a sorted index of distributions and the probabilities along them for both
218
+ // the marginal and conditional data. These will be used to sample with a random number
219
+ // to retrieve a uv value to sample in the environment map.
220
+ // These values continually increase so it's okay to interpolate between them.
221
+ const marginalDataArray = new Float32Array( height );
222
+ const conditionalDataArray = new Float32Array( width * height );
223
+
224
+ for ( let i = 0; i < height; i ++ ) {
225
+
226
+ const dist = ( i + 1 ) / height;
227
+ const row = binarySearchFindClosestIndexOf( cdfMarginal, dist );
228
+
229
+ marginalDataArray[ i ] = row / height;
230
+
231
+ }
232
+
233
+ for ( let y = 0; y < height; y ++ ) {
234
+
235
+ for ( let x = 0; x < width; x ++ ) {
236
+
237
+ const i = y * width + x;
238
+ const dist = ( x + 1 ) / width;
239
+ const col = binarySearchFindClosestIndexOf( cdfConditional, dist, y * width, width );
240
+
241
+ conditionalDataArray[ i ] = col / width;
242
+
243
+ }
244
+
245
+ }
246
+
247
+ this.dispose();
248
+
249
+ const { marginalWeights, conditionalWeights, totalSum } = this;
250
+ marginalWeights.image = { width: height, height: 1, data: marginalDataArray };
251
+ marginalWeights.needsUpdate = true;
252
+
253
+ conditionalWeights.image = { width, height, data: conditionalDataArray };
254
+ conditionalWeights.needsUpdate = true;
255
+
256
+ totalSum.image = { width: 1, height: 1, data: new Float32Array( [ totalSumValue ] ) };
257
+ totalSum.needsUpdate = true;
258
+
259
+ this.map = map;
260
+
261
+ }
262
+
263
+ }
@@ -0,0 +1,251 @@
1
+ import { DataTexture, RGBAFormat, ClampToEdgeWrapping, FloatType, FrontSide, BackSide, DoubleSide } from 'three';
2
+
3
+ const MATERIAL_PIXELS = 19;
4
+ const MATERIAL_STRIDE = MATERIAL_PIXELS * 4;
5
+
6
+ export class MaterialsTexture extends DataTexture {
7
+
8
+ constructor() {
9
+
10
+ super( new Float32Array( 4 ), 1, 1 );
11
+
12
+ this.format = RGBAFormat;
13
+ this.type = FloatType;
14
+ this.wrapS = ClampToEdgeWrapping;
15
+ this.wrapT = ClampToEdgeWrapping;
16
+ this.generateMipmaps = false;
17
+
18
+ }
19
+
20
+ setCastShadow( materialIndex, cast ) {
21
+
22
+ // invert the shadow value so we default to "true" when initializing a material
23
+ const array = this.image.data;
24
+ const index = materialIndex * MATERIAL_STRIDE + 6 * 4 + 0;
25
+ array[ index ] = ! cast ? 1 : 0;
26
+
27
+ }
28
+
29
+ getCastShadow( materialIndex ) {
30
+
31
+ const array = this.image.data;
32
+ const index = materialIndex * MATERIAL_STRIDE + 6 * 4 + 0;
33
+ return ! Boolean( array[ index ] );
34
+
35
+ }
36
+
37
+ setSide( materialIndex, side ) {
38
+
39
+ const array = this.image.data;
40
+ const index = materialIndex * MATERIAL_STRIDE + 5 * 4 + 2;
41
+ switch ( side ) {
42
+
43
+ case FrontSide:
44
+ array[ index ] = 1;
45
+ break;
46
+ case BackSide:
47
+ array[ index ] = - 1;
48
+ break;
49
+ case DoubleSide:
50
+ array[ index ] = 0;
51
+ break;
52
+
53
+ }
54
+
55
+ }
56
+
57
+ getSide( materialIndex ) {
58
+
59
+ const array = this.image.data;
60
+ const index = materialIndex * MATERIAL_STRIDE + 5 * 4 + 2;
61
+ switch ( array[ index ] ) {
62
+
63
+ case 0:
64
+ return DoubleSide;
65
+ case 1:
66
+ return FrontSide;
67
+ case - 1:
68
+ return BackSide;
69
+
70
+ }
71
+
72
+ return 0;
73
+
74
+ }
75
+
76
+ setMatte( materialIndex, matte ) {
77
+
78
+ const array = this.image.data;
79
+ const index = materialIndex * MATERIAL_STRIDE + 5 * 4 + 3;
80
+ array[ index ] = matte ? 1 : 0;
81
+
82
+ }
83
+
84
+ getMatte( materialIndex ) {
85
+
86
+ const array = this.image.data;
87
+ const index = materialIndex * MATERIAL_STRIDE + 5 * 4 + 3;
88
+ return Boolean( array[ index ] );
89
+
90
+ }
91
+
92
+ updateFrom( materials, textures ) {
93
+
94
+ function getTexture( material, key, def = - 1 ) {
95
+
96
+ return key in material ? textures.indexOf( material[ key ] ) : def;
97
+
98
+ }
99
+
100
+ function getField( material, key, def ) {
101
+
102
+ return key in material ? material[ key ] : def;
103
+
104
+ }
105
+
106
+ /**
107
+ *
108
+ * @param {Object} material
109
+ * @param {string} textureKey
110
+ * @param {Float32Array} array
111
+ * @param {number} offset
112
+ * @returns {8} number of floats occupied by texture transform matrix
113
+ */
114
+ function writeTextureMatrixToArray( material, textureKey, array, offset ) {
115
+
116
+ // check if texture exists
117
+ if ( material[ textureKey ] && material[ textureKey ].isTexture ) {
118
+
119
+ const elements = material[ textureKey ].matrix.elements;
120
+
121
+ let i = 0;
122
+
123
+ // first row
124
+ array[ offset + i ++ ] = elements[ 0 ];
125
+ array[ offset + i ++ ] = elements[ 3 ];
126
+ array[ offset + i ++ ] = elements[ 6 ];
127
+ i ++;
128
+
129
+ // second row
130
+ array[ offset + i ++ ] = elements[ 1 ];
131
+ array[ offset + i ++ ] = elements[ 4 ];
132
+ array[ offset + i ++ ] = elements[ 7 ];
133
+ i ++;
134
+
135
+ }
136
+
137
+ return 8;
138
+
139
+ }
140
+
141
+ let index = 0;
142
+ const pixelCount = materials.length * MATERIAL_PIXELS;
143
+ const dimension = Math.ceil( Math.sqrt( pixelCount ) );
144
+
145
+ if ( this.image.width !== dimension ) {
146
+
147
+ this.dispose();
148
+
149
+ this.image.data = new Float32Array( dimension * dimension * 4 );
150
+ this.image.width = dimension;
151
+ this.image.height = dimension;
152
+
153
+ }
154
+
155
+ const floatArray = this.image.data;
156
+
157
+ // on some devices (Google Pixel 6) the "floatBitsToInt" function does not work correctly so we
158
+ // can't encode texture ids that way.
159
+ // const intArray = new Int32Array( floatArray.buffer );
160
+
161
+ for ( let i = 0, l = materials.length; i < l; i ++ ) {
162
+
163
+ const m = materials[ i ];
164
+
165
+ // color
166
+ floatArray[ index ++ ] = m.color.r;
167
+ floatArray[ index ++ ] = m.color.g;
168
+ floatArray[ index ++ ] = m.color.b;
169
+ floatArray[ index ++ ] = getTexture( m, 'map' );
170
+
171
+ // metalness & roughness
172
+ floatArray[ index ++ ] = getField( m, 'metalness', 0.0 );
173
+ floatArray[ index ++ ] = textures.indexOf( m.metalnessMap );
174
+ floatArray[ index ++ ] = getField( m, 'roughness', 0.0 );
175
+ floatArray[ index ++ ] = textures.indexOf( m.roughnessMap );
176
+
177
+ // transmission & emissiveIntensity
178
+ floatArray[ index ++ ] = getField( m, 'ior', 1.0 );
179
+ floatArray[ index ++ ] = getField( m, 'transmission', 0.0 );
180
+ floatArray[ index ++ ] = getTexture( m, 'transmissionMap' );
181
+ floatArray[ index ++ ] = getField( m, 'emissiveIntensity', 0.0 );
182
+
183
+ // emission
184
+ if ( 'emissive' in m ) {
185
+
186
+ floatArray[ index ++ ] = m.emissive.r;
187
+ floatArray[ index ++ ] = m.emissive.g;
188
+ floatArray[ index ++ ] = m.emissive.b;
189
+
190
+ } else {
191
+
192
+ floatArray[ index ++ ] = 0.0;
193
+ floatArray[ index ++ ] = 0.0;
194
+ floatArray[ index ++ ] = 0.0;
195
+
196
+ }
197
+
198
+ floatArray[ index ++ ] = getTexture( m, 'emissiveMap' );
199
+
200
+ // normals
201
+ floatArray[ index ++ ] = getTexture( m, 'normalMap' );
202
+ if ( 'normalScale' in m ) {
203
+
204
+ floatArray[ index ++ ] = m.normalScale.x;
205
+ floatArray[ index ++ ] = m.normalScale.y;
206
+
207
+ } else {
208
+
209
+ floatArray[ index ++ ] = 1;
210
+ floatArray[ index ++ ] = 1;
211
+
212
+ }
213
+
214
+ floatArray[ index ++ ] = getTexture( m, 'alphaMap' );
215
+
216
+ // side & matte
217
+ floatArray[ index ++ ] = m.opacity;
218
+ floatArray[ index ++ ] = m.alphaTest;
219
+ index ++; // side
220
+ index ++; // matte
221
+
222
+ index ++; // shadow
223
+ index ++;
224
+ index ++;
225
+ index ++;
226
+
227
+ // map transform
228
+ index += writeTextureMatrixToArray( m, 'map', floatArray, index );
229
+
230
+ // metalnessMap transform
231
+ index += writeTextureMatrixToArray( m, 'metalnessMap', floatArray, index );
232
+
233
+ // roughnessMap transform
234
+ index += writeTextureMatrixToArray( m, 'roughnessMap', floatArray, index );
235
+
236
+ // transmissionMap transform
237
+ index += writeTextureMatrixToArray( m, 'transmissionMap', floatArray, index );
238
+
239
+ // emissiveMap transform
240
+ index += writeTextureMatrixToArray( m, 'emissiveMap', floatArray, index );
241
+
242
+ // normalMap transform
243
+ index += writeTextureMatrixToArray( m, 'normalMap', floatArray, index );
244
+
245
+ }
246
+
247
+ this.needsUpdate = true;
248
+
249
+ }
250
+
251
+ }
@@ -0,0 +1,36 @@
1
+ import { PhysicalCamera } from '../core/PhysicalCamera.js';
2
+ export class PhysicalCameraUniform {
3
+
4
+ constructor() {
5
+
6
+ this.bokehSize = 0;
7
+ this.apertureBlades = 0;
8
+ this.apertureRotation = 0;
9
+ this.focusDistance = 10;
10
+ this.anamorphicRatio = 1;
11
+
12
+ }
13
+
14
+ updateFrom( camera ) {
15
+
16
+ if ( camera instanceof PhysicalCamera ) {
17
+
18
+ this.bokehSize = camera.bokehSize;
19
+ this.apertureBlades = camera.apertureBlades;
20
+ this.apertureRotation = camera.apertureRotation;
21
+ this.focusDistance = camera.focusDistance;
22
+ this.anamorphicRatio = camera.anamorphicRatio;
23
+
24
+ } else {
25
+
26
+ this.bokehSize = 0;
27
+ this.apertureRotation = 0;
28
+ this.apertureBlades = 0;
29
+ this.focusDistance = 10;
30
+ this.anamorphicRatio = 1;
31
+
32
+ }
33
+
34
+ }
35
+
36
+ }