Skip to content

Commit fc4a73f

Browse files
authored
TiltLoader: Refactor shaders setup. (#21721)
1 parent 608c805 commit fc4a73f

File tree

2 files changed

+178
-154
lines changed

2 files changed

+178
-154
lines changed

examples/js/loaders/TiltLoader.js

Lines changed: 87 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -334,95 +334,107 @@
334334
`
335335
}
336336
};
337-
const loader = new THREE.TextureLoader().setPath( './textures/tiltbrush/' );
338-
const shaders = {
339-
'Light': {
340-
uniforms: {
341-
mainTex: {
342-
value: loader.load( 'Light.webp' )
343-
},
344-
alphaTest: {
345-
value: 0.067
346-
},
347-
emission_gain: {
348-
value: 0.45
349-
},
350-
alpha: {
351-
value: 1
352-
}
353-
},
354-
vertexShader: `
355-
precision highp float;
356-
precision highp int;
357-
358-
attribute vec2 uv;
359-
attribute vec4 color;
360-
attribute vec3 position;
337+
let shaders = null;
361338

362-
uniform mat4 modelMatrix;
363-
uniform mat4 modelViewMatrix;
364-
uniform mat4 projectionMatrix;
365-
uniform mat4 viewMatrix;
366-
uniform mat3 normalMatrix;
367-
uniform vec3 cameraPosition;
339+
function getShaders() {
368340

369-
varying vec2 vUv;
370-
varying vec3 vColor;
341+
if ( shaders === null ) {
371342

372-
${common.colors.LinearToSrgb}
373-
${common.colors.hsv}
343+
const loader = new THREE.TextureLoader().setPath( './textures/tiltbrush/' );
344+
shaders = {
345+
'Light': {
346+
uniforms: {
347+
mainTex: {
348+
value: loader.load( 'Light.webp' )
349+
},
350+
alphaTest: {
351+
value: 0.067
352+
},
353+
emission_gain: {
354+
value: 0.45
355+
},
356+
alpha: {
357+
value: 1
358+
}
359+
},
360+
vertexShader: `
361+
precision highp float;
362+
precision highp int;
374363
375-
void main() {
364+
attribute vec2 uv;
365+
attribute vec4 color;
366+
attribute vec3 position;
376367
377-
vUv = uv;
368+
uniform mat4 modelMatrix;
369+
uniform mat4 modelViewMatrix;
370+
uniform mat4 projectionMatrix;
371+
uniform mat4 viewMatrix;
372+
uniform mat3 normalMatrix;
373+
uniform vec3 cameraPosition;
378374
379-
vColor = lookup(color.rgb);
375+
varying vec2 vUv;
376+
varying vec3 vColor;
380377
381-
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
378+
${common.colors.LinearToSrgb}
379+
${common.colors.hsv}
382380
383-
gl_Position = projectionMatrix * mvPosition;
381+
void main() {
384382
385-
}
386-
`,
387-
fragmentShader: `
388-
precision highp float;
389-
precision highp int;
383+
vUv = uv;
390384
391-
uniform float emission_gain;
385+
vColor = lookup(color.rgb);
392386
393-
uniform sampler2D mainTex;
394-
uniform float alphaTest;
387+
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
395388
396-
varying vec2 vUv;
397-
varying vec3 vColor;
389+
gl_Position = projectionMatrix * mvPosition;
398390
399-
${common.colors.BloomColor}
400-
${common.colors.SrgbToLinear}
391+
}
392+
`,
393+
fragmentShader: `
394+
precision highp float;
395+
precision highp int;
396+
397+
uniform float emission_gain;
398+
399+
uniform sampler2D mainTex;
400+
uniform float alphaTest;
401+
402+
varying vec2 vUv;
403+
varying vec3 vColor;
404+
405+
${common.colors.BloomColor}
406+
${common.colors.SrgbToLinear}
407+
408+
void main(){
409+
vec4 col = texture2D(mainTex, vUv);
410+
vec3 color = vColor;
411+
color = BloomColor(color, emission_gain);
412+
color = color * col.rgb;
413+
color = color * col.a;
414+
color = SrgbToLinear(color);
415+
gl_FragColor = vec4(color, 1.0);
416+
}
417+
`,
418+
side: 2,
419+
transparent: true,
420+
depthFunc: 2,
421+
depthWrite: true,
422+
depthTest: false,
423+
blending: 5,
424+
blendDst: 201,
425+
blendDstAlpha: 201,
426+
blendEquation: 100,
427+
blendEquationAlpha: 100,
428+
blendSrc: 201,
429+
blendSrcAlpha: 201
430+
}
431+
};
401432

402-
void main(){
403-
vec4 col = texture2D(mainTex, vUv);
404-
vec3 color = vColor;
405-
color = BloomColor(color, emission_gain);
406-
color = color * col.rgb;
407-
color = color * col.a;
408-
color = SrgbToLinear(color);
409-
gl_FragColor = vec4(color, 1.0);
410-
}
411-
`,
412-
side: 2,
413-
transparent: true,
414-
depthFunc: 2,
415-
depthWrite: true,
416-
depthTest: false,
417-
blending: 5,
418-
blendDst: 201,
419-
blendDstAlpha: 201,
420-
blendEquation: 100,
421-
blendEquationAlpha: 100,
422-
blendSrc: 201,
423-
blendSrcAlpha: 201
424433
}
425-
};
434+
435+
return shaders;
436+
437+
}
426438

427439
function getMaterial( GUID ) {
428440

@@ -431,7 +443,7 @@
431443
switch ( name ) {
432444

433445
case 'Light':
434-
return new THREE.RawShaderMaterial( shaders.Light );
446+
return new THREE.RawShaderMaterial( getShaders().Light );
435447

436448
default:
437449
return new THREE.MeshBasicMaterial( {

examples/jsm/loaders/TiltLoader.js

Lines changed: 91 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -399,89 +399,101 @@ const common = {
399399

400400
};
401401

402-
const loader = new TextureLoader().setPath( './textures/tiltbrush/' );
403-
404-
const shaders = {
405-
'Light': {
406-
uniforms: {
407-
mainTex: { value: loader.load( 'Light.webp' ) },
408-
alphaTest: { value: 0.067 },
409-
emission_gain: { value: 0.45 },
410-
alpha: { value: 1 },
411-
},
412-
vertexShader: `
413-
precision highp float;
414-
precision highp int;
415-
416-
attribute vec2 uv;
417-
attribute vec4 color;
418-
attribute vec3 position;
419-
420-
uniform mat4 modelMatrix;
421-
uniform mat4 modelViewMatrix;
422-
uniform mat4 projectionMatrix;
423-
uniform mat4 viewMatrix;
424-
uniform mat3 normalMatrix;
425-
uniform vec3 cameraPosition;
426-
427-
varying vec2 vUv;
428-
varying vec3 vColor;
429-
430-
${ common.colors.LinearToSrgb }
431-
${ common.colors.hsv }
432-
433-
void main() {
434-
435-
vUv = uv;
436-
437-
vColor = lookup(color.rgb);
438-
439-
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
440-
441-
gl_Position = projectionMatrix * mvPosition;
442-
402+
let shaders = null;
403+
404+
function getShaders() {
405+
406+
if ( shaders === null ) {
407+
408+
const loader = new TextureLoader().setPath( './textures/tiltbrush/' );
409+
410+
shaders = {
411+
'Light': {
412+
uniforms: {
413+
mainTex: { value: loader.load( 'Light.webp' ) },
414+
alphaTest: { value: 0.067 },
415+
emission_gain: { value: 0.45 },
416+
alpha: { value: 1 },
417+
},
418+
vertexShader: `
419+
precision highp float;
420+
precision highp int;
421+
422+
attribute vec2 uv;
423+
attribute vec4 color;
424+
attribute vec3 position;
425+
426+
uniform mat4 modelMatrix;
427+
uniform mat4 modelViewMatrix;
428+
uniform mat4 projectionMatrix;
429+
uniform mat4 viewMatrix;
430+
uniform mat3 normalMatrix;
431+
uniform vec3 cameraPosition;
432+
433+
varying vec2 vUv;
434+
varying vec3 vColor;
435+
436+
${ common.colors.LinearToSrgb }
437+
${ common.colors.hsv }
438+
439+
void main() {
440+
441+
vUv = uv;
442+
443+
vColor = lookup(color.rgb);
444+
445+
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
446+
447+
gl_Position = projectionMatrix * mvPosition;
448+
449+
}
450+
`,
451+
fragmentShader: `
452+
precision highp float;
453+
precision highp int;
454+
455+
uniform float emission_gain;
456+
457+
uniform sampler2D mainTex;
458+
uniform float alphaTest;
459+
460+
varying vec2 vUv;
461+
varying vec3 vColor;
462+
463+
${ common.colors.BloomColor }
464+
${ common.colors.SrgbToLinear }
465+
466+
void main(){
467+
vec4 col = texture2D(mainTex, vUv);
468+
vec3 color = vColor;
469+
color = BloomColor(color, emission_gain);
470+
color = color * col.rgb;
471+
color = color * col.a;
472+
color = SrgbToLinear(color);
473+
gl_FragColor = vec4(color, 1.0);
474+
}
475+
`,
476+
side: 2,
477+
transparent: true,
478+
depthFunc: 2,
479+
depthWrite: true,
480+
depthTest: false,
481+
blending: 5,
482+
blendDst: 201,
483+
blendDstAlpha: 201,
484+
blendEquation: 100,
485+
blendEquationAlpha: 100,
486+
blendSrc: 201,
487+
blendSrcAlpha: 201,
443488
}
444-
`,
445-
fragmentShader: `
446-
precision highp float;
447-
precision highp int;
448-
449-
uniform float emission_gain;
450-
451-
uniform sampler2D mainTex;
452-
uniform float alphaTest;
453-
454-
varying vec2 vUv;
455-
varying vec3 vColor;
456489

457-
${ common.colors.BloomColor }
458-
${ common.colors.SrgbToLinear }
490+
};
459491

460-
void main(){
461-
vec4 col = texture2D(mainTex, vUv);
462-
vec3 color = vColor;
463-
color = BloomColor(color, emission_gain);
464-
color = color * col.rgb;
465-
color = color * col.a;
466-
color = SrgbToLinear(color);
467-
gl_FragColor = vec4(color, 1.0);
468-
}
469-
`,
470-
side: 2,
471-
transparent: true,
472-
depthFunc: 2,
473-
depthWrite: true,
474-
depthTest: false,
475-
blending: 5,
476-
blendDst: 201,
477-
blendDstAlpha: 201,
478-
blendEquation: 100,
479-
blendEquationAlpha: 100,
480-
blendSrc: 201,
481-
blendSrcAlpha: 201,
482492
}
483493

484-
};
494+
return shaders;
495+
496+
}
485497

486498
function getMaterial( GUID ) {
487499

@@ -490,7 +502,7 @@ function getMaterial( GUID ) {
490502
switch ( name ) {
491503

492504
case 'Light':
493-
return new RawShaderMaterial( shaders.Light );
505+
return new RawShaderMaterial( getShaders().Light );
494506

495507
default:
496508
return new MeshBasicMaterial( { vertexColors: true, side: DoubleSide } );

0 commit comments

Comments
 (0)