Decode shader codes added to ShaderChunk; Added more geometry examples; Code optimizattions & improvements

examples/jsm/utils/GeometryCompressionUtils.js

@@ -58,6 +58,7 @@ var GeometryCompressionUtils = {
 		let result;
 		if (encodeMethod == "DEFAULT") {
 
+			// TODO: Add 1 byte to the result, making the encoded length to be 4 bytes. 
 			result = new Uint8Array(count * 3);
 
 			for (let idx = 0; idx < array.length; idx += 3) {
@@ -695,6 +696,7 @@ function PackedPhongMaterial(parameters) {
 
 	]);
 
+	// use some of the shader src from ShaderChunk. 
 	this.vertexShader = [
 		"#define PHONG",
 
@@ -717,91 +719,22 @@ function PackedPhongMaterial(parameters) {
 		ShaderChunk.logdepthbuf_pars_vertex,
 		ShaderChunk.clipping_planes_pars_vertex,
 
-		`#ifdef USE_PACKED_NORMAL
-			#if USE_PACKED_NORMAL == 0
-				vec3 decodeNormal(vec3 packedNormal)
-				{
-					float x = packedNormal.x * 2.0 - 1.0;
-					float y = packedNormal.y * 2.0 - 1.0;
-					vec2 scth = vec2(sin(x * PI), cos(x * PI));
-					vec2 scphi = vec2(sqrt(1.0 - y * y), y);
-					return normalize( vec3(scth.y * scphi.x, scth.x * scphi.x, scphi.y) );
-				}
-			#endif
-
-			#if USE_PACKED_NORMAL == 1
-				vec3 decodeNormal(vec3 packedNormal)
-				{
-					vec3 v = vec3(packedNormal.xy, 1.0 - abs(packedNormal.x) - abs(packedNormal.y));
-					if (v.z < 0.0)
-					{
-						v.xy = (1.0 - abs(v.yx)) * vec2((v.x >= 0.0) ? +1.0 : -1.0, (v.y >= 0.0) ? +1.0 : -1.0);
-					}
-					return normalize(v);
-				}
-			#endif
-
-			#if USE_PACKED_NORMAL == 2
-				vec3 decodeNormal(vec3 packedNormal)
-				{
-					vec3 v = (packedNormal * 2.0) - 1.0;
-					return normalize(v);
-				}
-			#endif
-		#endif`,
-
-		`#ifdef USE_PACKED_POSITION
-			#if USE_PACKED_POSITION == 0
-				uniform mat4 quantizeMatPos;
-			#endif
-		#endif`,
-
-		`#ifdef USE_PACKED_UV
-			#if USE_PACKED_UV == 1
-				uniform mat3 quantizeMatUV;
-			#endif
-		#endif`,
-
-		`#ifdef USE_PACKED_UV
-			#if USE_PACKED_UV == 0
-				vec2 decodeUV(vec2 packedUV)
-				{
-					vec2 uv = (packedUV * 2.0) - 1.0;
-					return uv;
-				}
-			#endif
-
-			#if USE_PACKED_UV == 1
-				vec2 decodeUV(vec2 packedUV)
-				{
-					vec2 uv = ( vec3(packedUV, 1.0) * quantizeMatUV ).xy;
-					return uv;
-				}
-			#endif
-		#endif`,
+		// Shader src: `geometry_decode_pars_vertex`
+		ShaderChunk.geometry_decode_pars_vertex, 
 
 		"void main() {",
 
 		ShaderChunk.uv_vertex,
-
-		`#ifdef USE_UV
-			#ifdef USE_PACKED_UV
-				vUv = decodeUV(vUv);
-			#endif
-		#endif`,
-
 		ShaderChunk.uv2_vertex,
 		ShaderChunk.color_vertex,
 		ShaderChunk.beginnormal_vertex,
 
-		`#ifdef USE_PACKED_NORMAL
-			objectNormal = decodeNormal(objectNormal);
-		#endif
+		// Shader src: `geometry_decode_normal_vertex`
+		ShaderChunk.geometry_decode_normal_vertex, 
 
-		#ifdef USE_TANGENT
+		`#ifdef USE_TANGENT
 			vec3 objectTangent = vec3( tangent.xyz );
-		#endif
-		`,
+		#endif`,
 
 		ShaderChunk.morphnormal_vertex,
 		ShaderChunk.skinbase_vertex,
@@ -814,11 +747,8 @@ function PackedPhongMaterial(parameters) {
 
 		ShaderChunk.begin_vertex,
 
-		`#ifdef USE_PACKED_POSITION
-			#if USE_PACKED_POSITION == 0
-				transformed = ( vec4(transformed, 1.0) * quantizeMatPos ).xyz;
-			#endif
-		#endif`,
+		// Shader src: `geometry_decode_vertex`
+		ShaderChunk.geometry_decode_vertex, 
 
 		ShaderChunk.morphtarget_vertex,
 		ShaderChunk.skinning_vertex,
@@ -837,6 +767,7 @@ function PackedPhongMaterial(parameters) {
 		"}",
 	].join("\n");
 
+	// Use the original MeshPhongMaterial's fragmentShader. 
 	this.fragmentShader = [
 		"#define PHONG",
 

examples/webgl_buffergeometry_compression.html

@@ -20,6 +20,7 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { GeometryCompressionUtils } from './jsm/utils/GeometryCompressionUtils.js';
 			import { BufferGeometryUtils } from './jsm/utils/BufferGeometryUtils.js';
+			import { TeapotBufferGeometry } from './jsm/geometries/TeapotBufferGeometry.js';
 			import { GUI } from './jsm/libs/dat.gui.module.js';
 
 			var statsEnabled = true;
@@ -32,6 +33,7 @@
 
 			// options
 			var data = {
+				"model": "Icosahedron",
 				"wireframe": false,
 				"texture": false,
 				"detail": 4,
@@ -104,36 +106,43 @@
 
 				//
 
-				var ballGeom = newGeometry();
+				var geom = newGeometry(data);
 
-				var ballMesh = new THREE.Mesh( ballGeom, meshMaterial );
-				var ballLineSegments = new THREE.LineSegments( new THREE.WireframeGeometry( ballGeom ), lineMaterial );
-				ballLineSegments.visible = data.wireframe;
+				var mesh = new THREE.Mesh( geom, meshMaterial );
+				var lineSegments = new THREE.LineSegments( new THREE.WireframeGeometry( geom ), lineMaterial );
+				lineSegments.visible = data.wireframe;
 
-				scene.add( ballMesh );
-				scene.add( ballLineSegments );
+				scene.add( mesh );
+				scene.add( lineSegments );
 
 				//
 
 				gui = new GUI();
 				gui.width = 350;
 
-				function newGeometry() {
+				function newGeometry(data) {
 
-					var geom = new THREE.IcosahedronBufferGeometry( radius, data.detail );
-					// var geom = new THREE.CylinderBufferGeometry( 5, 5, 20, 32 );
-					// var geom = new THREE.OctahedronBufferGeometry( radius, data.detail );
-					// var geom = new THREE.BoxBufferGeometry(radius, radius, radius, data.detail, data.detail, data.detail);
-					return geom;
+					switch (data.model) {
+						case "Icosahedron": 
+							return new THREE.IcosahedronBufferGeometry( radius, data.detail );
+						case "Cylinder": 
+							return new THREE.CylinderBufferGeometry( radius, radius, radius * 2, data.detail * 6 );
+						case "Teapot": 
+							return new TeapotBufferGeometry( radius, data.detail * 3, true, true, true, true, true );
+						case "TorusKnot": 
+							return new THREE.TorusKnotBufferGeometry( radius, 10, data.detail * 20, data.detail * 6, 3, 4 );
+					}
 
 				}
 
 				function generateGeometry() {
 
+					geom = newGeometry(data);
+
 					updateGroupGeometry(
-						ballMesh,
-						ballLineSegments,
-						newGeometry(),
+						mesh,
+						lineSegments,
+						geom,
 						data );
 
 				}
@@ -141,16 +150,17 @@
 				// updateLineSegments
 				function updateLineSegments() {
 
-					ballLineSegments.visible = data.wireframe;
+					lineSegments.visible = data.wireframe;
 
 				}
 
 				var folder = gui.addFolder( 'Scene' );
-				folder.open();
+				folder.add( data, 'model', ["Icosahedron", "Cylinder", "TorusKnot", "Teapot"] ).onChange( generateGeometry );
 				folder.add( data, 'wireframe', false ).onChange( updateLineSegments );
 				folder.add( data, 'texture', false ).onChange( generateGeometry );
-				folder.add( data, 'detail', 0, 6, 1 ).onChange( generateGeometry );
+				folder.add( data, 'detail', 1, 8, 1 ).onChange( generateGeometry );
 				folder.add( data, 'rotationSpeed', 0, 0.5, 0.1 );
+				folder.open();
 
 				folder = gui.addFolder( 'Position Compression' );
 				folder.add( data, 'QuantizePosEncoding', false ).onChange( generateGeometry );
@@ -167,7 +177,7 @@
 				folder = gui.addFolder( 'Memory Info' );
 				folder.open();
 				memoryDisplay = folder.add( data, 'totalGPUMemory', "0 bytes" );
-				computeGPUMemory( ballMesh );
+				computeGPUMemory( mesh );
 
 				//
 
@@ -233,6 +243,7 @@
 
 				}
 
+				// dispose first
 				lineSegments.geometry.dispose();
 				mesh.geometry.dispose();
 
@@ -265,8 +276,10 @@
 
 
 			function computeGPUMemory( mesh ) {
+
 				// Use BufferGeometryUtils to do memory calculation
 				memoryDisplay.setValue( BufferGeometryUtils.estimateBytesUsed(mesh.geometry) + " bytes");
+
 			}
 
 		</script>

src/renderers/shaders/ShaderChunk.d.ts

@@ -43,6 +43,9 @@ export let ShaderChunk: {
 	equirect_vert: string;
 	fog_fragment: string;
 	fog_pars_fragment: string;
+	geometry_decode_pars_vertex: string;
+	geometry_decode_normal_vertex: string;
+	geometry_decode_vertex: string;
 	linedashed_frag: string;
 	linedashed_vert: string;
 	lightmap_fragment: string;

src/renderers/shaders/ShaderChunk.js

@@ -33,6 +33,9 @@ import fog_vertex from './ShaderChunk/fog_vertex.glsl.js';
 import fog_pars_vertex from './ShaderChunk/fog_pars_vertex.glsl.js';
 import fog_fragment from './ShaderChunk/fog_fragment.glsl.js';
 import fog_pars_fragment from './ShaderChunk/fog_pars_fragment.glsl.js';
+import geometry_decode_pars_vertex from './ShaderChunk/geometry_decode_pars_vertex.glsl';
+import geometry_decode_normal_vertex from './ShaderChunk/geometry_decode_normal_vertex.glsl';
+import geometry_decode_vertex from './ShaderChunk/geometry_decode_vertex.glsl';
 import gradientmap_pars_fragment from './ShaderChunk/gradientmap_pars_fragment.glsl.js';
 import lightmap_fragment from './ShaderChunk/lightmap_fragment.glsl.js';
 import lightmap_pars_fragment from './ShaderChunk/lightmap_pars_fragment.glsl.js';
@@ -164,6 +167,9 @@ export var ShaderChunk = {
 	fog_pars_vertex: fog_pars_vertex,
 	fog_fragment: fog_fragment,
 	fog_pars_fragment: fog_pars_fragment,
+	geometry_decode_pars_vertex: geometry_decode_pars_vertex, 
+	geometry_decode_normal_vertex: geometry_decode_normal_vertex, 
+	geometry_decode_vertex: geometry_decode_vertex, 
 	gradientmap_pars_fragment: gradientmap_pars_fragment,
 	lightmap_fragment: lightmap_fragment,
 	lightmap_pars_fragment: lightmap_pars_fragment,

src/renderers/shaders/ShaderChunk/geometry_decode_normal_vertex.glsl.js

@@ -0,0 +1,5 @@
+export default /* glsl */`
+#ifdef USE_PACKED_NORMAL
+	objectNormal = decodeNormal(objectNormal);
+#endif
+`;

src/renderers/shaders/ShaderChunk/geometry_decode_pars_vertex.glsl.js

@@ -0,0 +1,64 @@
+export default /* glsl */`
+#ifdef USE_PACKED_NORMAL
+#if USE_PACKED_NORMAL == 0
+    vec3 decodeNormal(vec3 packedNormal)
+    {
+        float x = packedNormal.x * 2.0 - 1.0;
+        float y = packedNormal.y * 2.0 - 1.0;
+        vec2 scth = vec2(sin(x * PI), cos(x * PI));
+        vec2 scphi = vec2(sqrt(1.0 - y * y), y);
+        return normalize( vec3(scth.y * scphi.x, scth.x * scphi.x, scphi.y) );
+    }
+#endif
+
+#if USE_PACKED_NORMAL == 1
+    vec3 decodeNormal(vec3 packedNormal)
+    {
+        vec3 v = vec3(packedNormal.xy, 1.0 - abs(packedNormal.x) - abs(packedNormal.y));
+        if (v.z < 0.0)
+        {
+            v.xy = (1.0 - abs(v.yx)) * vec2((v.x >= 0.0) ? +1.0 : -1.0, (v.y >= 0.0) ? +1.0 : -1.0);
+        }
+        return normalize(v);
+    }
+#endif
+
+#if USE_PACKED_NORMAL == 2
+    vec3 decodeNormal(vec3 packedNormal)
+    {
+        vec3 v = (packedNormal * 2.0) - 1.0;
+        return normalize(v);
+    }
+#endif
+#endif
+
+#ifdef USE_PACKED_POSITION
+#if USE_PACKED_POSITION == 0
+    uniform mat4 quantizeMatPos;
+#endif
+#endif
+
+#ifdef USE_PACKED_UV
+#if USE_PACKED_UV == 1
+    uniform mat3 quantizeMatUV;
+#endif
+#endif
+
+#ifdef USE_PACKED_UV
+#if USE_PACKED_UV == 0
+    vec2 decodeUV(vec2 packedUV)
+    {
+        vec2 uv = (packedUV * 2.0) - 1.0;
+        return uv;
+    }
+#endif
+
+#if USE_PACKED_UV == 1
+    vec2 decodeUV(vec2 packedUV)
+    {
+        vec2 uv = ( vec3(packedUV, 1.0) * quantizeMatUV ).xy;
+        return uv;
+    }
+#endif
+#endif
+`;

src/renderers/shaders/ShaderChunk/geometry_decode_vertex.glsl.js

@@ -0,0 +1,13 @@
+export default /* glsl */`
+#ifdef USE_PACKED_POSITION
+	#if USE_PACKED_POSITION == 0
+		transformed = ( vec4(transformed, 1.0) * quantizeMatPos ).xyz;
+	#endif
+#endif
+
+#ifdef USE_UV
+    #ifdef USE_PACKED_UV
+        vUv = decodeUV(vUv);
+	#endif
+#endif
+`;