|
@@ -31,7 +31,7 @@
|
|
<div id="container"></div>
|
|
<div id="container"></div>
|
|
<div id="info">
|
|
<div id="info">
|
|
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - Node-Based Material</br>
|
|
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - Node-Based Material</br>
|
|
- <a id="serialize" onclick="toggleSerialize()" href="javascript:void(0);">Serialize and apply</a>
|
|
|
|
|
|
+ <a id="serialize" href="javascript:void(0);">Serialize and apply</a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script src="../build/three.js"></script>
|
|
<script src="../build/three.js"></script>
|
|
@@ -39,77 +39,11 @@
|
|
<script src='js/geometries/TeapotBufferGeometry.js'></script>
|
|
<script src='js/geometries/TeapotBufferGeometry.js'></script>
|
|
<script src="js/controls/OrbitControls.js"></script>
|
|
<script src="js/controls/OrbitControls.js"></script>
|
|
<script src="js/libs/dat.gui.min.js"></script>
|
|
<script src="js/libs/dat.gui.min.js"></script>
|
|
|
|
+
|
|
|
|
+ <script type="module">
|
|
|
|
|
|
- <!-- NodeLibrary -->
|
|
|
|
- <script src="js/nodes/GLNode.js"></script>
|
|
|
|
- <script src="js/nodes/RawNode.js"></script>
|
|
|
|
- <script src="js/nodes/TempNode.js"></script>
|
|
|
|
- <script src="js/nodes/InputNode.js"></script>
|
|
|
|
- <script src="js/nodes/ConstNode.js"></script>
|
|
|
|
- <script src="js/nodes/VarNode.js"></script>
|
|
|
|
- <script src="js/nodes/FunctionNode.js"></script>
|
|
|
|
- <script src="js/nodes/FunctionCallNode.js"></script>
|
|
|
|
- <script src="js/nodes/AttributeNode.js"></script>
|
|
|
|
- <script src="js/nodes/NodeUniform.js"></script>
|
|
|
|
- <script src="js/nodes/NodeBuilder.js"></script>
|
|
|
|
- <script src="js/nodes/NodeLib.js"></script>
|
|
|
|
- <script src="js/nodes/NodeFrame.js"></script>
|
|
|
|
- <script src="js/nodes/NodeMaterial.js"></script>
|
|
|
|
-
|
|
|
|
- <!-- Accessors -->
|
|
|
|
- <script src="js/nodes/accessors/PositionNode.js"></script>
|
|
|
|
- <script src="js/nodes/accessors/NormalNode.js"></script>
|
|
|
|
- <script src="js/nodes/accessors/UVNode.js"></script>
|
|
|
|
- <script src="js/nodes/accessors/ScreenUVNode.js"></script>
|
|
|
|
- <script src="js/nodes/accessors/ColorsNode.js"></script>
|
|
|
|
- <script src="js/nodes/accessors/CameraNode.js"></script>
|
|
|
|
- <script src="js/nodes/accessors/ReflectNode.js"></script>
|
|
|
|
- <script src="js/nodes/accessors/LightNode.js"></script>
|
|
|
|
-
|
|
|
|
- <!-- Inputs -->
|
|
|
|
- <script src="js/nodes/inputs/IntNode.js"></script>
|
|
|
|
- <script src="js/nodes/inputs/FloatNode.js"></script>
|
|
|
|
- <script src="js/nodes/inputs/ColorNode.js"></script>
|
|
|
|
- <script src="js/nodes/inputs/Vector2Node.js"></script>
|
|
|
|
- <script src="js/nodes/inputs/Vector3Node.js"></script>
|
|
|
|
- <script src="js/nodes/inputs/Vector4Node.js"></script>
|
|
|
|
- <script src="js/nodes/inputs/TextureNode.js"></script>
|
|
|
|
- <script src="js/nodes/inputs/Matrix3Node.js"></script>
|
|
|
|
- <script src="js/nodes/inputs/Matrix4Node.js"></script>
|
|
|
|
- <script src="js/nodes/inputs/CubeTextureNode.js"></script>
|
|
|
|
-
|
|
|
|
- <!-- Math -->
|
|
|
|
- <script src="js/nodes/math/Math1Node.js"></script>
|
|
|
|
- <script src="js/nodes/math/Math2Node.js"></script>
|
|
|
|
- <script src="js/nodes/math/Math3Node.js"></script>
|
|
|
|
- <script src="js/nodes/math/OperatorNode.js"></script>
|
|
|
|
-
|
|
|
|
- <!-- Utils -->
|
|
|
|
- <script src="js/nodes/utils/SwitchNode.js"></script>
|
|
|
|
- <script src="js/nodes/utils/JoinNode.js"></script>
|
|
|
|
- <script src="js/nodes/utils/TimerNode.js"></script>
|
|
|
|
- <script src="js/nodes/utils/RoughnessToBlinnExponentNode.js"></script>
|
|
|
|
- <script src="js/nodes/utils/VelocityNode.js"></script>
|
|
|
|
- <script src="js/nodes/utils/LuminanceNode.js"></script>
|
|
|
|
- <script src="js/nodes/utils/ColorAdjustmentNode.js"></script>
|
|
|
|
- <script src="js/nodes/utils/NoiseNode.js"></script>
|
|
|
|
- <script src="js/nodes/utils/ResolutionNode.js"></script>
|
|
|
|
- <script src="js/nodes/utils/BumpNode.js"></script>
|
|
|
|
- <script src="js/nodes/utils/BlurNode.js"></script>
|
|
|
|
- <script src="js/nodes/utils/UVTransformNode.js"></script>
|
|
|
|
-
|
|
|
|
- <!-- Phong Material -->
|
|
|
|
- <script src="js/nodes/materials/PhongNode.js"></script>
|
|
|
|
- <script src="js/nodes/materials/PhongNodeMaterial.js"></script>
|
|
|
|
-
|
|
|
|
- <!-- Standard Material -->
|
|
|
|
- <script src="js/nodes/materials/StandardNode.js"></script>
|
|
|
|
- <script src="js/nodes/materials/StandardNodeMaterial.js"></script>
|
|
|
|
-
|
|
|
|
- <!-- NodeMaterial Loader -->
|
|
|
|
- <script src="js/loaders/NodeMaterialLoader.js"></script>
|
|
|
|
-
|
|
|
|
- <script>
|
|
|
|
|
|
+ import './js/nodes/THREE.Nodes.js';
|
|
|
|
+ import './js/loaders/NodeMaterialLoader.js';
|
|
|
|
|
|
var container = document.getElementById( 'container' );
|
|
var container = document.getElementById( 'container' );
|
|
|
|
|
|
@@ -131,7 +65,7 @@
|
|
spherical: { url: 'textures/envmap.png' }
|
|
spherical: { url: 'textures/envmap.png' }
|
|
};
|
|
};
|
|
|
|
|
|
- var param = { example: 'standard' };
|
|
|
|
|
|
+ var param = { example: new URL(window.location.href).searchParams.get('e') || 'mesh-standard' };
|
|
|
|
|
|
function getTexture( name ) {
|
|
function getTexture( name ) {
|
|
|
|
|
|
@@ -227,6 +161,7 @@
|
|
gui = new dat.GUI();
|
|
gui = new dat.GUI();
|
|
|
|
|
|
var example = gui.add( param, 'example', {
|
|
var example = gui.add( param, 'example', {
|
|
|
|
+ 'basic / mesh-standard': 'mesh-standard',
|
|
'basic / standard': 'standard',
|
|
'basic / standard': 'standard',
|
|
'basic / physical': 'physical',
|
|
'basic / physical': 'physical',
|
|
'basic / phong': 'phong',
|
|
'basic / phong': 'phong',
|
|
@@ -257,6 +192,7 @@
|
|
'misc / firefly': 'firefly',
|
|
'misc / firefly': 'firefly',
|
|
'misc / reserved-keywords': 'reserved-keywords',
|
|
'misc / reserved-keywords': 'reserved-keywords',
|
|
'misc / varying': 'varying',
|
|
'misc / varying': 'varying',
|
|
|
|
+ 'misc / void-function': 'void-function',
|
|
'misc / readonly': 'readonly',
|
|
'misc / readonly': 'readonly',
|
|
'misc / custom-attribute': 'custom-attribute'
|
|
'misc / custom-attribute': 'custom-attribute'
|
|
} ).onFinishChange( function () {
|
|
} ).onFinishChange( function () {
|
|
@@ -315,7 +251,7 @@
|
|
|
|
|
|
if ( rtTexture ) {
|
|
if ( rtTexture ) {
|
|
|
|
|
|
- delete library[ rtTexture.uuid ];
|
|
|
|
|
|
+ delete library[ rtTexture.texture.uuid ];
|
|
|
|
|
|
rtTexture.dispose();
|
|
rtTexture.dispose();
|
|
rtTexture = null;
|
|
rtTexture = null;
|
|
@@ -346,8 +282,7 @@
|
|
//mtl.alpha = // opacity (float)
|
|
//mtl.alpha = // opacity (float)
|
|
//mtl.specular = // specular color (vec3)
|
|
//mtl.specular = // specular color (vec3)
|
|
//mtl.shininess = // shininess (float)
|
|
//mtl.shininess = // shininess (float)
|
|
- //mtl.normal = // normalmap (vec3)
|
|
|
|
- //mtl.normalScale = // normalmap scale (vec2)
|
|
|
|
|
|
+ //mtl.normal = // normal (vec3)
|
|
//mtl.emissive = // emissive color (vec3)
|
|
//mtl.emissive = // emissive color (vec3)
|
|
//mtl.ambient = // ambient color (vec3)
|
|
//mtl.ambient = // ambient color (vec3)
|
|
//mtl.shadow = // shadowmap (vec3)
|
|
//mtl.shadow = // shadowmap (vec3)
|
|
@@ -365,8 +300,8 @@
|
|
mtl.shininess = new THREE.FloatNode( 15 );
|
|
mtl.shininess = new THREE.FloatNode( 15 );
|
|
mtl.environment = new THREE.CubeTextureNode( cubemap );
|
|
mtl.environment = new THREE.CubeTextureNode( cubemap );
|
|
mtl.environmentAlpha = mask;
|
|
mtl.environmentAlpha = mask;
|
|
- mtl.normal = new THREE.TextureNode( getTexture( "grassNormal" ) );
|
|
|
|
- mtl.normalScale = new THREE.Math1Node( mask, THREE.Math1Node.INVERT );
|
|
|
|
|
|
+ mtl.normal = new THREE.NormalMapNode( new THREE.TextureNode( getTexture( "grassNormal" ) ) );
|
|
|
|
+ mtl.normal.scale = new THREE.Math1Node( mask, THREE.Math1Node.INVERT );
|
|
|
|
|
|
break;
|
|
break;
|
|
|
|
|
|
@@ -380,8 +315,7 @@
|
|
//mtl.alpha = // opacity (float)
|
|
//mtl.alpha = // opacity (float)
|
|
//mtl.roughness = // roughness (float)
|
|
//mtl.roughness = // roughness (float)
|
|
//mtl.metalness = // metalness (float)
|
|
//mtl.metalness = // metalness (float)
|
|
- //mtl.normal = // normalmap (vec3)
|
|
|
|
- //mtl.normalScale = // normalmap scale (vec2)
|
|
|
|
|
|
+ //mtl.normal = // normal (vec3)
|
|
//mtl.emissive = // emissive color (vec3)
|
|
//mtl.emissive = // emissive color (vec3)
|
|
//mtl.ambient = // ambient color (vec3)
|
|
//mtl.ambient = // ambient color (vec3)
|
|
//mtl.shadow = // shadowmap (vec3)
|
|
//mtl.shadow = // shadowmap (vec3)
|
|
@@ -424,8 +358,8 @@
|
|
mtl.roughness = roughness;
|
|
mtl.roughness = roughness;
|
|
mtl.metalness = metalness;
|
|
mtl.metalness = metalness;
|
|
mtl.environment = new THREE.CubeTextureNode( cubemap );
|
|
mtl.environment = new THREE.CubeTextureNode( cubemap );
|
|
- mtl.normal = new THREE.TextureNode( getTexture( "grassNormal" ) );
|
|
|
|
- mtl.normalScale = normalMask;
|
|
|
|
|
|
+ mtl.normal = new THREE.NormalMapNode( new THREE.TextureNode( getTexture( "grassNormal" ) ) );
|
|
|
|
+ mtl.normal.scale = normalMask;
|
|
|
|
|
|
// GUI
|
|
// GUI
|
|
|
|
|
|
@@ -467,6 +401,82 @@
|
|
|
|
|
|
break;
|
|
break;
|
|
|
|
|
|
|
|
+ case 'mesh-standard':
|
|
|
|
+
|
|
|
|
+ // MATERIAL
|
|
|
|
+
|
|
|
|
+ var sataturation = new THREE.FloatNode( 1 );
|
|
|
|
+
|
|
|
|
+ function updateMaterial( useNodeMaterial ) {
|
|
|
|
+
|
|
|
|
+ var oldMaterial = mtl;
|
|
|
|
+
|
|
|
|
+ if (oldMaterial) oldMaterial.dispose();
|
|
|
|
+
|
|
|
|
+ mtl = useNodeMaterial ? new THREE.MeshStandardNodeMaterial() : new THREE.MeshStandardMaterial();
|
|
|
|
+
|
|
|
|
+ // default syntax ( backward-compatible )
|
|
|
|
+
|
|
|
|
+ mtl.map = getTexture( "brick" );
|
|
|
|
+
|
|
|
|
+ mtl.normalMap = getTexture( "grassNormal" );
|
|
|
|
+ mtl.normalScale = new THREE.Vector2( .3, -.3 );
|
|
|
|
+
|
|
|
|
+ mtl.envMap = cubemap;
|
|
|
|
+
|
|
|
|
+ mtl.roughness = oldMaterial ? oldMaterial.roughness : .5;
|
|
|
|
+ mtl.metalness = oldMaterial ? oldMaterial.metalness : .5;
|
|
|
|
+
|
|
|
|
+ // extended syntax ( only for NodeMaterial )
|
|
|
|
+
|
|
|
|
+ if (useNodeMaterial) {
|
|
|
|
+
|
|
|
|
+ mtl.map = new THREE.ColorAdjustmentNode(
|
|
|
|
+ new THREE.TextureNode( mtl.map ),
|
|
|
|
+ sataturation,
|
|
|
|
+ THREE.ColorAdjustmentNode.SATURATION
|
|
|
|
+ );
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ // apply material
|
|
|
|
+
|
|
|
|
+ mtl.needsUpdate = true;
|
|
|
|
+
|
|
|
|
+ mesh.material = mtl;
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ updateMaterial( true );
|
|
|
|
+
|
|
|
|
+ // GUI
|
|
|
|
+
|
|
|
|
+ addGui( 'use node material', true, function ( val ) {
|
|
|
|
+
|
|
|
|
+ updateMaterial( val );
|
|
|
|
+
|
|
|
|
+ } );
|
|
|
|
+
|
|
|
|
+ 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( 'sat. (node)', sataturation.value, function ( val ) {
|
|
|
|
+
|
|
|
|
+ sataturation.value = val;
|
|
|
|
+
|
|
|
|
+ }, false, 0, 2 );
|
|
|
|
+
|
|
|
|
+ break;
|
|
|
|
+
|
|
case 'physical':
|
|
case 'physical':
|
|
|
|
|
|
// MATERIAL
|
|
// MATERIAL
|
|
@@ -480,8 +490,7 @@
|
|
//mtl.reflectivity = // reflectivity (float)
|
|
//mtl.reflectivity = // reflectivity (float)
|
|
//mtl.clearCoat = // clearCoat (float)
|
|
//mtl.clearCoat = // clearCoat (float)
|
|
//mtl.clearCoatRoughness = // clearCoatRoughness (float)
|
|
//mtl.clearCoatRoughness = // clearCoatRoughness (float)
|
|
- //mtl.normal = // normalmap (vec3)
|
|
|
|
- //mtl.normalScale = // normalmap scale (vec2)
|
|
|
|
|
|
+ //mtl.normal = // normal (vec3)
|
|
//mtl.emissive = // emissive color (vec3)
|
|
//mtl.emissive = // emissive color (vec3)
|
|
//mtl.ambient = // ambient color (vec3)
|
|
//mtl.ambient = // ambient color (vec3)
|
|
//mtl.shadow = // shadowmap (vec3)
|
|
//mtl.shadow = // shadowmap (vec3)
|
|
@@ -531,8 +540,8 @@
|
|
mtl.clearCoat = clearCoat;
|
|
mtl.clearCoat = clearCoat;
|
|
mtl.clearCoatRoughness = clearCoatRoughness;
|
|
mtl.clearCoatRoughness = clearCoatRoughness;
|
|
mtl.environment = new THREE.CubeTextureNode( cubemap );
|
|
mtl.environment = new THREE.CubeTextureNode( cubemap );
|
|
- mtl.normal = new THREE.TextureNode( getTexture( "grassNormal" ) );
|
|
|
|
- mtl.normalScale = normalMask;
|
|
|
|
|
|
+ mtl.normal = new THREE.NormalMapNode( new THREE.TextureNode( getTexture( "grassNormal" ) ) );
|
|
|
|
+ mtl.normal.scale = normalMask;
|
|
|
|
|
|
// GUI
|
|
// GUI
|
|
|
|
|
|
@@ -858,8 +867,8 @@
|
|
var scale = new THREE.Vector2( 1, 1 );
|
|
var scale = new THREE.Vector2( 1, 1 );
|
|
|
|
|
|
var texture = new THREE.TextureNode( getTexture( "brick" ) );
|
|
var texture = new THREE.TextureNode( getTexture( "brick" ) );
|
|
- texture.coord = new THREE.UVTransformNode();
|
|
|
|
- //texture.coord.uv = new THREE.UVNode( 1 ); // uv2 for example
|
|
|
|
|
|
+ texture.uv = new THREE.UVTransformNode();
|
|
|
|
+ //texture.uv.uv = new THREE.UVNode( 1 ); // uv2 for example
|
|
|
|
|
|
mtl.color = texture;
|
|
mtl.color = texture;
|
|
|
|
|
|
@@ -867,7 +876,7 @@
|
|
|
|
|
|
function updateUVTransform() {
|
|
function updateUVTransform() {
|
|
|
|
|
|
- texture.coord.setUvTransform( translate.x, translate.y, scale.x, scale.y, THREE.Math.degToRad( rotate ) );
|
|
|
|
|
|
+ texture.uv.setUvTransform( translate.x, translate.y, scale.x, scale.y, THREE.Math.degToRad( rotate ) );
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
@@ -921,23 +930,21 @@
|
|
|
|
|
|
var diffuse = new THREE.TextureNode( getTexture( "brick" ) );
|
|
var diffuse = new THREE.TextureNode( getTexture( "brick" ) );
|
|
|
|
|
|
- var bump = new THREE.BumpNode( new THREE.TextureNode( getTexture( "brick" ) ) );
|
|
|
|
- bump.scale = new THREE.Vector2Node( - 1.5, - 1.5 );
|
|
|
|
|
|
+ var bumpMap = new THREE.BumpMapNode( new THREE.TextureNode( getTexture( "brick" ) ) );
|
|
|
|
+ bumpMap.scale = new THREE.FloatNode( .5 );
|
|
|
|
|
|
mtl.color = diffuse;
|
|
mtl.color = diffuse;
|
|
- mtl.normal = bump;
|
|
|
|
|
|
+ mtl.normal = bumpMap;
|
|
|
|
|
|
|
|
+ // convert BumpMap to NormalMap
|
|
|
|
+ //bumpMap.toNormalMap = true;
|
|
|
|
+ //mtl.normal = new THREE.NormalMapNode( bumpMap );
|
|
|
|
+
|
|
// GUI
|
|
// GUI
|
|
|
|
|
|
- addGui( 'scaleX', bump.scale.x, function ( val ) {
|
|
|
|
-
|
|
|
|
- bump.scale.x = val;
|
|
|
|
-
|
|
|
|
- }, false, - 2, 2 );
|
|
|
|
-
|
|
|
|
- addGui( 'scaleY', bump.scale.y, function ( val ) {
|
|
|
|
|
|
+ addGui( 'scale', bumpMap.scale.value, function ( val ) {
|
|
|
|
|
|
- bump.scale.y = val;
|
|
|
|
|
|
+ bumpMap.scale.value = val;
|
|
|
|
|
|
}, false, - 2, 2 );
|
|
}, false, - 2, 2 );
|
|
|
|
|
|
@@ -1106,12 +1113,12 @@
|
|
var sat = new THREE.FloatNode( 0 );
|
|
var sat = new THREE.FloatNode( 0 );
|
|
|
|
|
|
var satrgb = new THREE.FunctionNode( [
|
|
var satrgb = new THREE.FunctionNode( [
|
|
- "vec3 satrgb(vec3 rgb, float adjustment) {",
|
|
|
|
- //" const vec3 W = vec3(0.2125, 0.7154, 0.0721);", // LUMA
|
|
|
|
- " vec3 intensity = vec3(dot(rgb, LUMA));",
|
|
|
|
- " return mix(intensity, rgb, adjustment);",
|
|
|
|
|
|
+ "vec3 satrgb( vec3 rgb, float adjustment ) {",
|
|
|
|
+ // include luminance function from LuminanceNode
|
|
|
|
+ " vec3 intensity = vec3( luminance( rgb ) );",
|
|
|
|
+ " return mix( intensity, rgb, adjustment );",
|
|
"}"
|
|
"}"
|
|
- ].join( "\n" ) );
|
|
|
|
|
|
+ ].join( "\n" ), [ THREE.LuminanceNode.Nodes.luminance ] );
|
|
|
|
|
|
var saturation = new THREE.FunctionCallNode( satrgb );
|
|
var saturation = new THREE.FunctionCallNode( satrgb );
|
|
saturation.inputs.rgb = tex;
|
|
saturation.inputs.rgb = tex;
|
|
@@ -1667,8 +1674,8 @@
|
|
);
|
|
);
|
|
|
|
|
|
mtl.color = color;
|
|
mtl.color = color;
|
|
- mtl.normal = new THREE.TextureNode( getTexture( "grassNormal" ) );
|
|
|
|
- mtl.normalScale = furScale;
|
|
|
|
|
|
+ mtl.normal = new THREE.NormalMapNode( new THREE.TextureNode( getTexture( "grassNormal" ) ) );
|
|
|
|
+ mtl.normal.scale = furScale;
|
|
mtl.environment = mildnessColor;
|
|
mtl.environment = mildnessColor;
|
|
mtl.environmentAlpha = new THREE.Math1Node( viewZ, THREE.Math1Node.INVERT );
|
|
mtl.environmentAlpha = new THREE.Math1Node( viewZ, THREE.Math1Node.INVERT );
|
|
mtl.shininess = new THREE.FloatNode( 0 );
|
|
mtl.shininess = new THREE.FloatNode( 0 );
|
|
@@ -1860,7 +1867,7 @@
|
|
// APPLY
|
|
// APPLY
|
|
|
|
|
|
mtl.color = color;
|
|
mtl.color = color;
|
|
- mtl.light = posCelLight;
|
|
|
|
|
|
+ mtl.light = new THREE.LightNode();
|
|
mtl.shininess = new THREE.FloatNode( 0 );
|
|
mtl.shininess = new THREE.FloatNode( 0 );
|
|
|
|
|
|
mtl.environment = lineColor;
|
|
mtl.environment = lineColor;
|
|
@@ -1993,36 +2000,76 @@
|
|
mtl.color = new THREE.FunctionCallNode( keywordsexample, [ new THREE.TextureNode( getTexture( "brick" ) ) ] );
|
|
mtl.color = new THREE.FunctionCallNode( keywordsexample, [ new THREE.TextureNode( getTexture( "brick" ) ) ] );
|
|
|
|
|
|
break;
|
|
break;
|
|
-
|
|
|
|
|
|
+
|
|
case 'varying':
|
|
case 'varying':
|
|
|
|
|
|
// MATERIAL
|
|
// MATERIAL
|
|
|
|
|
|
mtl = new THREE.PhongNodeMaterial();
|
|
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 .transform 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.transform = new THREE.BypassNode( varying );
|
|
|
|
+ mtl.color = varying;
|
|
|
|
+
|
|
|
|
+ // you can also set a independent value in .transform slot using BypassNode
|
|
|
|
+ // such this expression using FunctionNode
|
|
|
|
+ mtl.transform.value = new THREE.FunctionNode("position * ( .1 + abs( sin( time ) ) )", "vec3");
|
|
|
|
+
|
|
|
|
+ break;
|
|
|
|
+
|
|
|
|
+ case 'void-function':
|
|
|
|
+
|
|
|
|
+ // MATERIAL
|
|
|
|
+
|
|
|
|
+ mtl = new THREE.PhongNodeMaterial();
|
|
|
|
+
|
|
var varying = new THREE.VarNode( "vec3" );
|
|
var varying = new THREE.VarNode( "vec3" );
|
|
|
|
|
|
|
|
+ // VERTEX
|
|
|
|
+
|
|
var setMyVar = new THREE.FunctionNode( [
|
|
var setMyVar = new THREE.FunctionNode( [
|
|
- "float setMyVar( vec3 pos ) {",
|
|
|
|
|
|
+ "void setMyVar( vec3 pos ) {",
|
|
// set "myVar" in vertex shader in this example,
|
|
// set "myVar" in vertex shader in this example,
|
|
// can be used in fragment shader too or in rest of the current shader
|
|
// can be used in fragment shader too or in rest of the current shader
|
|
" myVar = pos;",
|
|
" myVar = pos;",
|
|
- // it is not accept "void" functions for now!
|
|
|
|
- " return 0.;",
|
|
|
|
|
|
+
|
|
"}"
|
|
"}"
|
|
].join( "\n" ) );
|
|
].join( "\n" ) );
|
|
|
|
|
|
// add keyword
|
|
// add keyword
|
|
setMyVar.keywords[ "myVar" ] = varying;
|
|
setMyVar.keywords[ "myVar" ] = varying;
|
|
|
|
|
|
- var transform = new THREE.FunctionNode( "setMyVar( position * .1 ) + position", "vec3", [ setMyVar ] );
|
|
|
|
|
|
+ var transform = new THREE.FunctionNode( "setMyVar( position * .1 )", "vec3" );
|
|
|
|
+ transform.includes = [ setMyVar ];
|
|
transform.keywords[ "tex" ] = new THREE.TextureNode( getTexture( "brick" ) );
|
|
transform.keywords[ "tex" ] = new THREE.TextureNode( getTexture( "brick" ) );
|
|
|
|
|
|
- mtl.transform = transform;
|
|
|
|
- mtl.color = varying;
|
|
|
|
-
|
|
|
|
- break;
|
|
|
|
|
|
+ // use BypassNode to "void" functions
|
|
|
|
+ mtl.transform = new THREE.BypassNode( transform );
|
|
|
|
+
|
|
|
|
+ // 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 'readonly':
|
|
case 'readonly':
|
|
|
|
|
|
// MATERIAL
|
|
// MATERIAL
|
|
@@ -2191,7 +2238,7 @@
|
|
|
|
|
|
rtTexture = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBFormat } );
|
|
rtTexture = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBFormat } );
|
|
|
|
|
|
- library[ rtTexture.uuid ] = rtTexture;
|
|
|
|
|
|
+ library[ rtTexture.texture.uuid ] = rtTexture.texture;
|
|
|
|
|
|
var distanceMtl = new THREE.PhongNodeMaterial();
|
|
var distanceMtl = new THREE.PhongNodeMaterial();
|
|
distanceMtl.environment = objectDepth;
|
|
distanceMtl.environment = objectDepth;
|
|
@@ -2203,7 +2250,7 @@
|
|
|
|
|
|
mtl = new THREE.StandardNodeMaterial();
|
|
mtl = new THREE.StandardNodeMaterial();
|
|
|
|
|
|
- var backSideDepth = new THREE.TextureNode( rtTexture, new THREE.ScreenUVNode( new THREE.ResolutionNode( renderer ) ) );
|
|
|
|
|
|
+ var backSideDepth = new THREE.TextureNode( rtTexture.texture, new THREE.ScreenUVNode( new THREE.ResolutionNode( renderer ) ) );
|
|
|
|
|
|
var difference = new THREE.OperatorNode(
|
|
var difference = new THREE.OperatorNode(
|
|
objectDepth,
|
|
objectDepth,
|
|
@@ -2322,14 +2369,14 @@
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
- function toggleSerialize() {
|
|
|
|
|
|
+ document.getElementById( 'serialize' ).addEventListener('click', function () {
|
|
|
|
|
|
if ( serialized ) reset();
|
|
if ( serialized ) reset();
|
|
else serialize();
|
|
else serialize();
|
|
|
|
|
|
serialized = ! serialized;
|
|
serialized = ! serialized;
|
|
|
|
|
|
- }
|
|
|
|
|
|
+ });
|
|
|
|
|
|
function reset() {
|
|
function reset() {
|
|
|
|
|
|
@@ -2344,23 +2391,29 @@
|
|
|
|
|
|
function serialize() {
|
|
function serialize() {
|
|
|
|
|
|
- var json = mesh.material.toJSON(),
|
|
|
|
- loader = new THREE.NodeMaterialLoader( null, library ),
|
|
|
|
- material = loader.parse( json );
|
|
|
|
-
|
|
|
|
- mesh.material = material;
|
|
|
|
-
|
|
|
|
- // replace uuid to url (facilitates the load of textures using url otherside uuid)
|
|
|
|
- // example:
|
|
|
|
-
|
|
|
|
- THREE.NodeMaterialLoaderUtils.replaceUUID( json, getTexture( "cloud" ), "cloud" );
|
|
|
|
|
|
+ var json = mesh.material.toJSON();
|
|
|
|
+
|
|
|
|
+ // replace uuid to url (facilitates the load of textures using url otherside uuid) e.g:
|
|
|
|
|
|
- // get source
|
|
|
|
|
|
+ var cloud = getTexture( "cloud" );
|
|
|
|
+
|
|
|
|
+ THREE.NodeMaterialLoaderUtils.replaceUUID( json, cloud, "cloud" );
|
|
|
|
|
|
|
|
+ library[ "cloud" ] = cloud;
|
|
|
|
+
|
|
|
|
+ // --
|
|
|
|
+
|
|
var jsonStr = JSON.stringify( json );
|
|
var jsonStr = JSON.stringify( json );
|
|
-
|
|
|
|
|
|
+
|
|
console.log( jsonStr );
|
|
console.log( jsonStr );
|
|
-
|
|
|
|
|
|
+
|
|
|
|
+ var loader = new THREE.NodeMaterialLoader( null, library ),
|
|
|
|
+ material = loader.parse( json );
|
|
|
|
+
|
|
|
|
+ mesh.material.dispose();
|
|
|
|
+
|
|
|
|
+ mesh.material = material;
|
|
|
|
+
|
|
// gui
|
|
// gui
|
|
|
|
|
|
var div = document.getElementById( 'serialize' );
|
|
var div = document.getElementById( 'serialize' );
|
|
@@ -2392,9 +2445,17 @@
|
|
//mesh.rotation.z += .01;
|
|
//mesh.rotation.z += .01;
|
|
|
|
|
|
// update material animation and/or gpu calcs (pre-renderer)
|
|
// update material animation and/or gpu calcs (pre-renderer)
|
|
- frame.update( delta ).updateNode( mesh.material );
|
|
|
|
|
|
+
|
|
|
|
+ frame.update( delta );
|
|
|
|
+
|
|
|
|
+ if ( mesh.material instanceof THREE.NodeMaterial ) {
|
|
|
|
+
|
|
|
|
+ frame.updateNode( mesh.material );
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
|
|
// render to texture for sss/translucent material only
|
|
// render to texture for sss/translucent material only
|
|
|
|
+
|
|
if ( rtTexture ) {
|
|
if ( rtTexture ) {
|
|
|
|
|
|
scene.overrideMaterial = rtMaterial;
|
|
scene.overrideMaterial = rtMaterial;
|