Texture mapping for surfaces

Author: unconed

.gitmodules

@@ -7,3 +7,6 @@
 [submodule "vendor/ThreeRTT.js"]
 	path = vendor/ThreeRTT.js
 	url = https://github.com/unconed/ThreeRTT.js
+[submodule "vendor/console-extras"]
+	path = vendor/console-extras
+	url = https://github.com/unconed/console-extras.js.git

README.md

@@ -326,6 +326,8 @@ Bezier Surface
   doubleSided: true,                   // Whether the mesh is double sided
   flipSided: false,                    // Whether to flip a single sided mesh
   shaded: true,                        // Whether to shade the surface
+  map: null,                           // Texture Map (pass in THREE.Texture)
+  mapOpacity: 0,                       // Opacity of texture map
 })
 ```
 
@@ -370,6 +372,8 @@ Surface
   doubleSided: true,                     // Whether the mesh is double sided
   flipSided: false,                      // Whether to flip a single sided mesh
   shaded: true,                          // Whether to shade the surface
+  map: null,                             // Texture Map (pass in THREE.Texture)
+  mapOpacity: 0,                         // Opacity of texture map
 })
 ```
 

build/MathBox-bundle.js

@@ -43488,6 +43488,8 @@ MathBox.Style.prototype = {
       worldRotation: new THREE.Vector3(),
       worldPosition: new THREE.Vector3(),
       zIndex: 0.0,
+
+      mapOpacity: 0,
     };
   },
 
@@ -44579,6 +44581,7 @@ MathBox.Surface.prototype = _.extend(new MathBox.Primitive(null), {
       doubleSided: true,
       flipSided: false,
       shaded: true,
+      map: null,
       style: {}//,
     };
   },
