Any way to rotate the environment map in a shader

steve_wk · September 14, 2022, 12:08pm

I would like to add a kind of moving sheen effect to a shader. One way I thought of doing it would be to use the clear coat layer reflecting a rotating environment map.
The material in the Playcanvas editor has no controls to rotate the environment, so I’m wondering whether there is any way to control that in a custom shader? Perhaps by rotating the normals in the environment lookup (although I haven’t found the code for that part of the standard material yet, so not sure if that would work.)

In other words: which shader chunk can I modify to play with the way the environment reflection happens in the clear coat section?

yaustar · September 14, 2022, 12:51pm

We do have skybox rotation:

API: https://developer.playcanvas.com/api/pc.Scene.html#skyboxRotation

Do you need it to be specifically in the shader?

steve_wk · September 14, 2022, 1:00pm

Yes, I want to do this at the shader level, for the cubemap added to the environment section of the material. Not at the global scene level.

yaustar · September 14, 2022, 2:06pm

Looking through the engine code, you might be able to use the following parameter in the standard material:

https://github.dev/playcanvas/engine/blob/72a1d068d11dff06a2de140dce392e2cb5e67cbe/src/scene/materials/standard-material.js#L807-L808

            if (!scene.skyboxRotation.equals(Quat.IDENTITY) && scene._skyboxRotationMat3) {
                this._setParameter('cubeMapRotationMatrix', scene._skyboxRotationMat3.data);
            }

@Leonidas , any input on this?

Leonidas · September 14, 2022, 2:11pm

Right, I haven’t tried it before, but studying the engine source code what Yaustar proposes will work.

I think if the cubeMapRotationMatrix uniform is provided in your material as soon as material.update() is called the relevant shader chunk will be updated to use that rotation.

You can check here how to calculate the rotation matrix in your own script:

github.com

playcanvas/engine/blob/faa2cddff5763e66f1f4e92fd07180fdc0e8a271/src/scene/sky.js#L85

      
        
                material.setParameter('texture_envAtlas', texture);
                material.setParameter('mipLevel', scene._skyboxMip);
            }
            
            
if (!scene.skyboxRotation.equals(Quat.IDENTITY)) {
                _mat4 = _mat4 || new Mat4();
                this._rotationMat3 = this._rotationMat3 || new Mat3();
            
            
    _mat4.setTRS(Vec3.ZERO, scene._skyboxRotation, Vec3.ONE);
                _mat4.invertTo3x3(this._rotationMat3);
                material.setParameter('cubeMapRotationMatrix', this._rotationMat3.data);
            } else {
                material.setParameter('cubeMapRotationMatrix', Mat3.IDENTITY.data);
            }
            
            
material.cull = CULLFACE_FRONT;
            material.depthWrite = false;
            
            
const skyLayer = scene.layers.getLayerById(LAYERID_SKYBOX);
            if (skyLayer) {
                const node = new GraphNode('Skybox');

Ramon · December 12, 2023, 10:14am

Unfortunately this does not seem to work for me.

This is my attempt:


        this.app.assets.find('Glas Panelen', 'material').resource.setParameter('cubeMapRotationMatrix', this.app.scene._skyboxRotationMat3.data);
this.app.assets.find('Glas Panelen', 'material').resource.update();

This should copy the rotation of the scene cubemap if I am not mistaken.

this.app.scene._skyboxRotationMat3.data logs the following:

If want custom rotation to the environment map, to lets say rotate 180 degrees on y axis, how should I convert my x, y, z values to Mat3?