Skip to content

Commit 76744cb

Browse files
Mugen87Mugen87
authored
Materials: Convert to classes. (#21626)
1 parent 68d4a0b commit 76744cb

File tree

10 files changed

+410
-416
lines changed

10 files changed

+410
-416
lines changed

‎examples/jsm/nodes/materials/BasicNodeMaterial.js‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,19 @@ import { BasicNode } from './nodes/BasicNode.js';
22
import { NodeMaterial } from './NodeMaterial.js';
33
import { NodeUtils } from '../core/NodeUtils.js';
44

5-
function BasicNodeMaterial() {
5+
class BasicNodeMaterial extends NodeMaterial {
66

7-
var node = new BasicNode();
7+
constructor() {
88

9-
NodeMaterial.call( this, node, node );
9+
const node = new BasicNode();
1010

11-
this.type = 'BasicNodeMaterial';
11+
super( node, node );
1212

13-
}
13+
this.type = 'BasicNodeMaterial';
14+
15+
}
1416

15-
BasicNodeMaterial.prototype = Object.create( NodeMaterial.prototype );
16-
BasicNodeMaterial.prototype.constructor = BasicNodeMaterial;
17+
}
1718

1819
NodeUtils.addShortcuts( BasicNodeMaterial.prototype, 'fragment', [
1920
'color',

‎examples/jsm/nodes/materials/MeshStandardNodeMaterial.js‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,19 @@ import { MeshStandardNode } from './nodes/MeshStandardNode.js';
22
import { NodeMaterial } from './NodeMaterial.js';
33
import { NodeUtils } from '../core/NodeUtils.js';
44

5-
function MeshStandardNodeMaterial() {
5+
class MeshStandardNodeMaterial extends NodeMaterial {
66

7-
var node = new MeshStandardNode();
7+
constructor() {
88

9-
NodeMaterial.call( this, node, node );
9+
const node = new MeshStandardNode();
1010

11-
this.type = 'MeshStandardNodeMaterial';
11+
super( node, node );
1212

13-
}
13+
this.type = 'MeshStandardNodeMaterial';
14+
15+
}
1416

15-
MeshStandardNodeMaterial.prototype = Object.create( NodeMaterial.prototype );
16-
MeshStandardNodeMaterial.prototype.constructor = MeshStandardNodeMaterial;
17+
}
1718

1819
NodeUtils.addShortcuts( MeshStandardNodeMaterial.prototype, 'properties', [
1920
'color',

‎examples/jsm/nodes/materials/NodeMaterial.js‎

Lines changed: 116 additions & 128 deletions
Original file line numberDiff line numberDiff line change
@@ -11,219 +11,207 @@ import { ColorNode } from '../inputs/ColorNode.js';
1111
import { PositionNode } from '../accessors/PositionNode.js';
1212
import { RawNode } from './nodes/RawNode.js';
1313

14-
function NodeMaterial( vertex, fragment ) {
14+
class NodeMaterial extends ShaderMaterial {
1515

16-
ShaderMaterial.call( this );
16+
constructor( vertex, fragment ) {
1717

18-
this.vertex = vertex || new RawNode( new PositionNode( PositionNode.PROJECTION ) );
19-
this.fragment = fragment || new RawNode( new ColorNode( 0xFF0000 ) );
18+
super();
2019

21-
this.updaters = [];
20+
this.vertex = vertex || new RawNode( new PositionNode( PositionNode.PROJECTION ) );
21+
this.fragment = fragment || new RawNode( new ColorNode( 0xFF0000 ) );
2222

23-
}
24-
25-
NodeMaterial.prototype = Object.create( ShaderMaterial.prototype );
26-
NodeMaterial.prototype.constructor = NodeMaterial;
27-
NodeMaterial.prototype.type = 'NodeMaterial';
28-
29-
NodeMaterial.prototype.isNodeMaterial = true;
30-
31-
Object.defineProperties( NodeMaterial.prototype, {
32-
33-
properties: {
34-
35-
get: function () {
23+
this.updaters = [];
3624

37-
return this.fragment.properties;
25+
this.type = 'NodeMaterial';
3826

39-
}
27+
}
4028

41-
},
29+
get properties() {
4230

43-
needsUpdate: {
31+
return this.fragment.properties;
4432

45-
set: function ( value ) {
33+
}
4634

47-
if ( value === true ) this.version ++;
48-
this.needsCompile = value;
35+
get needsUpdate() {
4936

50-
},
37+
return this.needsCompile;
5138

52-
get: function () {
39+
}
5340

54-
return this.needsCompile;
41+
set needsUpdate( value ) {
5542

56-
}
43+
if ( value === true ) this.version ++;
44+
this.needsCompile = value;
5745

5846
}
5947

60-
} );
48+
onBeforeCompile( shader, renderer ) {
6149

62-
NodeMaterial.prototype.onBeforeCompile = function ( shader, renderer ) {
50+
this.build( { renderer: renderer } );
6351

64-
this.build( { renderer: renderer } );
52+
shader.defines = this.defines;
53+
shader.uniforms = this.uniforms;
54+
shader.vertexShader = this.vertexShader;
55+
shader.fragmentShader = this.fragmentShader;
6556

66-
shader.defines = this.defines;
67-
shader.uniforms = this.uniforms;
68-
shader.vertexShader = this.vertexShader;
69-
shader.fragmentShader = this.fragmentShader;
57+
shader.extensionDerivatives = ( this.extensions.derivatives === true );
58+
shader.extensionFragDepth = ( this.extensions.fragDepth === true );
59+
shader.extensionDrawBuffers = ( this.extensions.drawBuffers === true );
60+
shader.extensionShaderTextureLOD = ( this.extensions.shaderTextureLOD === true );
7061

71-
shader.extensionDerivatives = ( this.extensions.derivatives === true );
72-
shader.extensionFragDepth = ( this.extensions.fragDepth === true );
73-
shader.extensionDrawBuffers = ( this.extensions.drawBuffers === true );
74-
shader.extensionShaderTextureLOD = ( this.extensions.shaderTextureLOD === true );
62+
}
7563

76-
};
64+
customProgramCacheKey() {
7765

78-
NodeMaterial.prototype.customProgramCacheKey = function () {
66+
const hash = this.getHash();
7967

80-
var hash = this.getHash();
68+
return hash;
8169

82-
return hash;
70+
}
8371

84-
};
72+
getHash() {
8573

86-
NodeMaterial.prototype.getHash = function () {
74+
let hash = '{';
8775

88-
var hash = '{';
76+
hash += '"vertex":' + this.vertex.getHash() + ',';
77+
hash += '"fragment":' + this.fragment.getHash();
8978

90-
hash += '"vertex":' + this.vertex.getHash() + ',';
91-
hash += '"fragment":' + this.fragment.getHash();
79+
hash += '}';
9280

93-
hash += '}';
81+
return hash;
9482

95-
return hash;
83+
}
9684

97-
};
85+
updateFrame( frame ) {
9886

99-
NodeMaterial.prototype.updateFrame = function ( frame ) {
87+
for ( let i = 0; i < this.updaters.length; ++ i ) {
10088

101-
for ( var i = 0; i < this.updaters.length; ++ i ) {
89+
frame.updateNode( this.updaters[ i ] );
10290

103-
frame.updateNode( this.updaters[ i ] );
91+
}
10492

10593
}
10694

107-
};
95+
build( params = {} ) {
10896

109-
NodeMaterial.prototype.build = function ( params ) {
97+
const builder = params.builder || new NodeBuilder();
11098

111-
params = params || {};
99+
builder.setMaterial( this, params.renderer );
100+
builder.build( this.vertex, this.fragment );
112101

113-
var builder = params.builder || new NodeBuilder();
102+
this.vertexShader = builder.getCode( 'vertex' );
103+
this.fragmentShader = builder.getCode( 'fragment' );
114104

115-
builder.setMaterial( this, params.renderer );
116-
builder.build( this.vertex, this.fragment );
105+
this.defines = builder.defines;
106+
this.uniforms = builder.uniforms;
107+
this.extensions = builder.extensions;
108+
this.updaters = builder.updaters;
117109

118-
this.vertexShader = builder.getCode( 'vertex' );
119-
this.fragmentShader = builder.getCode( 'fragment' );
110+
this.fog = builder.requires.fog;
111+
this.lights = builder.requires.lights;
120112

121-
this.defines = builder.defines;
122-
this.uniforms = builder.uniforms;
123-
this.extensions = builder.extensions;
124-
this.updaters = builder.updaters;
113+
this.transparent = builder.requires.transparent || this.blending > NormalBlending;
125114

126-
this.fog = builder.requires.fog;
127-
this.lights = builder.requires.lights;
115+
return this;
128116

129-
this.transparent = builder.requires.transparent || this.blending > NormalBlending;
117+
}
130118

131-
return this;
119+
copy( source ) {
132120

133-
};
121+
const uuid = this.uuid;
134122

135-
NodeMaterial.prototype.copy = function ( source ) {
123+
for ( const name in source ) {
136124

137-
var uuid = this.uuid;
125+
this[ name ] = source[ name ];
138126

139-
for ( var name in source ) {
127+
}
140128

141-
this[ name ] = source[ name ];
129+
this.uuid = uuid;
142130

143-
}
131+
if ( source.userData !== undefined ) {
144132

145-
this.uuid = uuid;
133+
this.userData = JSON.parse( JSON.stringify( source.userData ) );
146134

147-
if ( source.userData !== undefined ) {
135+
}
148136

149-
this.userData = JSON.parse( JSON.stringify( source.userData ) );
137+
return this;
150138

151139
}
152140

153-
return this;
141+
toJSON( meta ) {
154142

155-
};
143+
const isRootObject = ( meta === undefined || typeof meta === 'string' );
156144

157-
NodeMaterial.prototype.toJSON = function ( meta ) {
145+
if ( isRootObject ) {
158146

159-
var isRootObject = ( meta === undefined || typeof meta === 'string' );
147+
meta = {
148+
nodes: {}
149+
};
160150

161-
if ( isRootObject ) {
151+
}
162152

163-
meta = {
164-
nodes: {}
165-
};
153+
if ( meta && ! meta.materials ) meta.materials = {};
166154

167-
}
155+
if ( ! meta.materials[ this.uuid ] ) {
168156

169-
if ( meta && ! meta.materials ) meta.materials = {};
157+
const data = {};
170158

171-
if ( ! meta.materials[ this.uuid ] ) {
159+
data.uuid = this.uuid;
160+
data.type = this.type;
172161

173-
var data = {};
162+
meta.materials[ data.uuid ] = data;
174163

175-
data.uuid = this.uuid;
176-
data.type = this.type;
164+
if ( this.name !== '' ) data.name = this.name;
177165

178-
meta.materials[ data.uuid ] = data;
166+
if ( this.size !== undefined ) data.size = this.size;
167+
if ( this.sizeAttenuation !== undefined ) data.sizeAttenuation = this.sizeAttenuation;
179168

180-
if ( this.name !== '' ) data.name = this.name;
169+
if ( this.blending !== NormalBlending ) data.blending = this.blending;
170+
if ( this.flatShading === true ) data.flatShading = this.flatShading;
171+
if ( this.side !== FrontSide ) data.side = this.side;
172+
if ( this.vertexColors !== NoColors ) data.vertexColors = this.vertexColors;
181173

182-
if ( this.size !== undefined ) data.size = this.size;
183-
if ( this.sizeAttenuation !== undefined ) data.sizeAttenuation = this.sizeAttenuation;
174+
if ( this.depthFunc !== LessEqualDepth ) data.depthFunc = this.depthFunc;
175+
if ( this.depthTest === false ) data.depthTest = this.depthTest;
176+
if ( this.depthWrite === false ) data.depthWrite = this.depthWrite;
184177

185-
if ( this.blending !== NormalBlending ) data.blending = this.blending;
186-
if ( this.flatShading === true ) data.flatShading = this.flatShading;
187-
if ( this.side !== FrontSide ) data.side = this.side;
188-
if ( this.vertexColors !== NoColors ) data.vertexColors = this.vertexColors;
178+
if ( this.linewidth !== 1 ) data.linewidth = this.linewidth;
179+
if ( this.dashSize !== undefined ) data.dashSize = this.dashSize;
180+
if ( this.gapSize !== undefined ) data.gapSize = this.gapSize;
181+
if ( this.scale !== undefined ) data.scale = this.scale;
189182

190-
if ( this.depthFunc !== LessEqualDepth ) data.depthFunc = this.depthFunc;
191-
if ( this.depthTest === false ) data.depthTest = this.depthTest;
192-
if ( this.depthWrite === false ) data.depthWrite = this.depthWrite;
183+
if ( this.dithering === true ) data.dithering = true;
193184

194-
if ( this.linewidth !== 1 ) data.linewidth = this.linewidth;
195-
if ( this.dashSize !== undefined ) data.dashSize = this.dashSize;
196-
if ( this.gapSize !== undefined ) data.gapSize = this.gapSize;
197-
if ( this.scale !== undefined ) data.scale = this.scale;
185+
if ( this.wireframe === true ) data.wireframe = this.wireframe;
186+
if ( this.wireframeLinewidth > 1 ) data.wireframeLinewidth = this.wireframeLinewidth;
187+
if ( this.wireframeLinecap !== 'round' ) data.wireframeLinecap = this.wireframeLinecap;
188+
if ( this.wireframeLinejoin !== 'round' ) data.wireframeLinejoin = this.wireframeLinejoin;
198189

199-
if ( this.dithering === true ) data.dithering = true;
190+
if ( this.alphaTest > 0 ) data.alphaTest = this.alphaTest;
191+
if ( this.premultipliedAlpha === true ) data.premultipliedAlpha = this.premultipliedAlpha;
200192

201-
if ( this.wireframe === true ) data.wireframe = this.wireframe;
202-
if ( this.wireframeLinewidth > 1 ) data.wireframeLinewidth = this.wireframeLinewidth;
203-
if ( this.wireframeLinecap !== 'round' ) data.wireframeLinecap = this.wireframeLinecap;
204-
if ( this.wireframeLinejoin !== 'round' ) data.wireframeLinejoin = this.wireframeLinejoin;
193+
if ( this.morphTargets === true ) data.morphTargets = true;
194+
if ( this.skinning === true ) data.skinning = true;
205195

206-
if ( this.alphaTest > 0 ) data.alphaTest = this.alphaTest;
207-
if ( this.premultipliedAlpha === true ) data.premultipliedAlpha = this.premultipliedAlpha;
196+
if ( this.visible === false ) data.visible = false;
197+
if ( JSON.stringify( this.userData ) !== '{}' ) data.userData = this.userData;
208198

209-
if ( this.morphTargets === true ) data.morphTargets = true;
210-
if ( this.skinning === true ) data.skinning = true;
199+
data.fog = this.fog;
200+
data.lights = this.lights;
211201

212-
if ( this.visible === false ) data.visible = false;
213-
if ( JSON.stringify( this.userData ) !== '{}' ) data.userData = this.userData;
202+
data.vertex = this.vertex.toJSON( meta ).uuid;
203+
data.fragment = this.fragment.toJSON( meta ).uuid;
214204

215-
data.fog = this.fog;
216-
data.lights = this.lights;
205+
}
217206

218-
data.vertex = this.vertex.toJSON( meta ).uuid;
219-
data.fragment = this.fragment.toJSON( meta ).uuid;
207+
meta.material = this.uuid;
220208

221-
}
209+
return meta;
222210

223-
meta.material = this.uuid;
211+
}
224212

225-
return meta;
213+
}
226214

227-
};
215+
NodeMaterial.prototype.isNodeMaterial = true;
228216

229217
export { NodeMaterial };

0 commit comments

Comments
 (0)