@@ -44621,7 +44624,8 @@ MathBox.Surface.prototype = _.extend(new MathBox.Primitive(null), {
       doubleSided: options.doubleSided,
       flipSided: options.flipSided,
       shaded: options.shaded,
-      dynamic: options.live
+      dynamic: options.live,
+      map: options.map,
     }, style);
     this.line = new MathBox.Renderable.Mesh(geometry, {
       type: 'mesh',
@@ -44795,6 +44799,7 @@ MathBox.BezierSurface.prototype = _.extend(new MathBox.Surface(null), {
       doubleSided: true,
       flipSided: false,
       shaded: true,
+      map: null,
       style: {}//,
     };
   },
@@ -45015,9 +45020,14 @@ MathBox.Renderable.prototype = {
     }
 
     if (this.material) {
+      options = this.get();
+
+      // Apply texture
+      if (options.map) {
+        this.material.uniforms.texture.value = options.map;
+      }
 
       // Set double sided / culling order.
-      options = this.get();
       this.material.side = options.doubleSided ? THREE.DoubleSide :
                            THREE.FrontSide;
       options = { flipSided: (options.doubleSided && options.flipSided) ? -1 : 1 };

build/MathBox-bundle.min.js

@@ -1641,6 +1641,8 @@ MathBox.Style.prototype = {
       worldRotation: new THREE.Vector3(),
       worldPosition: new THREE.Vector3(),
       zIndex: 0.0,
+
+      mapOpacity: 0,
     };
   },
 
@@ -2732,6 +2734,7 @@ MathBox.Surface.prototype = _.extend(new MathBox.Primitive(null), {
       doubleSided: true,
       flipSided: false,
       shaded: true,
+      map: null,
       style: {}//,
     };
   },
@@ -2774,7 +2777,8 @@ MathBox.Surface.prototype = _.extend(new MathBox.Primitive(null), {
       doubleSided: options.doubleSided,
       flipSided: options.flipSided,
       shaded: options.shaded,
-      dynamic: options.live
+      dynamic: options.live,
+      map: options.map,
     }, style);
     this.line = new MathBox.Renderable.Mesh(geometry, {
       type: 'mesh',
@@ -2948,6 +2952,7 @@ MathBox.BezierSurface.prototype = _.extend(new MathBox.Surface(null), {
       doubleSided: true,
       flipSided: false,
       shaded: true,
+      map: null,
       style: {}//,
     };
   },
@@ -3168,9 +3173,14 @@ MathBox.Renderable.prototype = {
     }
 
     if (this.material) {
+      options = this.get();
+
+      // Apply texture
+      if (options.map) {
+        this.material.uniforms.texture.value = options.map;
+      }
 
       // Set double sided / culling order.
-      options = this.get();
       this.material.side = options.doubleSided ? THREE.DoubleSide :
                            THREE.FrontSide;
       options = { flipSided: (options.doubleSided && options.flipSided) ? -1 : 1 };

build/MathBox-core.js

@@ -312,6 +312,11 @@
 // Fragment shader: render a shaded surface fragment.
 uniform vec3 color;
 uniform float opacity;
+uniform float mapOpacity;
+
+uniform sampler2D texture;
+varying vec2 vUV;
+
 varying vec3 vNormal;
 varying vec3 vViewPosition;
 uniform float flipSided;
@@ -337,18 +342,27 @@
 	float dotNormalHalf = max(dot(normal, halfVector), 0.0);
 	float specular = max(pow(dotNormalHalf, shininess), 0.0);
 
-  gl_FragColor = vec4(color * diffuse + specular * .3, opacity);
+  vec4 sample = texture2D(texture, vUV);
+  vec3 textured = color + (color * sample.xyz - color) * mapOpacity * sample.w;
+  gl_FragColor = vec4(textured * diffuse + specular * .3, opacity);
 }
 </script>
 
 <script type="application/x-glsl" id="fragmentSolid">
 // Fragment shader: render a solid surface fragment.
 uniform vec3 color;
 uniform float opacity;
+uniform float mapOpacity;
+
+uniform sampler2D texture;
+varying vec2 vUV;
 
 void fragmentSolid() {
   if (opacity < 0.01) discard;
-  gl_FragColor = vec4(color, opacity);
+
+  vec4 sample = texture2D(texture, vUV);
+  vec3 textured = color + (color * sample.xyz - color) * mapOpacity * sample.w;
+  gl_FragColor = vec4(textured, opacity);
 }
 </script>
 

build/MathBox-core.min.js

@@ -4612,6 +4612,8 @@ MathBox.Style.prototype = {
       worldRotation: new THREE.Vector3(),
       worldPosition: new THREE.Vector3(),
       zIndex: 0.0,
+
+      mapOpacity: 0,
     };
   },
 
@@ -5703,6 +5705,7 @@ MathBox.Surface.prototype = _.extend(new MathBox.Primitive(null), {
       doubleSided: true,
       flipSided: false,
       shaded: true,
+      map: null,
       style: {}//,
     };
   },
@@ -5745,7 +5748,8 @@ MathBox.Surface.prototype = _.extend(new MathBox.Primitive(null), {
       doubleSided: options.doubleSided,
       flipSided: options.flipSided,
       shaded: options.shaded,
-      dynamic: options.live
+      dynamic: options.live,
+      map: options.map,
     }, style);
     this.line = new MathBox.Renderable.Mesh(geometry, {
       type: 'mesh',
@@ -5919,6 +5923,7 @@ MathBox.BezierSurface.prototype = _.extend(new MathBox.Surface(null), {
       doubleSided: true,
       flipSided: false,
       shaded: true,
+      map: null,
       style: {}//,
     };
   },
@@ -6139,9 +6144,14 @@ MathBox.Renderable.prototype = {
     }
 
     if (this.material) {
+      options = this.get();
+
+      // Apply texture
+      if (options.map) {
+        this.material.uniforms.texture.value = options.map;
+      }
 
       // Set double sided / culling order.
-      options = this.get();
       this.material.side = options.doubleSided ? THREE.DoubleSide :
                            THREE.FrontSide;
       options = { flipSided: (options.doubleSided && options.flipSided) ? -1 : 1 };