Skip to content

Commit 594f9ad

Browse files
sunagmrdoob
sunag
authored and
mrdoob
committed
nodematerial r6 - up and fixes (mrdoob#9681)
* unnecessary shared=false ( false is default ) * fix using in vertex shader * cleanup * cleanup * cleanup * fix title * cleanup * fix use of includes and extension in expression * debut VarNode and varying example
1 parent 20750fc commit 594f9ad

15 files changed

+135
-57
lines changed

‎examples/js/nodes/AttributeNode.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@
44

55
THREE.AttributeNode = function( name, type ) {
66

7-
THREE.InputNode.call( this, type, { shared: false } );
7+
THREE.GLNode.call( this, type );
88

99
this.name = name;
1010

1111
};
1212

13-
THREE.AttributeNode.prototype = Object.create( THREE.InputNode.prototype );
13+
THREE.AttributeNode.prototype = Object.create( THREE.GLNode.prototype );
1414
THREE.AttributeNode.prototype.constructor = THREE.AttributeNode;
1515

1616
THREE.AttributeNode.prototype.getAttributeType = function( builder ) {
@@ -33,6 +33,6 @@ THREE.AttributeNode.prototype.generate = function( builder, output ) {
3333

3434
var attribute = builder.material.getAttribute( this.name, type );
3535

36-
return builder.format( attribute.varName, this.getType( builder ), output );
36+
return builder.format( builder.isShader( 'vertex' ) ? this.name : attribute.varying.name, this.getType( builder ), output );
3737

3838
};

‎examples/js/nodes/FunctionNode.js

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,18 @@ THREE.FunctionNode.prototype.generate = function( builder, output ) {
6565

6666
var match, offset = 0, src = this.value;
6767

68+
for ( var i = 0; i < this.includes.length; i ++ ) {
69+
70+
builder.include( this.includes[ i ], this );
71+
72+
}
73+
74+
for ( var ext in this.extensions ) {
75+
76+
builder.material.extensions[ ext ] = true;
77+
78+
}
79+
6880
while ( match = THREE.FunctionNode.rProperties.exec( this.value ) ) {
6981

7082
var prop = match[ 0 ], isGlobal = this.isMethod ? ! this.getInputByName( prop ) : true;
@@ -108,18 +120,6 @@ THREE.FunctionNode.prototype.generate = function( builder, output ) {
108120

109121
if ( output === 'source' ) {
110122

111-
for ( var i = 0; i < this.includes.length; i ++ ) {
112-
113-
builder.include( this.includes[ i ], this );
114-
115-
}
116-
117-
for ( var ext in this.extensions ) {
118-
119-
builder.material.extensions[ ext ] = true;
120-
121-
}
122-
123123
return src;
124124

125125
} else if ( this.isMethod ) {

‎examples/js/nodes/InputNode.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,7 @@ THREE.InputNode.prototype.generate = function( builder, output, uuid, type, ns,
3333

3434
return builder.format( data.vertex.name, type, output );
3535

36-
}
37-
else {
36+
} else {
3837

3938
if ( ! data.fragment ) {
4039

‎examples/js/nodes/NodeMaterial.js

Lines changed: 42 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@ THREE.NodeMaterial.prototype.build = function() {
8787
this.vertexUniform = [];
8888
this.fragmentUniform = [];
8989

90+
this.vars = [];
9091
this.vertexTemps = [];
9192
this.fragmentTemps = [];
9293

@@ -287,52 +288,77 @@ THREE.NodeMaterial.prototype.createUniform = function( type, value, ns, needsUpd
287288

288289
THREE.NodeMaterial.prototype.getVertexTemp = function( uuid, type, ns ) {
289290

290-
if ( ! this.vertexTemps[ uuid ] ) {
291+
var data = this.vertexTemps[ uuid ];
292+
293+
if ( ! data ) {
291294

292295
var index = this.vertexTemps.length,
293-
name = ns ? ns : 'nVt' + index,
294-
data = { name : name, type : type };
296+
name = ns ? ns : 'nVt' + index;
297+
298+
data = { name : name, type : type };
295299

296300
this.vertexTemps.push( data );
297301
this.vertexTemps[ uuid ] = data;
298302

299303
}
300304

301-
return this.vertexTemps[ uuid ];
305+
return data;
302306

303307
};
304308

305309
THREE.NodeMaterial.prototype.getFragmentTemp = function( uuid, type, ns ) {
306310

307-
if ( ! this.fragmentTemps[ uuid ] ) {
311+
var data = this.fragmentTemps[ uuid ];
312+
313+
if ( ! data ) {
308314

309315
var index = this.fragmentTemps.length,
310-
name = ns ? ns : 'nVt' + index,
311-
data = { name : name, type : type };
316+
name = ns ? ns : 'nVt' + index;
317+
318+
data = { name : name, type : type };
312319

313320
this.fragmentTemps.push( data );
314321
this.fragmentTemps[ uuid ] = data;
315322

316323
}
317324

318-
return this.fragmentTemps[ uuid ];
325+
return data;
326+
327+
};
328+
329+
THREE.NodeMaterial.prototype.getVar = function( uuid, type, ns ) {
330+
331+
var data = this.vars[ uuid ];
332+
333+
if ( ! data ) {
334+
335+
var index = this.vars.length,
336+
name = ns ? ns : 'nVv' + index;
337+
338+
data = { name : name, type : type }
339+
340+
this.vars.push( data );
341+
this.vars[ uuid ] = data;
342+
343+
this.addVertexPars( 'varying ' + type + ' ' + name + ';' );
344+
this.addFragmentPars( 'varying ' + type + ' ' + name + ';' );
345+
346+
}
347+
348+
return data;
319349

320350
};
321351

322352
THREE.NodeMaterial.prototype.getAttribute = function( name, type ) {
323353

324354
if ( ! this.attributes[ name ] ) {
325355

326-
var varName = 'nV' + name;
327-
328-
this.addVertexPars( 'varying ' + type + ' ' + varName + ';' );
329-
this.addFragmentPars( 'varying ' + type + ' ' + varName + ';' );
356+
var varying = this.getVar( name, type );
330357

331358
this.addVertexPars( 'attribute ' + type + ' ' + name + ';' );
359+
this.addVertexCode( varying.name + ' = ' + name + ';' );
332360

333-
this.addVertexCode( varName + ' = ' + name + ';' );
334-
335-
this.attributes[ name ] = { varName : varName, name : name, type : type };
361+
this.attributes[ name ] = { varying : varying, name : name, type : type };
336362

337363
}
338364

@@ -511,7 +537,7 @@ THREE.NodeMaterial.prototype.include = function( builder, node, parent, source )
511537

512538
}
513539

514-
if ( node instanceof THREE.FunctionNode && parent && includes[ parent.name ].deps.indexOf( node ) == - 1 ) {
540+
if ( node instanceof THREE.FunctionNode && parent && includes[ parent.name ] && includes[ parent.name ].deps.indexOf( node ) == - 1 ) {
515541

516542
includes[ parent.name ].deps.push( node );
517543

‎examples/js/nodes/VarNode.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/**
2+
* @author sunag / http://www.sunag.com.br/
3+
*/
4+
5+
THREE.VarNode = function( type ) {
6+
7+
THREE.GLNode.call( this, type );
8+
9+
};
10+
11+
THREE.VarNode.prototype = Object.create( THREE.GLNode.prototype );
12+
THREE.VarNode.prototype.constructor = THREE.VarNode;
13+
14+
THREE.VarNode.prototype.getType = function( builder ) {
15+
16+
return builder.getTypeByFormat( this.type );
17+
18+
};
19+
20+
THREE.VarNode.prototype.generate = function( builder, output ) {
21+
22+
var varying = builder.material.getVar( this.uuid, this.type );
23+
24+
return builder.format( varying.name, this.getType( builder ), output );
25+
26+
};

‎examples/js/nodes/inputs/ColorNode.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
THREE.ColorNode = function( color ) {
66

7-
THREE.InputNode.call( this, 'c', { shared: false } );
7+
THREE.InputNode.call( this, 'c' );
88

99
this.value = new THREE.Color( color || 0 );
1010

‎examples/js/nodes/inputs/FloatNode.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
THREE.FloatNode = function( value ) {
66

7-
THREE.InputNode.call( this, 'fv1', { shared: false } );
7+
THREE.InputNode.call( this, 'fv1' );
88

99
this.value = [ value || 0 ];
1010

‎examples/js/nodes/inputs/IntNode.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
THREE.IntNode = function( value ) {
66

7-
THREE.InputNode.call( this, 'iv1', { shared: false } );
7+
THREE.InputNode.call( this, 'iv1' );
88

99
this.value = [ Math.floor( value || 0 ) ];
1010

‎examples/js/nodes/inputs/Matrix4Node.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
THREE.Matrix4Node = function( matrix ) {
66

7-
THREE.InputNode.call( this, 'm4', { shared: false } );
7+
THREE.InputNode.call( this, 'm4' );
88

99
this.value = matrix || new THREE.Matrix4();
1010

‎examples/js/nodes/inputs/Vector2Node.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
THREE.Vector2Node = function( x, y ) {
66

7-
THREE.InputNode.call( this, 'v2', { shared: false } );
7+
THREE.InputNode.call( this, 'v2' );
88

99
this.value = new THREE.Vector2( x, y );
1010

‎examples/js/nodes/inputs/Vector3Node.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
THREE.Vector3Node = function( x, y, z ) {
66

7-
THREE.InputNode.call( this, 'v3', { shared: false } );
7+
THREE.InputNode.call( this, 'v3' );
88

99
this.type = 'v3';
1010
this.value = new THREE.Vector3( x, y, z );

‎examples/js/nodes/inputs/Vector4Node.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
THREE.Vector4Node = function( x, y, z, w ) {
66

7-
THREE.InputNode.call( this, 'v4', { shared: false } );
7+
THREE.InputNode.call( this, 'v4' );
88

99
this.value = new THREE.Vector4( x, y, z, w );
1010

‎examples/webgl_materials_nodes.html

Lines changed: 33 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@
4545
<script src="js/nodes/TempNode.js"></script>
4646
<script src="js/nodes/InputNode.js"></script>
4747
<script src="js/nodes/ConstNode.js"></script>
48+
<script src="js/nodes/VarNode.js"></script>
4849
<script src="js/nodes/FunctionNode.js"></script>
4950
<script src="js/nodes/FunctionCallNode.js"></script>
5051
<script src="js/nodes/AttributeNode.js"></script>
@@ -231,6 +232,7 @@
231232
'misc / smoke' : 'smoke',
232233
'misc / firefly' : 'firefly',
233234
'misc / reserved-keywords' : 'reserved-keywords',
235+
'misc / varying' : 'varying',
234236
'misc / custom-attribute' : 'custom-attribute'
235237
} ).onFinishChange( function() {
236238

@@ -256,17 +258,15 @@
256258

257259
} );
258260

259-
}
260-
else if ( typeof value == 'object' ) {
261+
} else if ( typeof value == 'object' ) {
261262

262263
node = gui.add( param, name, value ).onChange( function() {
263264

264265
callback( param[ name ] );
265266

266267
} );
267268

268-
}
269-
else {
269+
} else {
270270

271271
node = gui.add( param, name, min, max ).onChange( function() {
272272

@@ -1763,6 +1763,35 @@
17631763

17641764
break;
17651765

1766+
case 'varying':
1767+
1768+
// MATERIAL
1769+
1770+
mtl = new THREE.PhongNodeMaterial();
1771+
1772+
var varying = new THREE.VarNode( "vec3" );
1773+
1774+
var setMyVar = new THREE.FunctionNode( [
1775+
"float setMyVar( vec3 pos ) {",
1776+
// set "myVar" in vertex shader in this example,
1777+
// can be used in fragment shader too or in rest of the current shader
1778+
" myVar = pos;",
1779+
// it is not accept "void" functions for now!
1780+
" return 0.;",
1781+
"}"
1782+
].join( "\n" ) );
1783+
1784+
// add keyword
1785+
setMyVar.keywords[ "myVar" ] = varying;
1786+
1787+
var transform = new THREE.FunctionNode( "setMyVar( position * .1 ) + position", "vec3", [ setMyVar ] );
1788+
transform.keywords[ "tex" ] = new THREE.TextureNode( getTexture( "brick" ) );
1789+
1790+
mtl.transform = transform;
1791+
mtl.color = varying;
1792+
1793+
break;
1794+
17661795
case 'triangle-blur':
17671796

17681797
// MATERIAL

‎examples/webgl_mirror_nodes.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@
1818
#info {
1919
position: absolute;
2020
top: 0px;
21-
width: 200px;
22-
left: calc(50% - 100px);
21+
width: 400px;
22+
left: calc(50% - 200px);
2323
text-align: center;
2424
}
2525

@@ -31,7 +31,7 @@
3131
<body>
3232

3333
<div id="container"></div>
34-
<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> - mirror
34+
<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> - mirror node-based
3535
</div>
3636

3737
<script src="../build/three.js"></script>
@@ -188,7 +188,7 @@
188188

189189
var blurMirror = new THREE.BlurNode( mirror );
190190
blurMirror.size = new THREE.Vector2( WIDTH, HEIGHT );
191-
blurMirror.coord = new THREE.FunctionNode( "(projCoord.xyz / projCoord.q)", "vec3" );
191+
blurMirror.coord = new THREE.FunctionNode( "projCoord.xyz / projCoord.q", "vec3" );
192192
blurMirror.coord.keywords[ "projCoord" ] = new THREE.OperatorNode( mirror.offset, mirror.coord, THREE.OperatorNode.ADD );
193193
blurMirror.radius.x = blurMirror.radius.y = 0;
194194

0 commit comments

Comments
 (0)