Skip to content

Commit b9ee8e6

Browse files
raytranukraytranuk
committed
improvements
1 parent 68a1f46 commit b9ee8e6

File tree

7 files changed

+110
-82
lines changed

7 files changed

+110
-82
lines changed

‎examples/graphics/shader-graph-chunks-builder.html

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -85,8 +85,8 @@
8585

8686
// add input parameters
8787
var timeParam = builder.addParam('float', 'uTime', 0.0);
88-
var texParamA = builder.addParam('sampler2D', 'uTexMapA', cloudsMap);
89-
var texParamB = builder.addParam('sampler2D', 'uTexMapB', numbersMap);
88+
var texParamA = builder.addTextureParam('sampler2D', 'uTexMapA', cloudsMap);
89+
var texParamB = builder.addTextureParam('sampler2D', 'uTexMapB', numbersMap);
9090
var colConst = builder.addConst('vec3', 'colConst', new pc.Vec3(0.2, 0.3, 0.3) );
9191

9292
// create and hook up graph nodes
@@ -157,7 +157,8 @@
157157
material.overrideGraphSwitch(switchName, switchValue);
158158
material.update();
159159
}
160-
material.overrideGraphParameter('uTime', time);
160+
//override graph default
161+
material.setParameter('uTime', time);
161162
material.alphaTest = 1.0 - ((Math.sin(time * 3.14159) + 2.0) * 0.5);
162163
});
163164

‎examples/graphics/shader-graph-chunks-overrides.html

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -104,8 +104,8 @@
104104

105105
// add input parameters
106106
var timeParam = builder.addParam('float', 'uTime', 0.0);
107-
var texParamA = builder.addParam('sampler2D', 'uTexMapA', logoMap);
108-
var texParamB = builder.addParam('sampler2D', 'uTexMapB', numbersMap);
107+
var texParamA = builder.addTextureParam('sampler2D', 'uTexMapA', logoMap);
108+
var texParamB = builder.addTextureParam('sampler2D', 'uTexMapB', numbersMap);
109109
var tileParamA = builder.addParam('float', 'uTileA', 4.0 );
110110
var tileParamB = builder.addParam('float', 'uTileB', 1.0 );
111111
var colParam = builder.addParam('vec4', 'uCol', new pc.Vec4(0.5, 0.5, 1.0, 1.0) );
@@ -197,11 +197,12 @@
197197
}
198198

199199
if (entityC && matC) {
200-
matC.overrideGraphParameter("uTime", time*-0.5 );
201-
matC.overrideGraphParameter("uTexMapA", numbersMap );
202-
matC.overrideGraphParameter("uTileA", 1.0 );
203-
matC.overrideGraphParameter("uTexMapB", smileyMap );
204-
matC.overrideGraphParameter("uTileB", 4.0 );
200+
//override graph defaults
201+
matC.setParameter("uTime", time*-0.5 );
202+
matC.setParameter("uTexMapA", numbersMap );
203+
matC.setParameter("uTileA", 1.0 );
204+
matC.setParameter("uTexMapB", smileyMap );
205+
matC.setParameter("uTileB", 4.0 );
205206
}
206207
});
207208

‎rollup.config.js

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -255,11 +255,11 @@ const target_extras = {
255255
]
256256
};
257257

