[SOLVED] Skybox shader for hue/saturation

Help & Support
1

Hello,

Is there a way to access the 3d entity that is used to render the cubemap for the skybox? So I can apply a fragment shader.

I would like to apply a hue/saturation effect to the skybox textures.

Any suggestions?

Best regards,
Leonidas

2

PlayCanvas uses lots of small pieces of shader code called shader chunks to procedurally generate shaders as needed. So you can manually change a specific shader chunk to change the default behaviour to your liking. The default skybox fragment shader chunk is pc.shaderChunks.skyboxHDRPS. The code below sets the shader chunk to the same code it has now:

pc.shaderChunks.skyboxHDRPS =[
   "varying vec3 vViewDir;",
    "uniform samplerCube texture_cubeMap;",
    "",
    "void main(void) {",
    "    vec3 color = processEnvironment($textureCubeSAMPLE(texture_cubeMap, fixSeamsStatic(vViewDir, $FIXCONST)).rgb);",
    "    color = toneMap(color);",
    "    color = gammaCorrectOutput(color);",
    "    gl_FragColor = vec4(color, 1.0);",
    "}"
].join('\n');

So you can set different code to that chunk in one of your scripts. @Mr_F can give you more details on this.

3

Hi Vaios,

Wow, that’s a really nice way to abstract the renderer and make it modular. I think this solves the problem.

One question, if I would like to add more uniforms on the shader, how I will push the values from JS?

Normally in PlayCanvas we do something like this:

shader = new pc.Shader(app.graphicsDevice, shaderDefinition);

var mat = new pc.Material();
mat.setShader(this.shader);
mat.setParameter('uHue', ui.skybox_hue);
mat.setParameter('uSaturation', ui.skybox_saturation);
mat.setParameter('uBright', ui.skybox_bright);
4

That’s a good question and the answer is that I don’t know :slight_smile: That would be a question for @Mr_F :smiley:

5

Hah, thanks! Let’s wait for @Mr_F then.

6

That’s correct. You use setParameter as you describe.

7

Will, tried the following but it didn’t work. Where should I apply the parameter setter?

pc.shaderChunks.skyboxHDRPS.setParameter is not a function
app.scene.skybox.setParameter is not a function
8

As you had it in your previous post - it’s a function on the material. :smile:

9

Where is the reference to the material of the skybox?

app.scene.skybox references a pc.texture not a material! What am I missing?

10

Hi, Leonidas, I assembled a little demo for you: https://playcanvas.com/project/372742/overview/skyboxchunk
Take a look at skyboxShaderReplacement.js and skyboxModified shader.

11

That’s great! Both ways of setting the parameter open up many possibilities on properly using the core engine. Thank you, very much it works perfectly now.

Best regards,

12

Just to let you know, some of the API used in that demo is not completely finalized yet and is subject to change. Feel free to hack though. :wink:

13

Thanks, I’ll keep that in mind.

14

image
image949×358 24.8 KB

What is the reason for the error in the latest version of playcanvas.js

15

Are you using it in a project with a custom shader? Most likely shader code is outdated.

16

Please, create a new topic. This thread is too old to be valid.
Also, please, try to make a simple repro project that shows the issue.