You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
3024 lines
70 KiB
3024 lines
70 KiB
<!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 / dissolve': 'dissolve',
|
|
'adv / dissolve-fire': 'dissolve-fire',
|
|
'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 / label': 'label',
|
|
'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,
|
|
defaultSide = THREE.DoubleSide,
|
|
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 'dissolve':
|
|
|
|
// MATERIAL
|
|
|
|
mtl = new THREE.StandardNodeMaterial();
|
|
|
|
var color = new THREE.ColorNode( 0xEEEEEE );
|
|
var borderColor = new THREE.ColorNode( 0x0054df );
|
|
var threshold = new THREE.FloatNode( .1 );
|
|
var borderSize = new THREE.FloatNode( .2 );
|
|
|
|
var tex = new THREE.TextureNode( getTexture( "cloud" ) );
|
|
var texArea = new THREE.SwitchNode( tex, 'w' );
|
|
|
|
var thresholdBorder = new THREE.Math3Node(
|
|
new THREE.OperatorNode( threshold, borderSize, THREE.OperatorNode.ADD ),
|
|
threshold,
|
|
texArea,
|
|
THREE.Math3Node.SMOOTHSTEP
|
|
);
|
|
|
|
var thresholdEmissive = new THREE.OperatorNode(
|
|
borderColor,
|
|
thresholdBorder,
|
|
THREE.OperatorNode.MUL
|
|
);
|
|
|
|
// APPLY
|
|
|
|
mtl.color = color;
|
|
mtl.emissive = thresholdEmissive;
|
|
mtl.mask = new THREE.CondNode(
|
|
texArea, // a: value
|
|
threshold, // b: value
|
|
THREE.CondNode.GREATER // condition
|
|
);
|
|
|
|
// GUI
|
|
|
|
addGui( 'threshold', threshold.value, function ( val ) {
|
|
|
|
threshold.value = val;
|
|
|
|
}, false, - .3, 1.3 );
|
|
|
|
addGui( 'borderSize', borderSize.value, function ( val ) {
|
|
|
|
borderSize.value = val;
|
|
|
|
}, false, 0, .5 );
|
|
|
|
addGui( 'color', color.value.getHex(), function ( val ) {
|
|
|
|
color.value.setHex( val );
|
|
|
|
}, true );
|
|
|
|
addGui( 'borderColor', borderColor.value.getHex(), function ( val ) {
|
|
|
|
borderColor.value.setHex( val );
|
|
|
|
}, true );
|
|
|
|
break;
|
|
|
|
case 'dissolve-fire':
|
|
|
|
// MATERIAL
|
|
|
|
mtl = new THREE.StandardNodeMaterial();
|
|
|
|
var color = new THREE.ColorNode( 0xEEEEEE );
|
|
var fireStartColor = new THREE.ColorNode( 0xF7CA78 );
|
|
var fireEndColor = new THREE.ColorNode( 0xFF0000 );
|
|
var burnedColor = new THREE.ColorNode( 0x000000 );
|
|
var threshold = new THREE.FloatNode( .1 );
|
|
var fireSize = new THREE.FloatNode( .16 );
|
|
var burnedSize = new THREE.FloatNode( .5 );
|
|
var timer = new THREE.TimerNode( 0.8 );
|
|
|
|
var sinCycleInSecs = new THREE.OperatorNode(
|
|
timer,
|
|
new THREE.ConstNode( THREE.ConstNode.PI2 ),
|
|
THREE.OperatorNode.MUL
|
|
);
|
|
|
|
var cycle = new THREE.Math1Node( sinCycleInSecs, THREE.Math1Node.SIN );
|
|
|
|
// round sin to 0 at 1
|
|
cycle = new THREE.OperatorNode( cycle, new THREE.FloatNode( 1 ), THREE.OperatorNode.ADD );
|
|
cycle = new THREE.OperatorNode( cycle, new THREE.FloatNode( 2 ), THREE.OperatorNode.DIV );
|
|
|
|
// offset to +.9
|
|
cycle = new THREE.OperatorNode( cycle, new THREE.FloatNode( .9 ), THREE.OperatorNode.ADD );
|
|
|
|
var tex = new THREE.TextureNode( getTexture( "cloud" ) );
|
|
var texArea = new THREE.SwitchNode( tex, 'w' );
|
|
|
|
var thresholdBorder = new THREE.Math3Node(
|
|
new THREE.OperatorNode( threshold, fireSize, THREE.OperatorNode.ADD ),
|
|
threshold,
|
|
texArea,
|
|
THREE.Math3Node.SMOOTHSTEP
|
|
);
|
|
|
|
var fireStartAnimatedColor = new THREE.ColorAdjustmentNode(
|
|
fireStartColor,
|
|
cycle,
|
|
THREE.ColorAdjustmentNode.SATURATION
|
|
);
|
|
|
|
var fireEndAnimatedColor = new THREE.ColorAdjustmentNode(
|
|
fireEndColor,
|
|
cycle,
|
|
THREE.ColorAdjustmentNode.SATURATION
|
|
);
|
|
|
|
var fireColor = new THREE.Math3Node(
|
|
fireEndAnimatedColor,
|
|
fireStartAnimatedColor,
|
|
thresholdBorder,
|
|
THREE.Math3Node.MIX
|
|
);
|
|
|
|
var thresholdBurnedBorder = new THREE.Math3Node(
|
|
new THREE.OperatorNode( threshold, burnedSize, THREE.OperatorNode.ADD ),
|
|
threshold,
|
|
texArea,
|
|
THREE.Math3Node.SMOOTHSTEP
|
|
);
|
|
|
|
var fireEmissive = new THREE.OperatorNode(
|
|
fireColor,
|
|
thresholdBorder,
|
|
THREE.OperatorNode.MUL
|
|
);
|
|
|
|
var burnedResultColor = new THREE.Math3Node(
|
|
color,
|
|
burnedColor,
|
|
thresholdBurnedBorder,
|
|
THREE.Math3Node.MIX
|
|
);
|
|
|
|
// APPLY
|
|
|
|
mtl.color = burnedResultColor;
|
|
mtl.emissive = fireEmissive;
|
|
mtl.mask = new THREE.CondNode(
|
|
texArea, // a: value
|
|
threshold, // b: value
|
|
THREE.CondNode.GREATER // condition
|
|
);
|
|
|
|
// GUI
|
|
|
|
addGui( 'threshold', threshold.value, function ( val ) {
|
|
|
|
threshold.value = val;
|
|
|
|
}, false, - .5, 1.5 );
|
|
|
|
addGui( 'fireSize', fireSize.value, function ( val ) {
|
|
|
|
fireSize.value = val;
|
|
|
|
}, false, 0, .5 );
|
|
|
|
addGui( 'burnedSize', burnedSize.value, function ( val ) {
|
|
|
|
burnedSize.value = val;
|
|
|
|
}, false, 0, 1 );
|
|
|
|
addGui( 'color', color.value.getHex(), function ( val ) {
|
|
|
|
color.value.setHex( val );
|
|
|
|
}, true );
|
|
|
|
addGui( 'fireStartColor', fireStartColor.value.getHex(), function ( val ) {
|
|
|
|
fireStartColor.value.setHex( val );
|
|
|
|
}, true );
|
|
|
|
addGui( 'fireEndColor', fireEndColor.value.getHex(), function ( val ) {
|
|
|
|
fireEndColor.value.setHex( val );
|
|
|
|
}, true );
|
|
|
|
addGui( 'burnedColor', burnedColor.value.getHex(), function ( val ) {
|
|
|
|
burnedColor.value.setHex( val );
|
|
|
|
}, true );
|
|
|
|
addGui( 'timeScale', timer.scale, function ( val ) {
|
|
|
|
timer.scale = val;
|
|
|
|
}, false, 0, 2 );
|
|
|
|
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;
|
|
|
|
defaultSide = THREE.FrontSide;
|
|
|
|
// 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, THREE.CondNode.EQUAL, ifNode, elseNode );
|
|
|
|
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();
|
|
|
|
// 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 = new THREE.ColorNode( 0xFFFFFF ).setReadonly( true );
|
|
mtl.specular = new THREE.FloatNode( .5 ).setReadonly( true );
|
|
mtl.shininess = new THREE.FloatNode( 15 ).setReadonly( true );
|
|
|
|
break;
|
|
|
|
case 'label':
|
|
|
|
// MATERIAL
|
|
|
|
mtl = new THREE.PhongNodeMaterial();
|
|
|
|
// label can be useful for finding the nodes as variables in debug level
|
|
// but this always force the creation of a variable
|
|
// same as the code can be writed in the same line (inline)
|
|
// for optimization this is not recommended
|
|
|
|
var colorInput = new THREE.ColorNode( 0xFFFFFF ).setLabel( "colorInput" );
|
|
var specularInput = new THREE.FloatNode( .5 ).setLabel( "specularInput" );
|
|
|
|
var colorMix = new THREE.OperatorNode(
|
|
colorInput,
|
|
new THREE.ColorNode( 0x6495ED ).setReadonly( true ),
|
|
THREE.OperatorNode.MUL
|
|
).setLabel( "colorMix" );
|
|
|
|
mtl.color = colorMix;
|
|
mtl.specular = specularInput;
|
|
|
|
// default: without use label
|
|
// this is optimized writed the code in a single line (inline)
|
|
// for the reason that this node is used only once in this shader program
|
|
mtl.shininess = new THREE.OperatorNode(
|
|
new THREE.FloatNode( 10 ).setReadonly( true ),
|
|
new THREE.FloatNode( 5 ).setReadonly( true ),
|
|
THREE.OperatorNode.ADD
|
|
);
|
|
|
|
mtl.build();
|
|
|
|
// show names glsl fragment shader
|
|
// open console e find using CTRL+F "colorMix" for example
|
|
|
|
console.log( mtl.fragmentShader );
|
|
|
|
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 = defaultSide;
|
|
|
|
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.setRenderTarget( rtTexture );
|
|
renderer.clear();
|
|
renderer.render( scene, camera );
|
|
|
|
scene.overrideMaterial = null;
|
|
|
|
}
|
|
|
|
renderer.setRenderTarget( null );
|
|
renderer.render( scene, camera );
|
|
|
|
requestAnimationFrame( animate );
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|