ERROR: Trying to bind current color buffer as a texture

Help & Support Gaussian Splatting
1

Hello everyone!

I’m trying to apply reflections more precisely in my project.

I’m basing this on this project:

PlayCanvas Examples

but I always come across the error:

Trying to bind current color buffer as a texture

I don’t know what it could be anymore.

Below is my code that I’m implementing at run time:

import { pcType } from '@/app/app/types';
import { AppBase, Entity, Layer, ScriptComponent, ScriptType, StandardMaterial, Texture } from 'playcanvas';

type cubemapRendererScript = {
  cubemapRenderer: { cubeMap: Texture } & ScriptType;
} & ScriptComponent;

// Aplica refração nos materiais translúcidos
export default function applyReflectionOnEntityMaterial(pc: pcType, entity: Entity) {
  const app = pc.app as AppBase;
  const entities = entity.find(() => true);

  entities.forEach((node) => {
    const entity = node as Entity;

    if (entity.render?.meshInstances) {
      entity.render.meshInstances.forEach((meshInstance) => {
        const material = meshInstance.material as StandardMaterial;

        // if (material.metalness > 0 && !material.cubeMap) {
        const worldLayer = app.scene.layers.getLayerByName('World') as Layer;
        const skyboxLayer = app.scene.layers.getLayerByName('Skybox') as Layer;

        entity.addComponent('camera', {
          clearColorBuffer: true,
          layers: [worldLayer.id, skyboxLayer.id],
          enabled: false,
          toneMapping: pc.TONEMAP_ACES,
        });
        entity.addComponent('script');
        entity.script?.create('cubemapRenderer');

        console.log(1111);
        material.cubeMap = (entity.script as cubemapRendererScript)!.cubemapRenderer.cubeMap;
        material.update();

        // entity
        //   .find((node) => node.name.includes('CubeMapCamera'))
        //   .map((node) => {
        //     node.remove();
        //   });
        // }
      });
    }
  });
}

the cubemapRenderer script is:

engine/scripts/utils/cubemap-renderer.js at 2cc809eb27796fcc86adffe4ddab003d9283a0c7 · playcanvas/engine

I call this code right after inserting an entity into the scene.

Please help me!

2

it most likely means that the mesh you apply the reflection texture on, is also being rendered to reflection texture.

Typically, you’d put a mesh like this on a separate layer, and do not add this layer to the camera that render the reflection texture, only to the main camera that uses that texture.

1 Like
3

Hey Julio! :wave:

That error — “Trying to bind current color buffer as a texture” — usually means you’re trying to use the same render target (like the screen buffer) as both the input and output during rendering, which causes a conflict.

Since you’re assigning the cube map right after creating the entity and before the frame is rendered, it’s possible that the cubemapRenderer script hasn’t finished rendering the cubeMap texture yet when you try to assign it to the material.

You might try delaying the assignment of material.cubeMap until after the cube map is fully rendered. One quick way to test this is by wrapping the assignment in a small setTimeout (as a temporary debug fix) or better, triggering it after the script signals it has finished rendering.

Let me know if you can share how cubemapRenderer works internally — that might help confirm whether it has a callback or flag for when rendering is complete.

Hope this helps!

1 Like
4

here is the code:

5

study how the excludedLayer is used here: PlayCanvas Examples

you need to do something similar … and place the mesh that uses the cube map on that layer. And make sure that layer is not used to render the cubemap.

1 Like
6

Thanks everyone for your support!

I haven’t found the solution yet, but I noticed that these events are never called:

 // Before the first camera renders, trigger onCubemapPreRender event on the entity.
    this.evtPreRender = this.app.scene.on('prerender', (cameraComponent) => {
        if (cameraComponent === firstCamera) {
            this.entity.fire('onCubemapPreRender');
        }
    });

    // When last camera is finished rendering, trigger onCubemapPostRender event on the entity.
    // This can be listened to by the user, and the resulting cubemap can be further processed (e.g pre-filtering)
    this.evtPostRender = this.app.scene.on('postrender', (cameraComponent) => {
        if (cameraComponent === lastCamera) {
            this.entity.fire('onCubemapPostRender');
        }
    });

What could it be?

7

Hello everyone again.

After much persistence, I ended up abandoning this solution and using a simpler approach.

But anyway, thanks!