EDIT: Shader only works with GUI - why?

Questions
,
1
Old Question

I have been trying to implement the sky shader example in my project but keep just getting a black ‘sky’. I struggled to get my local project working live anywhere - but it was based initially on this starter project.

I have made a glitch where I have tried to implement the sky shader into said starter project and I get the same result of a black sky.
https://glitch.com/edit/#!/sky-shader-test?path=src%2Fmain.js%3A25%3A16

I can’t see anything happening in the official example that doesn’t happen in this glitch app so i’m confused why it isn’t working.

The glitch link was broken so I have updated the original glitch ‘sky-shader-test’ - I hope the link works, i’m not sure what happened to the last one.

I’m trying to work out two things: why I can only get the sky working when i use GUI to input values and not when I want to hard code said values.

I have also noticed that the ‘exposure’ doesn’t act the same way that the example does. It affects the brightness of the cube but not the sky itself.

2

When opening this glitch, the following error appears:

No project found at tested-royal-fascinator, perhaps a typo?

3

Thanks @Mugen87 I must have broken the link somehow (new to glitch).

4

I couldn’t figure out how to get the glitch to rebuild bundle.js, but it’s probably because you’re only setting all the uniforms within the guiChanged method:

function guiChanged() {
  var uniforms = sky.material.uniforms;
  uniforms['turbidity'].value = effectController.turbidity;
  uniforms['rayleigh'].value = effectController.rayleigh;
  uniforms['mieCoefficient'].value = effectController.mieCoefficient;
  uniforms['mieDirectionalG'].value =
    effectController.mieDirectionalG;

  var theta = Math.PI * (effectController.inclination - 0.5);
  var phi = 2 * Math.PI * (effectController.azimuth - 0.5);

  sun.x = Math.cos(phi);
  sun.y = Math.sin(phi) * Math.sin(theta);
  sun.z = Math.sin(phi) * Math.cos(theta);

  uniforms['sunPosition'].value.copy(sun);

  renderer.toneMappingExposure = effectController.exposure;
  renderer.render(scene, camera);
}

If you don’t want a GUI, move all these lines out of this function.

5

Thanks for looking. I use rollup -c "rollup_dev_config.js" -w

I will try again - initially I tried implementing without the GUI and setting the uniforms seperately, but kept being faced with a black render. Will update if I can recreate.

6

This is what I meant. When I remove GUI all together, and try to set uniforms and sun position myself, I can’t see the sky.

7

You are not setting uniforms correctly. You can’t do:

sky.material.uniforms = {
	turbidity: 10,
	rayleigh: 3,
	mieCoefficient: 0.005,
	mieDirectionalG: 0.7,
	inclination: 0.49, // elevation / inclination
	azimuth: 0.25, // Facing front,
	exposure: 0.5,
};

it should be:

// Add Sky
const sun = new Vector3();

var theta = Math.PI * ( 0.49 - 0.5 );
var phi = 2 * Math.PI * ( 0.25 - 0.5 );

sun.x = Math.cos( phi );
sun.y = Math.sin( phi ) * Math.sin( theta );
sun.z = Math.sin( phi ) * Math.cos( theta );

const uniforms = sky.material.uniforms;

uniforms.turbidity.value = 10;
uniforms.rayleigh.value = 3;
uniforms.mieCoefficient.value = 0.005;
uniforms.mieDirectionalG.value = 0.7;
uniforms.sunPosition.value.copy( sun );

Updated demo: https://hexagonal-foul-kale.glitch.me

1 Like
8

Thanks @Mugen87 I remixed and rebundled your glitch without making changes and it looks like this:


this

The ‘exposure’ now does what I expect with the sky, but no longer affects the cube. There are no lights in the scene - so how was the cube being lit previously? — strangely in my local project the loaded objects ARE affected by toneMappingExposure, but the sky is not. I’m currently reading through docs for both to try and understand.

9

You previously had an instance of HemisphereLight in your scene.

10

Ah so I did