258-
const target_nodes = {
259-
input: 'nodes/index.js',
258+
const target_shader_nodes = {
259+
input: 'shader-nodes/index.js',
260260
output: {
261261
banner: getBanner(''),
262-
file: 'build/playcanvas-nodes.js',
262+
file: 'build/playcanvas-shader-nodes.js',
263263
format: 'umd',
264264
indent: '\t',
265265
name: 'pcsg'
@@ -275,16 +275,17 @@ let targets = [
275275
target_release_es6,
276276
target_debug,
277277
target_profiler,
278-
target_extras
278+
target_extras,
279+
target_shader_nodes
279280
];
280281

281282
// Build all targets by default, unless a specific target is chosen
282283
if (process.env.target) {
283284
switch (process.env.target.toLowerCase()) {
284-
case "es5": targets = [target_release_es5, target_extras]; break;
285-
case "es6": targets = [target_release_es6, target_extras]; break;
286-
case "debug": targets = [target_debug, target_extras]; break;
287-
case "profiler": targets = [target_profiler, target_extras]; break;
285+
case "es5": targets = [target_release_es5, target_extras, target_shader_nodes]; break;
286+
case "es6": targets = [target_release_es6, target_extras, target_shader_nodes]; break;
287+
case "debug": targets = [target_debug, target_extras, target_shader_nodes]; break;
288+
case "profiler": targets = [target_profiler, target_extras, target_shader_nodes]; break;
288289
}
289290
}
290291

‎src/graphics/shader-node-registry.js

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -48,9 +48,8 @@ ShaderNodeRegistry.prototype._genVariantKey = function (argTypes, options) {
4848
}
4949

5050
if (options) {
51-
var optionKeys = Object.keys(options);
52-
for (var keyIndex = 0; keyIndex < optionKeys.length; keyIndex++) {
53-
variantKey += '_' + optionKeys + '_' + options[optionKeys[keyIndex]];
51+
for (var optionName in options) {
52+
variantKey += '_' + optionName + '_' + options[optionName];
5453
}
5554
}
5655

‎src/scene/materials/shader-graph-builder.js

Lines changed: 51 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
import { ShaderGraphNode, PORT_TYPE_IN, PORT_TYPE_SWITCH, comp2Type } from './shader-graph-node.js';
22

3-
// import { TEXTURETYPE_DEFAULT, TEXTURETYPE_RGBM, TEXTURETYPE_RGBE } from '../../graphics/graphics.js';
4-
import { TEXTURETYPE_RGBM } from '../../graphics/graphics.js';
3+
import { Texture } from '../../graphics/texture.js';
4+
5+
import { PIXELFORMAT_R8_G8_B8_A8, TEXTURETYPE_RGBM } from '../../graphics/graphics.js';
56

67
var id = 0;
78

9+
var _placeholderTex;
10+
811
/**
912
* @private
1013
* @class
@@ -25,6 +28,27 @@ var ShaderGraphBuilder = function (app) {
2528
this._addedNamedInputs = {};
2629
this._addedNodes = [];
2730
this._addedOutputs = {};
31+
32+
if (!_placeholderTex) {
33+
// create texture
34+
_placeholderTex = new Texture(this.app.graphicsDevice, {
35+
width: 2,
36+
height: 2,
37+
format: PIXELFORMAT_R8_G8_B8_A8
38+
});
39+
_placeholderTex.name = 'placeholder';
40+
41+
// fill pixels with grey
42+
var pixels = _placeholderTex.lock();
43+
for (var i = 0; i < 4; i++) {
44+
for (var c = 0; c < 4; c++) {
45+
pixels[i * 4 + c] = [128, 128, 128, 255];
46+
}
47+
}
48+
_placeholderTex.unlock();
49+
}
50+
51+
this._placeholderTex = _placeholderTex;
2852
};
2953

3054
ShaderGraphBuilder.prototype.constructor = ShaderGraphBuilder;
@@ -44,6 +68,24 @@ Object.assign(ShaderGraphBuilder.prototype, {
4468
return ioPort;
4569
},
4670

71+
/**
72+
* @private
73+
* @function
74+
* @name pc.ShaderGraphBuilder#addTextureParam
75+
* @description Adds a parameter input to graph.
76+
* @param {string} type - Type of parameter.
77+
* @param {string} name - Name of parameter.
78+
* @param {pc.Texture} value - Optional texture value parameter.
79+
* @returns {any} Returns the created input port.
80+
*/
81+
addTextureParam: function (type, name, value) {
82+
if (value && !(value instanceof Texture)) {
83+
console.error('pc.ShaderGraphBuilder#addTextureParam: if parameter value specified, the value must be a valid pc.Texture');
84+
return null;
85+
}
86+
87+
return this._addParam(type, name, value || this._placeholderTex, false);
88+
},
4789

4890
/**
4991
* @private
@@ -52,20 +94,21 @@ Object.assign(ShaderGraphBuilder.prototype, {
5294
* @description Adds a parameter input to graph.
5395
* @param {string} type - Type of parameter.
5496
* @param {string} name - Name of parameter.
55-
* @param {any} value - Optional value of parameter.
97+
* @param {number|pc.Vec2|pc.Vec3|pc.Vec4} value - Optional value of parameter.
5698
* @returns {any} Returns the created input port.
5799
*/
58100
addParam: function (type, name, value) {
59101
return this._addParam(type, name, value, false);
60102
},
103+
61104
/**
62105
* @private
63106
* @function
64107
* @name pc.ShaderGraphBuilder#addConst
65108
* @description Adds a constant input to graph.
66109
* @param {string} type - Type of constant.
67110
* @param {string} userId - Optional userId of constant.
68-
* @param {any} value - Value of constant.
111+
* @param {number|pc.Vec2|pc.Vec3|pc.Vec4} value - Value of constant.
69112
* @returns {any} Returns the created constant port.
70113
*/
71114
addConst: function (type, userId, value) {
@@ -147,12 +190,12 @@ Object.assign(ShaderGraphBuilder.prototype, {
147190
var core = this._addedNodes[arg.node];
148191
if (!core) {
149192
console.error(err + ": invalid node index: " + arg.node);
150-
return false;
193+
return null;
151194
}
152195
var port = core.getIoPortByName(arg.port);
153196
if (!port) {
154197
console.error(err + ": invalid output port: " + core.name + "." + arg.port);
155-
return false;
198+
return null;
156199
}
157200

158201
unswizzledType = port.type;
@@ -163,7 +206,7 @@ Object.assign(ShaderGraphBuilder.prototype, {
163206
// TODO: check if unswizzledType can be swizzled with specified swizzle
164207
if (swizzleLen < 1 || swizzleLen > 4) {
165208
console.error(err + ": invalid swizzle: " + arg.swizzle);
166-
return false;
209+
return null;
167210
}
168211

169212
argTypes[argIndex] = comp2Type[swizzleLen];
@@ -340,7 +383,7 @@ Object.assign(ShaderGraphBuilder.prototype, {
340383
* @function
341384
* @name pc.ShaderGraphBuilder#getShaderGraphChunk
342385
* @description Get shader graph chunk.
343-
* @returns {any} Shader graph chunk.
386+
* @returns {ShaderGraphNode} Shader graph chunk.
344387
*/
345388
getShaderGraphChunk: function () {
346389
return this._graph;

‎src/scene/materials/shader-graph-node.js

Lines changed: 25 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ var ShaderGraphNode = function (funcCodeString, declCodeString) {
7373

7474
// port map and cache (optimization)
7575
this._portMap = {};
76-
this._portCache = {};
76+
this._portCache = [];
7777

7878
// static switches
7979
this._switchMap = {};
@@ -124,27 +124,31 @@ Object.assign(ShaderGraphNode.prototype, {
124124
},
125125

126126
_flushCachedPorts: function () {
127-
this._portCache = {};
127+
this._portCache = [];
128128
},
129129

130130
_getCachedPort: function (i) {
131131
var ioPort = this.graphData.ioPorts[i];
132-
if (!this._portCache[ioPort.name]) this._portCache[ioPort.name] = { isUniform: (ioPort.ptype === PORT_TYPE_IN || (ioPort.ptype === PORT_TYPE_CONST && ioPort.type === 'sampler2D')), nameId: ioPort.name + '_' + this.id, port: ioPort, index: i };
133-
return this._portCache[ioPort.name];
132+
if (!this._portCache[i]) {
133+
this._portCache[i] = { isUniform: (ioPort.ptype === PORT_TYPE_IN || (ioPort.ptype === PORT_TYPE_CONST && ioPort.type === 'sampler2D')), nameId: ioPort.name + '_' + this.id, port: ioPort, index: i };
134+
}
135+
return this._portCache[i];
134136
},
135137

136-
setParameters: function (device, names, params) {
138+
setParameters: function (device, params, reset) {
137139
var parameters = params || this._defaultParams;
138-
var paramNames = names || Object.keys(parameters);
139-
140-
for (var i = 0; i < paramNames.length; i++) {
141-
var paramName = paramNames[i];
142-
var parameter = parameters[paramName];
143-
if (parameter && parameter.data) {
140+
for (var paramName in parameters) {
141+
var parameter = this._defaultParams[paramName];
142+
if (parameter) {
144143
if (!parameter.scopeId) {
145144
parameter.scopeId = device.scope.resolve(this.getIoPortUniformName(paramName));
146145
}
147-
parameter.scopeId.setValue(parameter.data);
146+
147+
if (reset || !params) {
148+
parameter.scopeId.setValue(this._defaultParams[paramName].data);
149+
} else {
150+
parameter.scopeId.setValue(params[paramName].data);
151+
}
148152
}
149153
}
150154
},
@@ -274,12 +278,12 @@ Object.assign(ShaderGraphNode.prototype, {
274278
_addIoPort: function (type, name, value, ptype) {
275279
var ioPort = new Port(type, name, value, ptype);
276280

277-
var i = this._portMap[name];
278-
if (i === undefined) {
279-
i = this.graphData.ioPorts.length;
280-
this._portMap[name] = i;
281+
var portIndex = this._portMap[name];
282+
if (portIndex === undefined) {
283+
portIndex = this.graphData.ioPorts.length;
284+
this._portMap[name] = portIndex;
281285
}
282-
this.graphData.ioPorts[i] = ioPort;
286+
this.graphData.ioPorts[portIndex] = ioPort;
283287

284288
this._defaultParamsDirty = true;
285289

@@ -521,11 +525,13 @@ Object.assign(ShaderGraphNode.prototype, {
521525
},
522526

523527
getIoPortByName: function (name) {
524-
return (this._portMap[name] === undefined) ? undefined : this.graphData.ioPorts[this._portMap[name]];
528+
var portIndex = this._portMap[name];
529+
return (portIndex === undefined) ? undefined : this.graphData.ioPorts[portIndex];
525530
},
526531

527532
getIoPortUniformName: function (name) {
528-
return (this._portMap[name] === undefined) ? undefined : this._getCachedPort(this._portMap[name]).nameId;
533+
var portIndex = this._portMap[name];
534+
return (portIndex === undefined) ? undefined : this._getCachedPort(portIndex).nameId;
529535
},
530536

531537
_generateSubGraphFuncs: function (depGraphFuncs, depIoPortList) {

‎src/scene/materials/standard-node-material.js

Lines changed: 11 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { standard } from '../../graphics/program-lib/programs/standard.js';
33
import {
44
SHADER_FORWARDHDR, SHADER_PICK
55
} from '../constants.js';
6+
import { ShaderGraphNode } from './shader-graph-node.js';
67

78
import { StandardMaterial } from './standard-material.js';
89

@@ -14,7 +15,7 @@ import { StandardMaterial } from './standard-material.js';
1415
* @classdesc StandardNodeMaterial is sub class of the StandardMaterial, and adds shader graph
1516
* interop functionality.
1617
* @param {pc.StandardMaterial} mat - Optional material which is cloned.
17-
* @param {any} chunk - Optional shader graph node chunk to be used.
18+
* @param {ShaderGraphNode} chunk - Optional shader graph node chunk to be used.
1819
*/
1920
function StandardNodeMaterial(mat, chunk) {
2021
StandardMaterial.call(this);
@@ -75,6 +76,9 @@ Object.assign(StandardNodeMaterial.prototype, {
7576
* @param {number|number[]|pc.Texture} data - The value for the specified parameter.
7677
*/
7778
setParameter: function (name, data) {
79+
if (this.shaderGraphChunk && this.shaderGraphChunk.getIoPortUniformName(name)) {
80+
this._graphParamOverrides[name] = { scopeId: null, data: data };
81+
}
7882
StandardMaterial.prototype.setParameter.call(this, name, data);
7983
},
8084

@@ -83,34 +87,7 @@ Object.assign(StandardNodeMaterial.prototype, {
8387

8488
// apply / restore graph chunk overrides
8589
if (this.shaderGraphChunk) {
86-
if (restoreGraphDefaults === true) {
87-
// restore
88-
this.shaderGraphChunk.setParameters(device, Object.keys(this._graphParamOverrides), null);
89-
} else {
90-
// override
91-
this.shaderGraphChunk.setParameters(device, null, this._graphParamOverrides);
92-
}
93-
}
94-
},
95-
96-
/**
97-
* @private
98-
* @function
99-
* @name pc.StandardNodeMaterial#overrideGraphParameter
100-
* @description Sets a shader graph parameter on a StandardNodeMaterial.
101-
* @param {string} name - The name of the parameter to set.
102-
* @param {number|number[]|pc.Texture} data - The value for the specified parameter.
103-
*/
104-
overrideGraphParameter: function (name, data) {
105-
if (this.shaderGraphChunk) {
106-
var rootShaderGraph = this.shaderGraphChunk;
107-
var portName = rootShaderGraph.getIoPortUniformName(name);
108-
if (portName) {
109-
this._graphParamOverrides[name] = { scopeId: null, data: data };
110-
// StandardMaterial.prototype.setParameter.call(this, portName, data);
111-
} else {
112-
console.warn('not a shaderGraphChunk parameter - did you want to call setParameter()?');
113-
}
90+
this.shaderGraphChunk.setParameters(device, this._graphParamOverrides, restoreGraphDefaults);
11491
}
11592
},
11693

@@ -166,15 +143,15 @@ Object.defineProperty(StandardNodeMaterial.prototype, 'shaderGraphChunk', {
166143
return this._shaderGraphChunk;
167144
},
168145
set: function (value) {
169-
if (!value || this._shaderGraphChunk === value)
146+
if (this._shaderGraphChunk === value)
170147
return;
171148

172149
// remove this material from current chunk's material list
173150
if (this._shaderGraphChunk) {
174-
var self = this;
175-
this._shaderGraphChunk._materials = this._shaderGraphChunk._materials.filter(function (mat) {
176-
return mat !== self;
177-
});
151+
var index = this._shaderGraphChunk._materials.indexOf(this);
152+
if (index >= 0) {
153+
this._shaderGraphChunk._materials.splice(index, 1);
154+
}
178155
}
179156

180157
this._shaderGraphChunk = value;

0 commit comments

Comments
 (0)