Skip to content

Commit 696f55c

Browse files
TiagoCavalcanteTiagoCavalcante
committed
Improve performance of shaders by inlining some uniforms
Update CHANGES.md.
1 parent 63a8f5b commit 696f55c

File tree

10 files changed

+68
-121
lines changed

10 files changed

+68
-121
lines changed

‎CHANGES.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ Improvements:
1515
- Improve performance of arrows (#66)
1616
- Improve performance of cylinders (#67)
1717
- Add default colors to primitives and lights (#75)
18+
- Improve performance of shaders by inlining some uniforms (#79)
1819

1920
Internals:
2021
- Convert all materials to ShaderMaterial/RawShaderMaterial (#53)

‎src/primitives/cone.js‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -244,12 +244,11 @@ export default function ({ color = [1, 1, 1], coords, edgeForm = {}, opacity = 1
244244

245245
edgesGeometry.instanceCount = coords.length / 2;
246246

247+
edgeForm.color ??= [0, 0, 0];
248+
247249
const edges = new Line(
248250
edgesGeometry,
249251
new RawShaderMaterial({
250-
uniforms: {
251-
color: { value: edgeForm.color ?? [0, 0, 0] }
252-
},
253252
vertexShader: `#version 300 es
254253
in vec3 position;
255254
in vec3 polyhedronCenter;
@@ -279,12 +278,15 @@ export default function ({ color = [1, 1, 1], coords, edgeForm = {}, opacity = 1
279278
}
280279
`,
281280
fragmentShader: `#version 300 es
282-
uniform lowp vec3 color;
283-
284281
out lowp vec4 pc_fragColor;
285282
286283
void main() {
287-
pc_fragColor = vec4(color, 1);
284+
pc_fragColor = vec4(
285+
${edgeForm.color[0]},
286+
${edgeForm.color[1]},
287+
${edgeForm.color[2]},
288+
1
289+
);
288290
}
289291
`
290292
})

‎src/primitives/cuboid.js‎

Lines changed: 16 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -100,19 +100,15 @@ export default function ({ color = [1, 1, 1], coords, edgeForm = {}, opacity = 1
100100

101101
cuboidGeometry.instanceCount = coords.length / 2;
102102

103+
edgeForm.color ??= [0, 0, 0];
104+
103105
const cuboids = new Mesh(
104106
cuboidGeometry,
105107
new ShaderMaterial({
106108
transparent: opacity !== 1,
107109
depthWrite: opacity === 1,
108110
lights: true,
109-
uniforms: {
110-
...UniformsLib.lights,
111-
diffuse: { value: color },
112-
edgeColor: { value: edgeForm.color ?? [0, 0, 0] },
113-
opacity: { value: opacity },
114-
showEdges: { value: edgeForm.showEdges ?? true }
115-
},
111+
uniforms: UniformsLib.lights,
116112
vertexShader: `
117113
in vec3 cuboidBegin;
118114
in vec3 cuboidEnd;
@@ -141,10 +137,6 @@ export default function ({ color = [1, 1, 1], coords, edgeForm = {}, opacity = 1
141137
in vec3 vViewPosition;
142138
in vec2 vUv;
143139
144-
uniform vec3 diffuse;
145-
uniform vec3 edgeColor;
146-
uniform float opacity;
147-
uniform bool showEdges;
148140
uniform vec3 ambientLightColor;
149141
150142
#define RECIPROCAL_PI 0.3183098861837907
@@ -194,53 +186,46 @@ export default function ({ color = [1, 1, 1], coords, edgeForm = {}, opacity = 1
194186
}
195187
#endif
196188
197-
vec3 RE_Direct(const in IncidentLight directLight, const in vec3 normal, const in vec3 diffuseColor) {
198-
float dotNL = saturate(dot(normal, directLight.direction));
199-
return dotNL * directLight.color * diffuseColor * RECIPROCAL_PI;
200-
}
201-
202189
void main() {
203-
vec3 diffuseColor;
204-
205-
if (showEdges) {
190+
${(edgeForm.showEdges ?? true) ? `
206191
vec2 grid = abs(fract(vUv - 0.5) - 0.5) / fwidth(vUv);
207192
208193
float factor = min(min(grid.x, grid.y), 1.0);
209194
210-
diffuseColor = (diffuse - edgeColor) * factor + edgeColor;
211-
} else {
212-
diffuseColor = diffuse;
213-
}
195+
vec3 edgeColor = vec3(${edgeForm.color[0]}, ${edgeForm.color[1]}, ${edgeForm.color[2]});
196+
197+
vec3 diffuseColor = (vec3(${color[0]}, ${color[1]}, ${color[2]}) - edgeColor) * factor + edgeColor;
198+
` : `
199+
vec3 diffuseColor = vec3(${color[0]}, ${color[1]}, ${color[2]});
200+
`}
214201
215202
vec3 normal = normalize(cross(dFdx(vViewPosition), dFdy(vViewPosition)));
216203
217-
vec3 reflectedLight = vec3(0.0);
204+
vec3 reflectedLight = ambientLightColor;
218205
219206
IncidentLight directLight;
220207
221208
#if NUM_DIR_LIGHTS > 0
222209
for (int i = 0; i < NUM_DIR_LIGHTS; i++) {
223-
reflectedLight += RE_Direct(directionalLights[i], normal, diffuseColor);
210+
reflectedLight += saturate(dot(normal, directionalLights[i].direction)) * directionalLights[i].color;
224211
}
225212
#endif
226213
#if NUM_POINT_LIGHTS > 0
227214
for (int i = 0; i < NUM_POINT_LIGHTS; i++) {
228215
getPointLightInfo(pointLights[i], directLight);
229-
reflectedLight += RE_Direct(directLight, normal, diffuseColor);
216+
reflectedLight += saturate(dot(normal, directLight.direction)) * directLight.color;
230217
}
231218
#endif
232219
#if NUM_SPOT_LIGHTS > 0
233220
for (int i = 0; i < NUM_SPOT_LIGHTS; i++) {
234221
getSpotLightInfo(spotLights[i], directLight);
235-
reflectedLight += RE_Direct(directLight, normal, diffuseColor);
222+
reflectedLight += saturate(dot(normal, directLight.direction)) * directLight.color;
236223
}
237224
#endif
238225
239-
reflectedLight += ambientLightColor * diffuseColor * RECIPROCAL_PI;
240-
241226
pc_fragColor = vec4(
242-
reflectedLight,
243-
opacity
227+
reflectedLight * diffuseColor * RECIPROCAL_PI,
228+
${opacity}
244229
);
245230
}
246231
`

‎src/primitives/cylinder.js‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -473,12 +473,11 @@ export default function ({ color = [1, 1, 1], coords, edgeForm = {}, opacity = 1
473473
new InstancedBufferAttribute(cylindersEnd, 3)
474474
);
475475

476+
edgeForm.color ??= [0, 0, 0];
477+
476478
const edges = new Line(
477479
edgesGeometry,
478480
new RawShaderMaterial({
479-
uniforms: {
480-
color: { value: edgeForm.color ?? [0, 0, 0] }
481-
},
482481
vertexShader: `#version 300 es
483482
in vec3 position;
484483
in vec3 cylinderBegin;
@@ -509,12 +508,15 @@ export default function ({ color = [1, 1, 1], coords, edgeForm = {}, opacity = 1
509508
}
510509
`,
511510
fragmentShader: `#version 300 es
512-
uniform lowp vec3 color;
513-
514511
out lowp vec4 pc_fragColor;
515512
516513
void main() {
517-
pc_fragColor = vec4(color, 1.0);
514+
pc_fragColor = vec4(
515+
${edgeForm.color[0]},
516+
${edgeForm.color[1]},
517+
${edgeForm.color[2]},
518+
1
519+
);
518520
}
519521
`
520522
})

‎src/primitives/point.js‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -23,31 +23,29 @@ export default function ({ color = [0, 0, 0], coords, opacity = 1, pointSize },
2323
new RawShaderMaterial({
2424
transparent: true,
2525
depthWrite: false,
26-
uniforms: {
27-
size: { value: pointSize * canvasSize },
28-
color: { value: [...color, opacity] }
29-
},
3026
vertexShader: `#version 300 es
3127
in vec3 position;
3228
3329
uniform mat4 projectionMatrix;
3430
uniform mat4 modelViewMatrix;
35-
uniform float size;
3631
3732
void main() {
38-
gl_PointSize = size;
33+
gl_PointSize = ${(pointSize * canvasSize).toFixed(4)};
3934
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1);
4035
}
4136
`,
4237
fragmentShader: `#version 300 es
43-
uniform lowp vec4 color;
44-
4538
out lowp vec4 pc_fragColor;
4639
4740
void main() {
4841
if (length(gl_PointCoord - 0.5) > 0.5) discard;
4942
50-
pc_fragColor = color;
43+
pc_fragColor = vec4(
44+
${color[0]},
45+
${color[1]},
46+
${color[2]},
47+
${opacity}
48+
);
5149
}
5250
`
5351
})

‎src/primitives/polygon.js‎

Lines changed: 7 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -151,11 +151,7 @@ export default function ({ color = [1, 1, 1], coords, opacity = 1 }, extent) {
151151
side: DoubleSide,
152152
depthWrite: opacity === 1,
153153
transparent: opacity !== 1,
154-
uniforms: {
155-
...UniformsLib.lights,
156-
diffuse: { value: color },
157-
opacity: { value: opacity }
158-
},
154+
uniforms: UniformsLib.lights,
159155
vertexShader: `
160156
out vec3 vViewPosition;
161157
@@ -171,8 +167,6 @@ export default function ({ color = [1, 1, 1], coords, opacity = 1 }, extent) {
171167
in vec3 vViewPosition;
172168
in vec3 vNormal;
173169
174-
uniform vec3 diffuse;
175-
uniform float opacity;
176170
uniform vec3 ambientLightColor;
177171
178172
#define RECIPROCAL_PI 0.3183098861837907
@@ -215,40 +209,34 @@ export default function ({ color = [1, 1, 1], coords, opacity = 1 }, extent) {
215209
}
216210
#endif
217211
218-
vec3 RE_Direct(const in IncidentLight directLight, const in vec3 normal) {
219-
float dotNL = saturate(dot(normal, directLight.direction));
220-
221-
return dotNL * directLight.color * RECIPROCAL_PI * diffuse;
222-
}
223-
224212
void main() {
225-
vec3 reflectedLight = vec3(0.0);
213+
vec3 reflectedLight = ambientLightColor;
226214
227215
vec3 normal = normalize(cross(dFdx(vViewPosition), dFdy(vViewPosition)));
228216
229217
IncidentLight directLight;
230218
231219
#if NUM_DIR_LIGHTS > 0
232220
for (int i = 0; i < NUM_DIR_LIGHTS; i++) {
233-
reflectedLight += RE_Direct(directionalLights[i], normal);
221+
reflectedLight += saturate(dot(normal, directionalLights[i].direction)) * directionalLights[i].color;
234222
}
235223
#endif
236224
#if NUM_POINT_LIGHTS > 0
237225
for (int i = 0; i < NUM_POINT_LIGHTS; i++) {
238226
getPointLightInfo(pointLights[i], directLight);
239-
reflectedLight += RE_Direct(directLight, normal);
227+
reflectedLight += saturate(dot(normal, directLight.direction)) * directLight.color;
240228
}
241229
#endif
242230
#if NUM_SPOT_LIGHTS > 0
243231
for (int i = 0; i < NUM_SPOT_LIGHTS; i++) {
244232
getSpotLightInfo(spotLight, spotLights[i]);
245-
reflectedLight += RE_Direct(directLight, normal);
233+
reflectedLight += saturate(dot(normal, directLight.direction)) * directLight.color;
246234
}
247235
#endif
248236
249237
pc_fragColor = vec4(
250-
reflectedLight + ambientLightColor * diffuse * RECIPROCAL_PI,
251-
opacity
238+
reflectedLight * vec3(${color[0]}, ${color[1]}, ${color[2]}) * RECIPROCAL_PI,
239+
${opacity}
252240
);
253241
}
254242
`

‎src/primitives/sphere.js‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -33,17 +33,11 @@ export default function ({ color = [1, 1, 1], coords, opacity = 1, radius = 1 },
3333
lights: true,
3434
transparent: opacity !== 1,
3535
depthWrite: opacity === 1,
36-
uniforms: {
37-
...UniformsLib.lights,
38-
diffuse: { value: color },
39-
opacity: { value: opacity }
40-
},
36+
uniforms: UniformsLib.lights,
4137
vertexShader: `
4238
in vec3 sphereCenter;
4339
4440
uniform vec3 ambientLightColor;
45-
uniform vec3 diffuse;
46-
uniform float opacity;
4741
4842
out vec4 vColor;
4943
@@ -126,7 +120,7 @@ export default function ({ color = [1, 1, 1], coords, opacity = 1, radius = 1 },
126120
}
127121
#endif
128122
129-
vColor = vec4(light * diffuse * RECIPROCAL_PI, opacity);
123+
vColor = vec4(light * vec3(${color[0]}, ${color[1]}, ${color[2]}) * RECIPROCAL_PI, ${opacity});
130124
}
131125
`,
132126
fragmentShader: `

‎src/primitives/tube.js‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -121,15 +121,9 @@ export default function ({ color = [1, 1, 1], coords, opacity = 1, radius = 1 },
121121
lights: true,
122122
transparent: opacity !== 1,
123123
depthWrite: opacity === 1,
124-
uniforms: {
125-
...UniformsLib.lights,
126-
diffuse: { value: color },
127-
opacity: { value: opacity }
128-
},
124+
uniforms: UniformsLib.lights,
129125
vertexShader: `
130126
uniform vec3 ambientLightColor;
131-
uniform vec3 diffuse;
132-
uniform float opacity;
133127
134128
out vec4 vColor;
135129
@@ -219,7 +213,7 @@ export default function ({ color = [1, 1, 1], coords, opacity = 1, radius = 1 },
219213
}
220214
#endif
221215
222-
vColor = vec4(light * diffuse * RECIPROCAL_PI, opacity);
216+
vColor = vec4(light * vec3(${color[0]}, ${color[1]}, ${color[2]}) * RECIPROCAL_PI, ${opacity});
223217
}
224218
`,
225219
fragmentShader: `

0 commit comments

Comments
 (0)