Permalink
Find file Copy path
2767 lines (1787 sloc) 63.3 KB
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - node material</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
color: #fff;
font-family:Monospace;
font-size:13px;
margin: 0px;
text-align:center;
overflow: hidden;
}
#info {
color: #fff;
position: absolute;
top: 10px;
width: 100%;
text-align: center;
display:block;
}
a { color: white }
</style>
</head>
<body>
<div id="container"></div>
<div id="info">
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - Node-Based Material</br>
<a id="serialize" href="javascript:void(0);">Serialize and apply</a>
</div>
<script src="../build/three.js"></script>
<script src='js/geometries/TeapotBufferGeometry.js'></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/libs/dat.gui.min.js"></script>
<script type="module">
import './js/nodes/THREE.Nodes.js';
import './js/loaders/NodeMaterialLoader.js';
var container = document.getElementById( 'container' );
var renderer, scene, camera, clock = new THREE.Clock(), fov = 50;
var frame = new THREE.NodeFrame();
var teapot, mesh;
var controls;
var move = false;
var rtTexture, rtMaterial;
var gui;
var library = {};
var serialized = false;
var textures = {
brick: { url: 'textures/brick_diffuse.jpg' },
grass: { url: 'textures/terrain/grasslight-big.jpg' },
grassNormal: { url: 'textures/terrain/grasslight-big-nm.jpg' },
decalDiffuse: { url: 'textures/decal/decal-diffuse.png' },
decalNormal: { url: 'textures/decal/decal-normal.jpg' },
cloud: { url: 'textures/lava/cloud.png' },
spherical: { url: 'textures/envmap.png' }
};
var param = { example: new URL( window.location.href ).searchParams.get( 'e' ) || 'mesh-standard' };
function getTexture( name ) {
var texture = textures[ name ].texture;
if ( ! texture ) {
texture = textures[ name ].texture = new THREE.TextureLoader().load( textures[ name ].url );
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
library[ texture.uuid ] = texture;
}
return texture;
}
var cubemap = function () {
var path = "textures/cube/Park2/";
var format = '.jpg';
var urls = [
path + 'posx' + format, path + 'negx' + format,
path + 'posy' + format, path + 'negy' + format,
path + 'posz' + format, path + 'negz' + format
];
var textureCube = new THREE.CubeTextureLoader().load( urls );
textureCube.format = THREE.RGBFormat;
library[ textureCube.uuid ] = textureCube;
return textureCube;
}();
window.addEventListener( 'load', init );
function init() {
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.uuid = THREE.Math.generateUUID(); // generate to library
container.appendChild( renderer.domElement );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( fov, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.x = 50;
camera.position.z = - 50;
camera.position.y = 30;
camera.target = new THREE.Vector3();
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.minDistance = 50;
controls.maxDistance = 200;
scene.add( new THREE.AmbientLight( 0x464646 ) );
var light = new THREE.DirectionalLight( 0xffddcc, 1 );
light.position.set( 1, 0.75, 0.5 );
scene.add( light );
var light = new THREE.DirectionalLight( 0xccccff, 1 );
light.position.set( - 1, 0.75, - 0.5 );
scene.add( light );
teapot = new THREE.TeapotBufferGeometry( 15, 18 );
mesh = new THREE.Mesh( teapot );
scene.add( mesh );
library[ renderer.uuid ] = renderer;
library[ camera.uuid ] = camera;
library[ mesh.uuid ] = mesh;
window.addEventListener( 'resize', onWindowResize, false );
updateMaterial();
onWindowResize();
animate();
}
function clearGui() {
if ( gui ) gui.destroy();
gui = new dat.GUI();
gui.add( param, 'example', {
'basic / mesh-standard': 'mesh-standard',
'basic / standard': 'standard',
'basic / physical': 'physical',
'basic / phong': 'phong',
'basic / layers': 'layers',
'basic / rim': 'rim',
'basic / color-adjustment': 'color-adjustment',
'basic / uv-transform': 'uv-transform',
'basic / bump': 'bump',
'basic / blur': 'blur',
'basic / spherical-reflection': 'spherical-reflection',
'adv / fresnel': 'fresnel',
'adv / saturation': 'saturation',
'adv / top-bottom': 'top-bottom',
'adv / skin': 'skin',
'adv / skin-phong': 'skin-phong',
'adv / caustic': 'caustic',
'adv / displace': 'displace',
'adv / plush': 'plush',
'adv / toon': 'toon',
'adv / camera-depth': 'camera-depth',
'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',
'adv / expression': 'expression',
'adv / sss': 'sss',
'adv / translucent': 'translucent',
'node / position': 'node-position',
'node / normal': 'node-normal',
'misc / smoke': 'smoke',
'misc / firefly': 'firefly',
'misc / reserved-keywords': 'reserved-keywords',
'misc / varying': 'varying',
'misc / void-function': 'void-function',
'misc / readonly': 'readonly',
'misc / custom-attribute': 'custom-attribute'
} ).onFinishChange( function () {
updateMaterial();
} );
gui.open();
}
function addGui( name, value, callback, isColor, min, max ) {
var node;
param[ name ] = value;
if ( isColor ) {
node = gui.addColor( param, name ).onChange( function () {
callback( param[ name ] );
} );
} else if ( typeof value == 'object' ) {
param[ name ] = value[ Object.keys( value )[ 0 ] ];
node = gui.add( param, name, value ).onChange( function () {
callback( param[ name ] );
} );
} else {
node = gui.add( param, name, min, max ).onChange( function () {
callback( param[ name ] );
} );
}
return node;
}
function updateMaterial() {
move = false;
if ( mesh.material ) mesh.material.dispose();
if ( rtTexture ) {
delete library[ rtTexture.texture.uuid ];
rtTexture.dispose();
rtTexture = null;
}
if ( rtMaterial ) {
rtMaterial.dispose();
rtMaterial = null;
}
var name = param.example;
var mtl;
clearGui();
switch ( name ) {
case 'phong':
// MATERIAL
mtl = new THREE.PhongNodeMaterial();
//mtl.color = // albedo (vec3)
//mtl.alpha = // opacity (float)
//mtl.specular = // specular color (vec3)
//mtl.shininess = // shininess (float)
//mtl.normal = // normal (vec3)
//mtl.emissive = // emissive color (vec3)
//mtl.ambient = // ambient color (vec3)
//mtl.shadow = // shadowmap (vec3)
//mtl.light = // custom-light (vec3)
//mtl.ao = // ambient occlusion (float)
//mtl.light = // input/output light (vec3)
//mtl.environment = // reflection/refraction (vec3)
//mtl.environmentAlpha = // environment alpha (float)
//mtl.position = // vertex local position (vec3)
var mask = new THREE.SwitchNode( new THREE.TextureNode( getTexture( "decalDiffuse" ) ), 'w' );
mtl.color = new THREE.TextureNode( getTexture( "grass" ) );
mtl.specular = new THREE.FloatNode( .5 );
mtl.shininess = new THREE.FloatNode( 15 );
mtl.environment = new THREE.CubeTextureNode( cubemap );
mtl.environmentAlpha = mask;
mtl.normal = new THREE.NormalMapNode( new THREE.TextureNode( getTexture( "grassNormal" ) ) );
mtl.normal.scale = new THREE.Math1Node( mask, THREE.Math1Node.INVERT );
break;
case 'standard':
// MATERIAL
mtl = new THREE.StandardNodeMaterial();
//mtl.color = // albedo (vec3)
//mtl.alpha = // opacity (float)
//mtl.roughness = // roughness (float)
//mtl.metalness = // metalness (float)
//mtl.normal = // normal (vec3)
//mtl.emissive = // emissive color (vec3)
//mtl.ambient = // ambient color (vec3)
//mtl.shadow = // shadowmap (vec3)
//mtl.light = // custom-light (vec3)
//mtl.ao = // ambient occlusion (float)
//mtl.environment = // reflection/refraction (vec3)
//mtl.position = // vertex local position (vec3)
var mask = new THREE.SwitchNode( new THREE.TextureNode( getTexture( "decalDiffuse" ) ), 'w' );
var normalScale = new THREE.FloatNode( .3 );
var roughnessA = new THREE.FloatNode( .5 );
var metalnessA = new THREE.FloatNode( .5 );
var roughnessB = new THREE.FloatNode( 0 );
var metalnessB = new THREE.FloatNode( 1 );
var roughness = new THREE.Math3Node(
roughnessA,
roughnessB,
mask,
THREE.Math3Node.MIX
);
var metalness = new THREE.Math3Node(
metalnessA,
metalnessB,
mask,
THREE.Math3Node.MIX
);
var normalMask = new THREE.OperatorNode(
new THREE.Math1Node( mask, THREE.Math1Node.INVERT ),
normalScale,
THREE.OperatorNode.MUL
);
mtl.color = new THREE.ColorNode( 0xEEEEEE );
mtl.roughness = roughness;
mtl.metalness = metalness;
mtl.environment = new THREE.CubeTextureNode( cubemap );
mtl.normal = new THREE.NormalMapNode( new THREE.TextureNode( getTexture( "grassNormal" ) ) );
mtl.normal.scale = normalMask;
// GUI
addGui( 'color', mtl.color.value.getHex(), function ( val ) {
mtl.color.value.setHex( val );
}, true );
addGui( 'roughnessA', roughnessA.value, function ( val ) {
roughnessA.value = val;
}, false, 0, 1 );
addGui( 'metalnessA', metalnessA.value, function ( val ) {
metalnessA.value = val;
}, false, 0, 1 );
addGui( 'roughnessB', roughnessB.value, function ( val ) {
roughnessB.value = val;
}, false, 0, 1 );
addGui( 'metalnessB', metalnessB.value, function ( val ) {
metalnessB.value = val;
}, false, 0, 1 );
addGui( 'normalScale', normalScale.value, function ( val ) {
normalScale.value = val;
}, false, 0, 1 );
break;
case 'mesh-standard':
// MATERIAL
var sataturation = new THREE.FloatNode( 1 ),
useNodeMaterial = true,
useMap = true,
useNormals = true;
function updateMaterial() {
var oldMaterial = mtl;
if ( oldMaterial ) oldMaterial.dispose();
mtl = useNodeMaterial ? new THREE.MeshStandardNodeMaterial() : new THREE.MeshStandardMaterial();
// default syntax ( backward-compatible )
mtl.map = useMap ? getTexture( "brick" ) : undefined;
mtl.normalMap = useNormals ? getTexture( "decalNormal" ) : undefined;
mtl.normalScale = oldMaterial ? oldMaterial.normalScale : new THREE.Vector2( .5, .5 );
mtl.envMap = cubemap;
mtl.roughness = oldMaterial ? oldMaterial.roughness : .5;
mtl.metalness = oldMaterial ? oldMaterial.metalness : .5;
// extended syntax ( only for NodeMaterial )
if ( useNodeMaterial && useMap ) {
mtl.map = new THREE.ColorAdjustmentNode(
new THREE.TextureNode( mtl.map ),
sataturation,
THREE.ColorAdjustmentNode.SATURATION
);
}
// apply material
mtl.side = THREE.DoubleSide;
mtl.needsUpdate = true;
mesh.material = mtl;
}
updateMaterial();
// GUI
addGui( 'use node material', useNodeMaterial, function ( val ) {
useNodeMaterial = val;
updateMaterial();
} );
addGui( 'roughness', mtl.roughness, function ( val ) {
mtl.roughness = val;
}, false, 0, 1 );
addGui( 'metalness', mtl.roughness, function ( val ) {
mtl.metalness = val;
}, false, 0, 1 );
addGui( 'normalX', mtl.normalScale.x, function ( val ) {
mtl.normalScale.x = val;
}, false, - 1, 1 );
addGui( 'normalY', mtl.normalScale.y, function ( val ) {
mtl.normalScale.y = val;
}, false, - 1, 1 );
addGui( 'sat. (node)', sataturation.value, function ( val ) {
sataturation.value = val;
}, false, 0, 2 );
addGui( 'colors', useMap, function ( val ) {
useMap = val;
updateMaterial();
}, false );
addGui( 'normals', useNormals, function ( val ) {
useNormals = val;
updateMaterial();
}, false );
break;
case 'physical':
// MATERIAL
mtl = new THREE.StandardNodeMaterial();
//mtl.color = // albedo (vec3)
//mtl.alpha = // opacity (float)
//mtl.roughness = // roughness (float)
//mtl.metalness = // metalness (float)
//mtl.reflectivity = // reflectivity (float)
//mtl.clearCoat = // clearCoat (float)
//mtl.clearCoatRoughness = // clearCoatRoughness (float)
//mtl.normal = // normal (vec3)
//mtl.emissive = // emissive color (vec3)
//mtl.ambient = // ambient color (vec3)
//mtl.shadow = // shadowmap (vec3)
//mtl.light = // custom-light (vec3)
//mtl.ao = // ambient occlusion (float)
//mtl.environment = // reflection/refraction (vec3)
//mtl.position = // vertex local position (vec3)
var mask = new THREE.SwitchNode( new THREE.TextureNode( getTexture( "decalDiffuse" ) ), 'w' );
var normalScale = new THREE.FloatNode( .3 );
var roughnessA = new THREE.FloatNode( .5 );
var metalnessA = new THREE.FloatNode( .5 );
var roughnessB = new THREE.FloatNode( 0 );
var metalnessB = new THREE.FloatNode( 1 );
var reflectivity = new THREE.FloatNode( 0 );
var clearCoat = new THREE.FloatNode( 1 );
var clearCoatRoughness = new THREE.FloatNode( 1 );
var roughness = new THREE.Math3Node(
roughnessA,
roughnessB,
mask,
THREE.Math3Node.MIX
);
var metalness = new THREE.Math3Node(
metalnessA,
metalnessB,
mask,
THREE.Math3Node.MIX
);
var normalMask = new THREE.OperatorNode(
new THREE.Math1Node( mask, THREE.Math1Node.INVERT ),
normalScale,
THREE.OperatorNode.MUL
);
mtl.color = new THREE.ColorNode( 0xEEEEEE );
mtl.roughness = roughness;
mtl.metalness = metalness;
mtl.reflectivity = reflectivity;
mtl.clearCoat = clearCoat;
mtl.clearCoatRoughness = clearCoatRoughness;
mtl.environment = new THREE.CubeTextureNode( cubemap );
mtl.normal = new THREE.NormalMapNode( new THREE.TextureNode( getTexture( "grassNormal" ) ) );
mtl.normal.scale = normalMask;
// GUI
addGui( 'color', mtl.color.value.getHex(), function ( val ) {
mtl.color.value.setHex( val );
}, true );
addGui( 'reflectivity', reflectivity.value, function ( val ) {
reflectivity.value = val;
}, false, 0, 1 );
addGui( 'clearCoat', clearCoat.value, function ( val ) {
clearCoat.value = val;
}, false, 0, 1 );
addGui( 'clearCoatRoughness', clearCoatRoughness.value, function ( val ) {
clearCoatRoughness.value = val;
}, false, 0, 1 );
addGui( 'roughnessA', roughnessA.value, function ( val ) {
roughnessA.value = val;
}, false, 0, 1 );
addGui( 'metalnessA', metalnessA.value, function ( val ) {
metalnessA.value = val;
}, false, 0, 1 );
addGui( 'roughnessB', roughnessB.value, function ( val ) {
roughnessB.value = val;
}, false, 0, 1 );
addGui( 'metalnessB', metalnessB.value, function ( val ) {
metalnessB.value = val;
}, false, 0, 1 );
addGui( 'normalScale', normalScale.value, function ( val ) {
normalScale.value = val;
}, false, 0, 1 );
break;
case 'wave':
// MATERIAL
mtl = new THREE.PhongNodeMaterial();
var time = new THREE.TimerNode();
var speed = new THREE.FloatNode( 5 );
var scale = new THREE.FloatNode( 1 );
var worldScale = new THREE.FloatNode( .4 );
var colorA = new THREE.ColorNode( 0xFFFFFF );
var colorB = new THREE.ColorNode( 0x0054df );
// used for serialization only
time.name = "time";
speed.name = "speed";
var timeScale = new THREE.OperatorNode(
time,
speed,
THREE.OperatorNode.MUL
);
var worldScl = new THREE.OperatorNode(
new THREE.PositionNode(),
worldScale,
THREE.OperatorNode.MUL
);
var posContinuous = new THREE.OperatorNode(
worldScl,
timeScale,
THREE.OperatorNode.ADD
);
var wave = new THREE.Math1Node( posContinuous, THREE.Math1Node.SIN );
wave = new THREE.SwitchNode( wave, 'x' );
var waveScale = new THREE.OperatorNode(
wave,
scale,
THREE.OperatorNode.MUL
);
var displaceY = new THREE.JoinNode(
new THREE.FloatNode(),
waveScale,
new THREE.FloatNode()
);
var displace = new THREE.OperatorNode(
new THREE.NormalNode(),
displaceY,
THREE.OperatorNode.MUL
);
var blend = new THREE.OperatorNode(
new THREE.PositionNode(),
displaceY,
THREE.OperatorNode.ADD
);
var color = new THREE.Math3Node(
colorB,
colorA,
wave,
THREE.Math3Node.MIX
);
mtl.color = color;
mtl.position = blend;
// GUI
addGui( 'speed', speed.value, function ( val ) {
speed.value = val;
}, false, 0, 10 );
addGui( 'scale', scale.value, function ( val ) {
scale.value = val;
}, false, 0, 3 );
addGui( 'worldScale', worldScale.value, function ( val ) {
worldScale.value = val;
}, false, 0, 1 );
addGui( 'colorA', colorA.value.getHex(), function ( val ) {
colorA.value.setHex( val );
}, true );
addGui( 'colorB', colorB.value.getHex(), function ( val ) {
colorB.value.setHex( val );
}, true );
addGui( 'useNormals', false, function ( val ) {
blend.b = val ? displace : displaceY;
mtl.needsUpdate = true;
} );
break;
case 'rim':
// MATERIAL
mtl = new THREE.PhongNodeMaterial();
var intensity = 1.3;
var power = new THREE.FloatNode( 3 );
var color = new THREE.ColorNode( 0xFFFFFF );
var viewZ = new THREE.Math2Node(
new THREE.NormalNode(),
new THREE.Vector3Node( 0, 0, - intensity ),
THREE.Math2Node.DOT
);
var rim = new THREE.OperatorNode(
viewZ,
new THREE.FloatNode( intensity ),
THREE.OperatorNode.ADD
);
var rimPower = new THREE.Math2Node(
rim,
power,
THREE.Math2Node.POW
);
var rimColor = new THREE.OperatorNode(
rimPower,
color,
THREE.OperatorNode.MUL
);
mtl.color = new THREE.ColorNode( 0x111111 );
mtl.emissive = rimColor;
// GUI
addGui( 'color', color.value.getHex(), function ( val ) {
color.value.setHex( val );
}, true );
addGui( 'intensity', intensity, function ( val ) {
intensity = val;
viewZ.b.z = - intensity;
rim.b.value = intensity;
}, false, 0, 3 );
addGui( 'power', power.value, function ( val ) {
power.value = val;
}, false, 0, 6 );
addGui( 'xray', false, function ( val ) {
if ( val ) {
mtl.emissive = color;
mtl.alpha = rimPower;
mtl.blending = THREE.AdditiveBlending;
mtl.depthWrite = false;
} else {
mtl.emissive = rimColor;
mtl.alpha = null;
mtl.blending = THREE.NormalBlending;
mtl.depthWrite = true;
}
mtl.needsUpdate = true;
} );
break;
case 'color-adjustment':
// MATERIAL
mtl = new THREE.PhongNodeMaterial();
var texture = new THREE.TextureNode( getTexture( "brick" ) );
var hue = new THREE.FloatNode();
var sataturation = new THREE.FloatNode( 1 );
var vibrance = new THREE.FloatNode();
var brightness = new THREE.FloatNode( 0 );
var contrast = new THREE.FloatNode( 1 );
var hueNode = new THREE.ColorAdjustmentNode( texture, hue, THREE.ColorAdjustmentNode.HUE );
var satNode = new THREE.ColorAdjustmentNode( hueNode, sataturation, THREE.ColorAdjustmentNode.SATURATION );
var vibranceNode = new THREE.ColorAdjustmentNode( satNode, vibrance, THREE.ColorAdjustmentNode.VIBRANCE );
var brightnessNode = new THREE.ColorAdjustmentNode( vibranceNode, brightness, THREE.ColorAdjustmentNode.BRIGHTNESS );
var contrastNode = new THREE.ColorAdjustmentNode( brightnessNode, contrast, THREE.ColorAdjustmentNode.CONTRAST );
mtl.color = contrastNode;
// GUI
addGui( 'hue', hue.value, function ( val ) {
hue.value = val;
}, false, 0, Math.PI * 2 );
addGui( 'saturation', sataturation.value, function ( val ) {
sataturation.value = val;
}, false, 0, 2 );
addGui( 'vibrance', vibrance.value, function ( val ) {
vibrance.value = val;
}, false, - 1, 1 );
addGui( 'brightness', brightness.value, function ( val ) {
brightness.value = val;
}, false, 0, .5 );
addGui( 'contrast', contrast.value, function ( val ) {
contrast.value = val;
}, false, 0, 2 );
break;
case 'uv-transform':
// MATERIAL
mtl = new THREE.PhongNodeMaterial();
var translate = new THREE.Vector2();
var rotate = 0;
var scale = new THREE.Vector2( 1, 1 );
var texture = new THREE.TextureNode( getTexture( "brick" ) );
texture.uv = new THREE.UVTransformNode();
//texture.uv.uv = new THREE.UVNode( 1 ); // uv2 for example
mtl.color = texture;
// GUI
function updateUVTransform() {
texture.uv.setUvTransform( translate.x, translate.y, scale.x, scale.y, THREE.Math.degToRad( rotate ) );
}
addGui( 'translateX', translate.x, function ( val ) {
translate.x = val;
updateUVTransform();
}, false, 0, 10 );
addGui( 'translateY', translate.y, function ( val ) {
translate.y = val;
updateUVTransform();
}, false, 0, 10 );
addGui( 'scaleX', scale.x, function ( val ) {
scale.x = val;
updateUVTransform();
}, false, .1, 5 );
addGui( 'scaleY', scale.y, function ( val ) {
scale.y = val;
updateUVTransform();
}, false, .1, 5 );
addGui( 'rotate', rotate, function ( val ) {
rotate = val;
updateUVTransform();
}, false, 0, 360 );
break;
case 'bump':
// MATERIAL
mtl = new THREE.PhongNodeMaterial();
var diffuse = new THREE.TextureNode( getTexture( "brick" ) );
var bumpMap = new THREE.BumpMapNode( new THREE.TextureNode( getTexture( "brick" ) ) );
bumpMap.scale = new THREE.FloatNode( .5 );
mtl.color = diffuse;
mtl.normal = bumpMap;
// convert BumpMap to NormalMap
//bumpMap.toNormalMap = true;
//mtl.normal = new THREE.NormalMapNode( bumpMap );
// GUI
addGui( 'scale', bumpMap.scale.value, function ( val ) {
bumpMap.scale.value = val;
}, false, - 2, 2 );
addGui( 'color', true, function ( val ) {
mtl.color = val ? diffuse : new THREE.ColorNode( 0xEEEEEE );
mtl.needsUpdate = true;
} );
break;
case 'blur':
// MATERIAL
mtl = new THREE.PhongNodeMaterial();
var diffuse = new THREE.TextureNode( getTexture( "brick" ) );
var blur = new THREE.BlurNode( new THREE.TextureNode( getTexture( "brick" ) ) );
mtl.color = blur;
// GUI
addGui( 'radiusX', blur.radius.x, function ( val ) {
blur.radius.x = val;
}, false, 0, 15 );
addGui( 'radiusY', blur.radius.y, function ( val ) {
blur.radius.y = val;
}, false, 0, 15 );
break;
case 'spherical-reflection':
// MATERIAL
mtl = new THREE.PhongNodeMaterial();
mtl.environment = new THREE.TextureNode( getTexture( "spherical" ), new THREE.ReflectNode( THREE.ReflectNode.SPHERE ) );
break;
case 'fresnel':
// MATERIAL
mtl = new THREE.PhongNodeMaterial();
var reflectance = new THREE.FloatNode( 1.3 );
var power = new THREE.FloatNode( 1 );
var color = new THREE.CubeTextureNode( cubemap );
var viewZ = new THREE.Math2Node(
new THREE.NormalNode(),
new THREE.Vector3Node( 0, 0, - 1 ),
THREE.Math2Node.DOT
);
var theta = new THREE.OperatorNode(
viewZ,
new THREE.FloatNode( 1 ),
THREE.OperatorNode.ADD
);
var thetaPower = new THREE.Math2Node(
theta,
power,
THREE.Math2Node.POW
);
var fresnel = new THREE.OperatorNode(
reflectance,
thetaPower,
THREE.OperatorNode.MUL
);
mtl.color = new THREE.ColorNode( 0x3399FF );
mtl.environment = color;
mtl.environmentAlpha = new THREE.Math1Node( fresnel, THREE.Math1Node.SATURATE );
// GUI
addGui( 'reflectance', reflectance.value, function ( val ) {
reflectance.value = val;
}, false, 0, 3 );
addGui( 'power', power.value, function ( val ) {
power.value = val;
}, false, 0, 5 );
break;
case 'layers':
// MATERIAL
mtl = new THREE.PhongNodeMaterial();
var tex1 = new THREE.TextureNode( getTexture( "grass" ) );
var tex2 = new THREE.TextureNode( getTexture( "brick" ) );
var offset = new THREE.FloatNode( 0 );
var scale = new THREE.FloatNode( 1 );
var uv = new THREE.UVNode();
var uvOffset = new THREE.OperatorNode(
offset,
uv,
THREE.OperatorNode.ADD
);
var uvScale = new THREE.OperatorNode(
uvOffset,
scale,
THREE.OperatorNode.MUL
);
var mask = new THREE.TextureNode( getTexture( "decalDiffuse" ), uvScale );
var maskAlphaChannel = new THREE.SwitchNode( mask, 'w' );
var blend = new THREE.Math3Node(
tex1,
tex2,
maskAlphaChannel,
THREE.Math3Node.MIX
);
mtl.color = blend;
// GUI
addGui( 'offset', offset.value, function ( val ) {
offset.value = val;
}, false, 0, 1 );
addGui( 'scale', scale.value, function ( val ) {
scale.value = val;
}, false, 0, 10 );
break;
case 'saturation':
// MATERIAL
mtl = new THREE.StandardNodeMaterial();
var tex = new THREE.TextureNode( getTexture( "brick" ) );
var sat = new THREE.FloatNode( 0 );
var satrgb = new THREE.FunctionNode( [
"vec3 satrgb( vec3 rgb, float adjustment ) {",
// include luminance function from LuminanceNode
" vec3 intensity = vec3( luminance( rgb ) );",
" return mix( intensity, rgb, adjustment );",
"}"
].join( "\n" ), [ THREE.LuminanceNode.Nodes.luminance ] );
var saturation = new THREE.FunctionCallNode( satrgb );
saturation.inputs.rgb = tex;
saturation.inputs.adjustment = sat;
// or try
//saturation.inputs[0] = tex;
//saturation.inputs[1] = sat;
mtl.color = saturation;
// GUI
addGui( 'saturation', sat.value, function ( val ) {
sat.value = val;
}, false, 0, 2 );
break;
case 'top-bottom':
// MATERIAL
mtl = new THREE.PhongNodeMaterial();
var top = new THREE.TextureNode( getTexture( "grass" ) );
var bottom = new THREE.TextureNode( getTexture( "brick" ) );
var normal = new THREE.NormalNode( THREE.NormalNode.WORLD );
var normalY = new THREE.SwitchNode( normal, 'y' );
var hard = new THREE.FloatNode( 9 );
var offset = new THREE.FloatNode( - 2.5 );
var hardClamp = new THREE.OperatorNode(
normalY,
hard,
THREE.OperatorNode.MUL
);
var offsetClamp = new THREE.OperatorNode(
hardClamp,
offset,
THREE.OperatorNode.ADD
);
var clamp0at1 = new THREE.Math1Node( offsetClamp, THREE.Math1Node.SATURATE );
var blend = new THREE.Math3Node( top, bottom, clamp0at1, THREE.Math3Node.MIX );
mtl.color = blend;
// GUI
addGui( 'hard', hard.value, function ( val ) {
hard.value = val;
}, false, 0, 20 );
addGui( 'offset', offset.value, function ( val ) {
offset.value = val;
}, false, - 10, 10 );
break;
case 'displace':
// MATERIAL
mtl = new THREE.PhongNodeMaterial();
var time = new THREE.TimerNode();
var scale = new THREE.FloatNode( 2 );
var speed = new THREE.FloatNode( .2 );
var colorA = new THREE.ColorNode( 0xFFFFFF );
var colorB = new THREE.ColorNode( 0x0054df );
// used for serialization only
time.name = "time";
speed.name = "speed";
var uv = new THREE.UVNode();
var timeScl = new THREE.OperatorNode(
time,
speed,
THREE.OperatorNode.MUL
);
var displaceOffset = new THREE.OperatorNode(
timeScl,
uv,
THREE.OperatorNode.ADD
);
var tex = new THREE.TextureNode( getTexture( "cloud" ), displaceOffset );
var texArea = new THREE.SwitchNode( tex, 'w' );
var displace = new THREE.OperatorNode(
new THREE.NormalNode(),
texArea,
THREE.OperatorNode.MUL
);
var displaceScale = new THREE.OperatorNode(
displace,
scale,
THREE.OperatorNode.MUL
);
var blend = new THREE.OperatorNode(
new THREE.PositionNode(),
displaceScale,
THREE.OperatorNode.ADD
);
var color = new THREE.Math3Node(
colorB,
colorA,
texArea,
THREE.Math3Node.MIX
);
mtl.color = mtl.specular = new THREE.ColorNode( 0 );
mtl.emissive = color;
mtl.position = blend;
// GUI
addGui( 'speed', speed.value, function ( val ) {
speed.value = val;
}, false, 0, 1 );
addGui( 'scale', scale.value, function ( val ) {
scale.value = val;
}, false, 0, 10 );
addGui( 'colorA', colorA.value.getHex(), function ( val ) {
colorA.value.setHex( val );
}, true );
addGui( 'colorB', colorB.value.getHex(), function ( val ) {
colorB.value.setHex( val );
}, true );
break;
case 'smoke':
// MATERIAL
mtl = new THREE.PhongNodeMaterial();
var time = new THREE.TimerNode();
var uv = new THREE.UVNode();
var timeSpeedA = new THREE.OperatorNode(
time,
new THREE.Vector2Node( 0.3, 0.1 ),
THREE.OperatorNode.MUL
);
var timeSpeedB = new THREE.OperatorNode(
time,
new THREE.Vector2Node( 0.15, 0.4 ),
THREE.OperatorNode.MUL
);
var uvOffsetA = new THREE.OperatorNode(
timeSpeedA,
uv,
THREE.OperatorNode.ADD
);
var uvOffsetB = new THREE.OperatorNode(
timeSpeedB,
uv,
THREE.OperatorNode.ADD
);
var cloudA = new THREE.TextureNode( getTexture( "cloud" ), uvOffsetA );
var cloudB = new THREE.TextureNode( getTexture( "cloud" ), uvOffsetB );
var clouds = new THREE.OperatorNode(
cloudA,
cloudB,
THREE.OperatorNode.ADD
);
mtl.environment = new THREE.ColorNode( 0xFFFFFF );
mtl.alpha = clouds;
// GUI
addGui( 'color', mtl.environment.value.getHex(), function ( val ) {
mtl.environment.value.setHex( val );
}, true );
break;
case 'camera-depth':
// MATERIAL
var colorA = new THREE.ColorNode( 0xFFFFFF );
var colorB = new THREE.ColorNode( 0x0054df );
var depth = new THREE.CameraNode( THREE.CameraNode.DEPTH );
depth.near.value = 1;
depth.far.value = 200;
var colors = new THREE.Math3Node(
colorB,
colorA,
depth,
THREE.Math3Node.MIX
);
mtl = new THREE.PhongNodeMaterial();
mtl.color = colors;
// GUI
addGui( 'near', depth.near.value, function ( val ) {
depth.near.value = val;
}, false, 1, 1200 );
addGui( 'far', depth.far.value, function ( val ) {
depth.far.value = val;
}, false, 1, 1200 );
addGui( 'nearColor', colorA.value.getHex(), function ( val ) {
colorA.value.setHex( val );
}, true );
addGui( 'farColor', colorB.value.getHex(), function ( val ) {
colorB.value.setHex( val );
}, true );
break;
case 'caustic':
// MATERIAL
mtl = new THREE.StandardNodeMaterial();
var hash2 = new THREE.FunctionNode( [
"vec2 hash2(vec2 p) {",
" return fract(sin(vec2(dot(p, vec2(123.4, 748.6)), dot(p, vec2(547.3, 659.3))))*5232.85324);",
"}"
].join( "\n" ) );
var voronoi = new THREE.FunctionNode( [
// Based off of iq's described here: http://www.iquilezles.org/www/articles/voronoili
"float voronoi(vec2 p, in float time) {",
" vec2 n = floor(p);",
" vec2 f = fract(p);",
" float md = 5.0;",
" vec2 m = vec2(0.0);",
" for (int i = -1; i <= 1; i++) {",
" for (int j = -1; j <= 1; j++) {",
" vec2 g = vec2(i, j);",
" vec2 o = hash2(n + g);",
" o = 0.5 + 0.5 * sin(time + 5.038 * o);",
" vec2 r = g + o - f;",
" float d = dot(r, r);",
" if (d < md) {",
" md = d;",
" m = n+g+o;",
" }",
" }",
" }",
" return md;",
"}"
].join( "\n" ), [ hash2 ] ); // define hash2 as dependencies
var voronoiLayers = new THREE.FunctionNode( [
// based on https://www.shadertoy.com/view/4tXSDf
"float voronoiLayers(vec2 p, in float time) {",
" float v = 0.0;",
" float a = 0.4;",
" for (int i = 0; i < 3; i++) {",
" v += voronoi(p, time) * a;",
" p *= 2.0;",
" a *= 0.5;",
" }",
" return v;",
"}"
].join( "\n" ), [ voronoi ] ); // define voronoi as dependencies
var time = new THREE.TimerNode();
var timeScale = new THREE.FloatNode( 2 );
// used for serialization only
time.name = "time";
timeScale.name = "speed";
var alpha = new THREE.FloatNode( 1 );
var scale = new THREE.FloatNode( .1 );
var intensity = new THREE.FloatNode( 1.5 );
var color = new THREE.ColorNode( 0xFFFFFF );
var colorA = new THREE.ColorNode( 0xFFFFFF );
var colorB = new THREE.ColorNode( 0x0054df );
var worldPos = new THREE.PositionNode( THREE.PositionNode.WORLD );
var worldPosTop = new THREE.SwitchNode( worldPos, 'xz' );
var worldNormal = new THREE.NormalNode( THREE.NormalNode.WORLD );
var mask = new THREE.SwitchNode( worldNormal, 'y' );
// clamp0at1
mask = new THREE.Math1Node( mask, THREE.Math1Node.SATURATE );
var timeOffset = new THREE.OperatorNode(
time,
timeScale,
THREE.OperatorNode.MUL
);
var uvPos = new THREE.OperatorNode(
worldPosTop,
scale,
THREE.OperatorNode.MUL
);
var voronoi = new THREE.FunctionCallNode( voronoiLayers );
voronoi.inputs.p = uvPos;
voronoi.inputs.time = timeOffset;
var maskCaustic = new THREE.OperatorNode(
alpha,
mask,
THREE.OperatorNode.MUL
);
var voronoiIntensity = new THREE.OperatorNode(
voronoi,
intensity,
THREE.OperatorNode.MUL
);
var voronoiColors = new THREE.Math3Node(
colorB,
colorA,
new THREE.Math1Node( voronoiIntensity, THREE.Math1Node.SATURATE ), // mix needs clamp
THREE.Math3Node.MIX
);
var caustic = new THREE.Math3Node(
color,
voronoiColors,
maskCaustic,
THREE.Math3Node.MIX
);
var causticLights = new THREE.OperatorNode(
voronoiIntensity,
maskCaustic,
THREE.OperatorNode.MUL
);
mtl.color = caustic;
mtl.ambient = causticLights;
// GUI
addGui( 'timeScale', timeScale.value, function ( val ) {
timeScale.value = val;
}, false, 0, 5 );
addGui( 'intensity', intensity.value, function ( val ) {
intensity.value = val;
}, false, 0, 3 );
addGui( 'scale', scale.value, function ( val ) {
scale.value = val;
}, false, 0, 1 );
addGui( 'alpha', alpha.value, function ( val ) {
alpha.value = val;
}, false, 0, 1 );
addGui( 'color', color.value.getHex(), function ( val ) {
color.value.setHex( val );
}, true );
addGui( 'colorA', colorA.value.getHex(), function ( val ) {
colorA.value.setHex( val );
}, true );
addGui( 'colorB', colorB.value.getHex(), function ( val ) {
colorB.value.setHex( val );
}, true );
break;
case 'soft-body':
// MATERIAL
move = true;
mtl = new THREE.StandardNodeMaterial();
var scale = new THREE.FloatNode( 2 );
var colorA = new THREE.ColorNode( 0xFF6633 );
var colorB = new THREE.ColorNode( 0x3366FF );
var pos = new THREE.PositionNode();
var posNorm = new THREE.Math1Node( pos, THREE.Math1Node.NORMALIZE );
var mask = new THREE.SwitchNode( posNorm, 'y' );
var velocity = new THREE.VelocityNode( mesh, {
type: 'elastic',
spring: .95,
damping: .95
} );
var velocityArea = new THREE.OperatorNode(
mask,
scale,
THREE.OperatorNode.MUL
);
var softVelocity = new THREE.OperatorNode(
velocity,
velocityArea,
THREE.OperatorNode.MUL
);
var softPosition = new THREE.OperatorNode(
new THREE.PositionNode(),
softVelocity,
THREE.OperatorNode.ADD
);
var colors = new THREE.Math3Node(
colorB,
colorA,
mask,
THREE.Math3Node.MIX
);
mtl.color = colors;
mtl.position = softPosition;
// GUI
addGui( 'spring', velocity.params.spring, function ( val ) {
velocity.params.spring = val;
}, false, 0, .95 );
addGui( 'damping', velocity.params.damping, function ( val ) {
velocity.params.damping = val;
}, false, 0, .95 );
addGui( 'scale', scale.value, function ( val ) {
scale.value = val;
}, false, 0, 3 );
addGui( 'softBody', colorA.value.getHex(), function ( val ) {
colorA.value.setHex( val );
}, true );
addGui( 'rigidBody', colorB.value.getHex(), function ( val ) {
colorB.value.setHex( val );
}, true );
break;
case 'plush':
// MATERIAL
mtl = new THREE.PhongNodeMaterial();
var color = new THREE.ColorNode( 0x8D8677 );
var mildness = new THREE.FloatNode( 1.6 );
var fur = new THREE.FloatNode( .5 );
var posDirection = new THREE.Math1Node( new THREE.PositionNode( THREE.PositionNode.VIEW ), THREE.Math1Node.NORMALIZE );
var norDirection = new THREE.Math1Node( new THREE.NormalNode(), THREE.Math1Node.NORMALIZE );
var viewZ = new THREE.Math2Node(
posDirection,
norDirection,
THREE.Math2Node.DOT
);
// without luma correction for now
var mildnessColor = new THREE.OperatorNode(
color,
mildness,
THREE.OperatorNode.MUL
);
var furScale = new THREE.OperatorNode(
viewZ,
fur,
THREE.OperatorNode.MUL
);
mtl.color = color;
mtl.normal = new THREE.NormalMapNode( new THREE.TextureNode( getTexture( "grassNormal" ) ) );
mtl.normal.scale = furScale;
mtl.environment = mildnessColor;
mtl.environmentAlpha = new THREE.Math1Node( viewZ, THREE.Math1Node.INVERT );
mtl.shininess = new THREE.FloatNode( 0 );
// GUI
addGui( 'color', color.value.getHex(), function ( val ) {
color.value.setHex( val );
}, true );
addGui( 'mildness', mildness.value, function ( val ) {
mildness.value = val;
}, false, 1, 2 );
addGui( 'fur', fur.value, function ( val ) {
fur.value = val;
}, false, 0, 2 );
break;
case 'skin':
case 'skin-phong':
// MATERIAL
mtl = name == 'skin' ? new THREE.StandardNodeMaterial() : new THREE.PhongNodeMaterial();
var skinColor = new THREE.ColorNode( 0xFFC495 );
var bloodColor = new THREE.ColorNode( 0x6b0602 );
var wrapLight = new THREE.FloatNode( 1.5 );
var wrapShadow = new THREE.FloatNode( 0 );
var directLight = new THREE.LightNode();
var lightLuminance = new THREE.LuminanceNode( directLight );
var lightWrap = new THREE.Math3Node(
wrapShadow,
wrapLight,
lightLuminance,
THREE.Math3Node.SMOOTHSTEP
);
var lightTransition = new THREE.OperatorNode(
lightWrap,
new THREE.ConstNode( THREE.ConstNode.PI2 ),
THREE.OperatorNode.MUL
);
var wrappedLight = new THREE.Math1Node( lightTransition, THREE.Math1Node.SIN );
var wrappedLightColor = new THREE.OperatorNode(
wrappedLight,
bloodColor,
THREE.OperatorNode.MUL
);
var bloodArea = new THREE.Math1Node( wrappedLightColor, THREE.Math1Node.SATURATE );
var totalLight = new THREE.OperatorNode(
directLight,
bloodArea,
THREE.OperatorNode.ADD
);
mtl.color = skinColor;
mtl.light = totalLight;
if ( name == 'skin' ) {
// StandardNodeMaterial
mtl.metalness = new THREE.FloatNode( 0 );
mtl.roughness = new THREE.FloatNode( 1 );
mtl.reflectivity = new THREE.FloatNode( 0 );
mtl.clearCoat = new THREE.FloatNode( .2 );
mtl.clearCoatRoughness = new THREE.FloatNode( .3 );
mtl.environment = new THREE.CubeTextureNode( cubemap );
} else {
// PhongNodeMaterial
mtl.specular = new THREE.ColorNode( 0x2f2e2d );
mtl.shininess = new THREE.FloatNode( 15 );
}
// GUI
addGui( 'skinColor', skinColor.value.getHex(), function ( val ) {
skinColor.value.setHex( val );
}, true );
addGui( 'bloodColor', bloodColor.value.getHex(), function ( val ) {
bloodColor.value.setHex( val );
}, true );
addGui( 'wrapLight', wrapLight.value, function ( val ) {
wrapLight.value = val;
}, false, 0, 3 );
addGui( 'wrapShadow', wrapShadow.value, function ( val ) {
wrapShadow.value = val;
}, false, - 1, 0 );
break;
case 'toon':
// MATERIAL
mtl = new THREE.PhongNodeMaterial();
var count = new THREE.FloatNode( 3.43 );
var sceneDirectLight = new THREE.LightNode();
var color = new THREE.ColorNode( 0xAABBFF );
var lineColor = new THREE.ColorNode( 0xFF0000 );
var lineSize = new THREE.FloatNode( 0.23 );
var lineInner = new THREE.FloatNode( 0 );
// CEL
var lightLuminance = new THREE.LuminanceNode( sceneDirectLight );
var preCelLight = new THREE.OperatorNode(
lightLuminance,
count,
THREE.OperatorNode.MUL
);
var celLight = new THREE.Math1Node(
preCelLight,
THREE.Math1Node.CEIL
);
var posCelLight = new THREE.OperatorNode(
celLight,
count,
THREE.OperatorNode.DIV
);
// LINE
var posDirection = new THREE.Math1Node( new THREE.PositionNode( THREE.PositionNode.VIEW ), THREE.Math1Node.NORMALIZE );
var norDirection = new THREE.Math1Node( new THREE.NormalNode(), THREE.Math1Node.NORMALIZE );
var viewZ = new THREE.Math2Node(
posDirection,
norDirection,
THREE.Math2Node.DOT
);
var lineOutside = new THREE.Math1Node(
viewZ,
THREE.Math1Node.ABS
);
var line = new THREE.OperatorNode(
lineOutside,
new THREE.FloatNode( 1 ),
THREE.OperatorNode.DIV
);
var lineScaled = new THREE.Math3Node(
line,
lineSize,
lineInner,
THREE.Math3Node.SMOOTHSTEP
);
var innerContour = new THREE.Math1Node( new THREE.Math1Node( lineScaled, THREE.Math1Node.SATURATE ), THREE.Math1Node.INVERT );
// APPLY
mtl.color = color;
mtl.light = posCelLight;
mtl.shininess = new THREE.FloatNode( 0 );
mtl.environment = lineColor;
mtl.environmentAlpha = innerContour;
// GUI
addGui( 'color', color.value.getHex(), function ( val ) {
color.value.setHex( val );
}, true );
addGui( 'lineColor', lineColor.value.getHex(), function ( val ) {
lineColor.value.setHex( val );
}, true );
addGui( 'count', count.value, function ( val ) {
count.value = val;
}, false, 1, 8 );
addGui( 'lineSize', lineSize.value, function ( val ) {
lineSize.value = val;
}, false, 0, 1 );
addGui( 'lineInner', lineInner.value, function ( val ) {
lineInner.value = val;
}, false, 0, 1 );
addGui( 'ignoreIndirectLight', false, function ( val ) {
mtl.ao = val ? new THREE.FloatNode() : undefined;
mtl.needsUpdate = true;
} );
break;
case 'custom-attribute':
// GEOMETRY
// add "position" buffer to "custom" attribute
teapot.attributes[ 'custom' ] = teapot.attributes[ 'position' ];
// MATERIAL
mtl = new THREE.PhongNodeMaterial();
mtl.color = new THREE.AttributeNode( "custom", 3 );
// or
//mtl.color = new THREE.AttributeNode( "custom", "vec3" );
break;
case 'expression':
// MATERIAL
mtl = new THREE.PhongNodeMaterial();
var speed = new THREE.FloatNode( .5 );
mtl.color = new THREE.ExpressionNode( "myCustomUv + (sin(time*speed)*.5) + (position * .05)", "vec3" );
mtl.color.keywords[ "speed" ] = speed;
mtl.position = new THREE.ExpressionNode( "mod(time*speed,1.0) < 0.5 ? position + (worldNormal*(1.0+sin(time*speed*1.0))*3.0) : position + sin( position.x * sin(time*speed*2.0))", "vec3" );
mtl.position.keywords[ "speed" ] = speed;
// add global keyword ( variable or const )
THREE.NodeLib.addKeyword( 'myCustomUv', function () {
return new THREE.ReflectNode();
} );
// GUI
addGui( 'speed', speed.value, function ( val ) {
speed.value = val;
}, false, 0, 1 );
break;
case 'reserved-keywords':
// MATERIAL
mtl = new THREE.PhongNodeMaterial();
var keywordsexample = new THREE.FunctionNode( [
// use "uv" reserved keyword
"vec4 keywordsexample( sampler2D texture ) {",
" return texture2D( texture, myUV ) + vec4( position * myAlpha, 0.0 );",
"}"
].join( "\n" ) );
// add local keyword ( const only )
keywordsexample.keywords[ "myAlpha" ] = new THREE.ConstNode( "float myAlpha .05" );
// add global keyword ( const only )
THREE.NodeLib.addKeyword( 'myUV', function () {
return new THREE.UVNode();
} );
// add global const or function
//THREE.NodeLib.add( new THREE.ConstNode("float MY_CONST .05") )
// reserved keywords
console.log( THREE.NodeLib.keywords );
// keywords conflit? use this to disable:
//blurtexture.useKeywords = false; // ( true is default )
mtl.color = new THREE.FunctionCallNode( keywordsexample, [ new THREE.TextureNode( getTexture( "brick" ) ) ] );
break;
case 'node-position':
// MATERIAL
var node = new THREE.PositionNode();
mtl = new THREE.PhongNodeMaterial();
mtl.color = node;
// GUI
addGui( 'scope', {
local: THREE.PositionNode.LOCAL,
world: THREE.PositionNode.WORLD,
view: THREE.PositionNode.VIEW
}, function ( val ) {
node.scope = val;
mtl.needsUpdate = true;
} );
break;
case 'node-normal':
// MATERIAL
var node = new THREE.NormalNode();
mtl = new THREE.PhongNodeMaterial();
mtl.color = node;
// GUI
addGui( 'scope', {
local: THREE.NormalNode.LOCAL,
world: THREE.NormalNode.WORLD,
view: THREE.NormalNode.VIEW
}, function ( val ) {
node.scope = val;
mtl.needsUpdate = true;
} );
break;
case 'varying':
// MATERIAL
mtl = new THREE.PhongNodeMaterial();
var varying = new THREE.VarNode( "vec3" );
varying.value = new THREE.NormalNode( THREE.NormalNode.VIEW );
// using BypassNode the NormalNode not apply the value in .position slot
// but set the NormalNode value in VarNode
// it can be useful to send values between vertex to fragment shader
// without affect vertex shader
mtl.position = new THREE.BypassNode( varying );
mtl.color = varying;
// you can also set a independent value in .position slot using BypassNode
// such this expression using ExpressionNode
mtl.position.value = new THREE.ExpressionNode( "position * ( .1 + abs( sin( time ) ) )", "vec3" );
break;
case 'void-function':
// MATERIAL
mtl = new THREE.PhongNodeMaterial();
var varying = new THREE.VarNode( "vec3" );
// VERTEX
var setMyVar = new THREE.FunctionNode( [
"void setMyVar( vec3 pos ) {",
// set "myVar" in vertex shader in this example,
// can be used in fragment shader too or in rest of the current shader
" myVar = pos;",
"}"
].join( "\n" ) );
// add keyword
setMyVar.keywords[ "myVar" ] = varying;
var position = new THREE.ExpressionNode( "setMyVar( position * .1 )", "vec3" );
position.includes = [ setMyVar ];
position.keywords[ "tex" ] = new THREE.TextureNode( getTexture( "brick" ) );
// use BypassNode to "void" functions
mtl.position = new THREE.BypassNode( position );
// FRAGMENT
var clipFromPos = new THREE.FunctionNode( [
"void clipFromPos( vec3 pos ) {",
" if ( pos.y < .0 ) discard;",
"}"
].join( "\n" ) );
var clipFromPosCall = new THREE.FunctionCallNode( clipFromPos, {
pos: varying
} );
mtl.color = new THREE.BypassNode( clipFromPosCall, varying );
break;
case 'conditional':
// MATERIAL
mtl = new THREE.PhongNodeMaterial();
var a = new THREE.FloatNode( 0 ),
b = new THREE.FloatNode( 0 ),
ifNode = new THREE.ColorNode( 0x0000FF ),
elseNode = new THREE.ColorNode( 0xFF0000 );
var cond = new THREE.CondNode( a, b, ifNode, elseNode, THREE.CondNode.EQUAL );
mtl.color = cond;
// GUI
addGui( 'a', a.value, function ( val ) {
a.value = val;
}, false, 0, 1 );
addGui( 'b', b.value, function ( val ) {
b.value = val;
}, false, 0, 1 );
addGui( 'a condition b', {
EQUAL: THREE.CondNode.EQUAL,
NOT_EQUAL: THREE.CondNode.NOT_EQUAL,
GREATER: THREE.CondNode.GREATER,
GREATER_EQUAL: THREE.CondNode.GREATER_EQUAL,
LESS: THREE.CondNode.LESS,
LESS_EQUAL: THREE.CondNode.LESS_EQUAL
}, function ( val ) {
cond.op = val;
mtl.needsUpdate = true;
} );
addGui( 'if color', ifNode.value.getHex(), function ( val ) {
ifNode.value.setHex( val );
}, true );
addGui( 'else color', elseNode.value.getHex(), function ( val ) {
elseNode.value.setHex( val );
}, true );
break;
case 'rtt':
// MATERIAL
mtl = new THREE.PhongNodeMaterial();
var uvTransform = new THREE.UVTransformNode(),
checker = new THREE.CheckerNode( uvTransform );
uvTransform.setUvTransform( 0, 0, 2, 2, 0 );
var rtt = new THREE.RTTNode( 512, 512, checker ),
bumpMap = new THREE.BumpMapNode( rtt );
bumpMap.scale.value = .1;
mtl.color = checker;
mtl.normal = bumpMap;
// GUI
addGui( 'bump', bumpMap.scale.value, function ( val ) {
bumpMap.scale.value = val;
}, false, - .5, .5 );
addGui( 'scale', 2, function ( val ) {
uvTransform.setUvTransform( 0, 0, val, val, 0 );
}, false, 0, 8 );
addGui( 'ignoreColor', false, function ( val ) {
mtl.color = val ? new THREE.ColorNode( 0xFFFFFF ) : checker;
mtl.needsUpdate = true;
} );
break;
case 'temporal-blur':
// MATERIAL
mtl = new THREE.PhongNodeMaterial();
var texture = new THREE.TextureNode( getTexture( "brick" ) );
var rttStore = new THREE.RTTNode( 512, 512, texture );
var blur = new THREE.BlurNode( rttStore );
var timer = new THREE.TimerNode( .01, THREE.TimerNode.LOCAL );
var color = new THREE.Math3Node(
rttStore,
blur,
new THREE.FloatNode( .6 ),
THREE.Math3Node.MIX
);
blur.horizontal = blur.vertical = timer;
var rttSave = new THREE.RTTNode( 512, 512, color );
rttSave.saveTo = rttStore;
mtl.color = rttSave;
// GUI
addGui( 'click to reset', false, function () {
// render a single time
rttStore.render = true;
// reset time blur
timer.value = 0;
} );
break;
case 'readonly':
// MATERIAL
mtl = new THREE.PhongNodeMaterial();
mtl.color = new THREE.ColorNode( 0xFFFFFF );
mtl.specular = new THREE.FloatNode( .5 );
mtl.shininess = new THREE.FloatNode( 15 );
// not use "uniform" input ( for optimization )
// instead use explicit declaration, for example:
// vec3( 1.0, 1.0, 1.0 ) instead "uniform vec3"
// if readonly is true not allow change the value after build the shader material
mtl.color.readonly = mtl.specular.readonly = mtl.shininess.readonly = true;
break;
case 'triangle-blur':
// MATERIAL
mtl = new THREE.PhongNodeMaterial();
var delta = new THREE.Vector2Node( .5, .25 );
var alpha = new THREE.FloatNode( 1 );
var blurtexture = new THREE.FunctionNode( [
// Reference: TriangleBlurShader.js
"vec4 blurtexture(sampler2D texture, vec2 uv, vec2 delta) {",
" vec4 color = vec4( 0.0 );",
" float total = 0.0;",
// randomize the lookup values to hide the fixed number of samples
" float offset = rand( uv );",
" for ( float t = -BLUR_ITERATIONS; t <= BLUR_ITERATIONS; t ++ ) {",
" float percent = ( t + offset - 0.5 ) / BLUR_ITERATIONS;",
" float weight = 1.0 - abs( percent );",
" color += texture2D( texture, uv + delta * percent ) * weight;",
" total += weight;",
" }",
" return color / total;",
"}"
].join( "\n" ), [ new THREE.ConstNode( "float BLUR_ITERATIONS 10.0" ) ] );
var blurredTexture = new THREE.FunctionCallNode( blurtexture, {
texture: new THREE.TextureNode( getTexture( "brick" ) ),
delta: delta,
uv: new THREE.UVNode()
} );
var color = new THREE.Math3Node(
new THREE.TextureNode( getTexture( "brick" ) ),
blurredTexture,
alpha,
THREE.Math3Node.MIX
);
mtl.color = color;
// GUI
addGui( 'alpha', alpha.value, function ( val ) {
alpha.value = val;
}, false, 0, 1 );
addGui( 'deltaX', delta.x, function ( val ) {
delta.x = val;
}, false, 0, 1 );
addGui( 'deltaY', delta.x, function ( val ) {
delta.y = val;
}, false, 0, 1 );
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
mtl = new THREE.PhongNodeMaterial();
var time = new THREE.TimerNode();
var speed = new THREE.FloatNode( .5 );
var color = new THREE.ColorNode( 0x98ff00 );
var timeSpeed = new THREE.OperatorNode(
time,
speed,
THREE.OperatorNode.MUL
);
var sinCycleInSecs = new THREE.OperatorNode(
timeSpeed,
new THREE.ConstNode( THREE.ConstNode.PI2 ),
THREE.OperatorNode.MUL
);
var cycle = new THREE.Math1Node( sinCycleInSecs, THREE.Math1Node.SIN );
var cycleColor = new THREE.OperatorNode(
cycle,
color,
THREE.OperatorNode.MUL
);
var cos = new THREE.Math1Node( cycleColor, THREE.Math1Node.SIN );
mtl.color = new THREE.ColorNode( 0 );
mtl.emissive = cos;
// GUI
addGui( 'speed', speed.value, function ( val ) {
speed.value = val;
}, false, 0, 3 );
break;
case 'sss':
case 'translucent':
// DISTANCE FORMULA
var modelPos = new THREE.Vector3Node();
var viewPos = new THREE.PositionNode( THREE.PositionNode.VIEW );
var cameraPosition = new THREE.CameraNode( THREE.CameraNode.POSITION );
var cameraDistance = new THREE.Math2Node(
modelPos,
cameraPosition,
THREE.Math2Node.DISTANCE
);
var viewPosZ = new THREE.SwitchNode( viewPos, 'z' );
var distance = new THREE.OperatorNode(
cameraDistance,
viewPosZ,
THREE.OperatorNode.SUB
);
var distanceRadius = new THREE.OperatorNode(
distance,
new THREE.FloatNode( 70 ),
THREE.OperatorNode.ADD
);
var objectDepth = new THREE.Math3Node(
distanceRadius,
new THREE.FloatNode( 0 ),
new THREE.FloatNode( 50 ),
THREE.Math3Node.SMOOTHSTEP
);
// RTT ( get back distance )
rtTexture = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBFormat } );
library[ rtTexture.texture.uuid ] = rtTexture.texture;
var distanceMtl = new THREE.PhongNodeMaterial();
distanceMtl.environment = objectDepth;
distanceMtl.side = THREE.BackSide;
rtMaterial = distanceMtl;
// MATERIAL
mtl = new THREE.StandardNodeMaterial();
var backSideDepth = new THREE.TextureNode( rtTexture.texture, new THREE.ScreenUVNode() );
var difference = new THREE.OperatorNode(
objectDepth,
backSideDepth,
THREE.OperatorNode.SUB
);
var sss = new THREE.Math3Node(
new THREE.FloatNode( - .1 ),
new THREE.FloatNode( .5 ),
difference,
THREE.Math3Node.SMOOTHSTEP
);
var sssAlpha = new THREE.Math1Node( sss, THREE.Math1Node.SATURATE );
var frontColor, backColor;
if ( name == 'sss' ) {
var sssOut = new THREE.Math2Node(
objectDepth,
sssAlpha,
THREE.Math2Node.MIN
);
frontColor = new THREE.ColorNode( 0xd4cfbb );
backColor = new THREE.ColorNode( 0xd04327 );
var color = new THREE.Math3Node(
backColor,
frontColor,
sssOut,
THREE.Math3Node.MIX
);
var light = new THREE.OperatorNode(
new THREE.LightNode(),
color,
THREE.OperatorNode.ADD
);
mtl.color = frontColor;
mtl.roughness = new THREE.FloatNode( .1 );
mtl.metalness = new THREE.FloatNode( .5 );
mtl.light = light;
mtl.environment = color;
} else {
frontColor = new THREE.ColorNode( 0xd04327 );
backColor = new THREE.ColorNode( 0x1a0e14 );
var color = new THREE.Math3Node(
frontColor,
backColor,
sssAlpha,
THREE.Math3Node.MIX
);
var light = new THREE.OperatorNode(
new THREE.LightNode(),
color,
THREE.OperatorNode.ADD
);
mtl.color = new THREE.ColorNode( 0xffffff );
mtl.roughness = new THREE.FloatNode( .1 );
mtl.metalness = new THREE.FloatNode( .5 );
mtl.light = light;
mtl.environment = color;
}
// GUI
addGui( 'frontColor', frontColor.value.getHex(), function ( val ) {
frontColor.value.setHex( val );
}, true );
addGui( 'backColor', backColor.value.getHex(), function ( val ) {
backColor.value.setHex( val );
}, true );
addGui( 'area', sss.b.value, function ( val ) {
sss.b.value = val;
}, false, 0, 1 );
break;
}
// set material
mtl.side = THREE.DoubleSide;
mesh.material = mtl;
}
function onWindowResize() {
var width = window.innerWidth, height = window.innerHeight;
camera.aspect = width / height;
camera.updateProjectionMatrix();
renderer.setSize( width, height );
if ( rtTexture ) rtTexture.setSize( width, height );
}
document.getElementById( 'serialize' ).addEventListener( 'click', function () {
if ( serialized ) reset();
else serialize();
serialized = ! serialized;
} );
function reset() {
updateMaterial();
// gui
var div = document.getElementById( 'serialize' );
div.textContent = "Serialize and apply";
}
function serialize() {
var json = mesh.material.toJSON();
// replace uuid to url (facilitates the load of textures using url otherside uuid) e.g:
var cloud = getTexture( "cloud" );
THREE.NodeMaterialLoaderUtils.replaceUUID( json, cloud, "cloud" );
library[ "cloud" ] = cloud;
// --
var jsonStr = JSON.stringify( json );
console.log( jsonStr );
var loader = new THREE.NodeMaterialLoader( null, library ),
material = loader.parse( json );
mesh.material.dispose();
mesh.material = material;
// gui
var div = document.getElementById( 'serialize' );
div.textContent = "Click to reset - JSON Generate: " + ( jsonStr.length / 1024 ).toFixed( 3 ) + "kB";
if ( gui ) gui.destroy();
gui = null;
}
function animate() {
var delta = clock.getDelta();
if ( move ) {
var time = Date.now() * 0.005;
mesh.position.z = Math.cos( time ) * 10;
mesh.position.y = Math.sin( time ) * 10;
} else {
mesh.position.z = mesh.position.y = 0;
}
//mesh.rotation.z += .01;
// update material animation and/or gpu calcs (pre-renderer)
frame.update( delta ).setRenderer( renderer );
if ( mesh.material instanceof THREE.NodeMaterial ) {
frame.updateNode( mesh.material );
}
// render to texture for sss/translucent material only
if ( rtTexture ) {
scene.overrideMaterial = rtMaterial;
renderer.render( scene, camera, rtTexture, true );
scene.overrideMaterial = null;
}
renderer.render( scene, camera );
requestAnimationFrame( animate );
}
</script>
</body>
</html>