A couple of problems with rendering to cubemap

steve_wk · March 10, 2021, 3:16pm

I’ve created a project based on the recent render to cubemap example.

I’m having two issues:

Every single frame this error is being fired to the console:

Trying to bind current color buffer as a texture

The reflections seem to be working though, so not sure what that error is about.

No matter the material settings, the reflections are always fully glossy. This is the case whether I set a lower glossiness value on the material in the editor, or set the material.shininess value in the code. No matter what, it is always fully glossy. This is a bit of an issue since it alters the properties of materials which might have varying degrees of glossiness.

Here is my example project: https://playcanvas.com/editor/scene/1107574

Leonidas · March 10, 2021, 3:28pm

Hi @steve_wk,

For your first issue, I think it’s the same problem with this, check it:

It seems you can’t have a cubemap that is being used for both read and write at the same frame.

For your second issue, indeed the specular channel values don’t really affect the material. You can try and play with the Environment attributes that affect the cubemap, @mvaligursky may know more.

steve_wk · March 10, 2021, 3:51pm

An additional follow-up question: is there some reason why I can’t set the scene skybox to be the dynamic cubemap?

I’m trying to do this:

this.app.scene.setSkybox(this.entity.script.cubemapRenderer.cubeMap);

It just comes up blank.
Is this impossible for some reason? I was hoping that setting it at the scene level might mean that the material properties (glossiness values) are taken into account…

Also, I’m confused by your answer to that second part. If you put a cubemap into the environment section a material, then the glossiness value does affect the blurriness of the reflection. Why should it be any different if you add the cubemap dynamically?

mvaligursky · March 10, 2021, 4:07pm

When cubemap gets rendered, it’s not automatically filtered, and that’s what is needed to be able to handle materials with different level of glossiness. Our viewer uses this code currently to prefilter source environment texture (not a cubemap in that case, but cubemap would work as well)

github.com

playcanvas/playcanvas-viewer/blob/50e453bd4be7bb9806bff8ae85c78251c7799ef1/src/viewer.ts#L345-L404


private initSkyboxFromTexture(skybox: pc.Texture) {
    const app = this.app;
    const device = app.graphicsDevice;

    const cubemaps = [];

    const reprojectToCubemap = function (src: pc.Texture, size: number) {
        // generate faces cubemap
        const faces = new pc.Texture(device, {
            name: 'skyboxFaces',
            cubemap: true,
            width: size,
            height: size,
            type: pc.TEXTURETYPE_RGBM.toString(),
            addressU: pc.ADDRESS_CLAMP_TO_EDGE,
            addressV: pc.ADDRESS_CLAMP_TO_EDGE,
            fixCubemapSeams: false,
            mipmaps: false
        });
        pc.reprojectTexture(device, src, faces);

This file has been truncated. show original

this based on a single cubemap generates 6 prefiltered cubemaps, which are used for image based lighting. In the near future (couple of months hopefuly) we’re hoping to address this by some easy to use interface.

Here’s a similar thread where something similar was tested

You can also see http://playcanvas.github.io/#graphics/render-to-cubemap.html where rendered cubemap is prefiltered to another representation (only a single for testing, not 6 as needed for image based lighting)

Chris · July 6, 2021, 6:53pm

Thanks for sharing this great information guys. @steve_wk I ended up borrowing some of the code from your demo and the prefiltering referenced above. Your demo saved me a lot of time fooling around. Dynamic cubemaps are working wonderfully for reflections on the interior of a product that changes frequently, in this case a pool with dynamic materials. It also is great when combined with a box projection to fake a mirror reflection.

A funny thing I ran into is that since the dynamic cubemap is basically bouncing light off of itself, I have it set to render twice because the 2nd cubemap uses lighting information from the first cubemap!

At some point, I’ll try to create a demo project with the setup I have for anyone interested. But, in the meantime, some pics of it in action: