diff --git a/examples/webgl_materials_nodes.html b/examples/webgl_materials_nodes.html index 3e7303547cd9d0938c28fefa82f524fbfd2d08ea..59ff82f1012c12b14774e53ff1c03c98b3261082 100644 --- a/examples/webgl_materials_nodes.html +++ b/examples/webgl_materials_nodes.html @@ -186,6 +186,7 @@ 'adv / soft-body': 'soft-body', 'adv / wave': 'wave', 'adv / triangle-blur': 'triangle-blur', + 'adv / triplanar-mapping': 'triplanar-mapping', 'adv / render-to-texture': 'rtt', 'adv / temporal-blur': 'temporal-blur', 'adv / conditional': 'conditional', @@ -2385,6 +2386,56 @@ break; + case 'triplanar-mapping': + + // MATERIAL + + mtl = new THREE.PhongNodeMaterial(); + + var scale = new THREE.FloatNode( .02 ); + + var triplanarMapping = new THREE.FunctionNode( [ + // Reference: https://github.com/keijiro/StandardTriplanar + "vec4 triplanar_mapping( sampler2D texture, vec3 normal, vec3 position, float scale ) {", + + // Blending factor of triplanar mapping + " vec3 bf = normalize( abs( normal ) );", + " bf /= dot( bf, vec3( 1.0 ) );", + + // Triplanar mapping + " vec2 tx = position.yz * scale;", + " vec2 ty = position.zx * scale;", + " vec2 tz = position.xy * scale;", + + // Base color + " vec4 cx = texture2D(texture, tx) * bf.x;", + " vec4 cy = texture2D(texture, ty) * bf.y;", + " vec4 cz = texture2D(texture, tz) * bf.z;", + + " return cx + cy + cz;", + + "}" + ].join( "\n" ) ); + + var triplanarMappingTexture = new THREE.FunctionCallNode( triplanarMapping, { + texture: new THREE.TextureNode( getTexture( "brick" ) ), + normal: new THREE.NormalNode( THREE.NormalNode.WORLD ), + position: new THREE.PositionNode( THREE.PositionNode.WORLD ), + scale: scale, + } ); + + mtl.color = triplanarMappingTexture; + + // GUI + + addGui( 'scale', scale.value, function ( val ) { + + scale.value = val; + + }, false, 0.001, .1 ); + + break; + case 'firefly': // MATERIAL