Create erasable surface


I think it may be something on my end, I’m still having trouble with my laptop because I still have to wait another day or so before they can repair it.


Post your final code here, I’ll take a look.


As I posted this, my laptop crashed…
Here’s the final code:

var Shader = pc.createScript('shader');

Shader.attributes.add('material', {type: 'asset', assetType: 'material'});
Shader.attributes.add('vs', {type: 'asset', assetType: 'shader', title: 'Vertex Shader'});
Shader.attributes.add('fs', {type: 'asset', assetType: 'shader', title: 'Fragment Shader'});

// initialize code called once per entity
Shader.prototype.initialize = function() 
    var graphicsDevice =;
    var vertexShader = this.vs.resource;

    // dynamically set the precision depending on device.
    var fragmentShader = "precision " + graphicsDevice.precision + " float;\n";
    fragmentShader = fragmentShader + this.fs.resource;

    // A shader definition used to create a new shader.
    var shaderDefinition = {
        attributes: {
            aPosition: pc.gfx.SEMANTIC_POSITION,
            aUv0: pc.gfx.SEMANTIC_TEXCOORD0
        vshader: vertexShader,
        fshader: fragmentShader
    this.matRes = this.material.resource;
    var layer ="Surface");
    var opacity = new pc.Texture(graphicsDevice,
        width: 64,
        height: 32,
        format: pc.PIXELFORMAT_R8_G8_B8_A8
    var tempTexture = new pc.Texture(graphicsDevice,
        width: 64,
        height: 32,
        format: pc.PIXELFORMAT_R8_G8_B8_A8

    var renderTarget = new pc.RenderTarget(graphicsDevice, opacity);
    var tempRender = new pc.RenderTarget(graphicsDevice, tempTexture);
    this.matRes.opacityMap = opacity;
    layer.renderTarget = renderTarget;
    layer.onPostRender = function(cameraIndex)
        opacity = tempTexture;

// update code called every frame
Shader.prototype.update = function(dt)


Render to tempRender.

Copy to renderTarget

graphicsDevice.copyRenderTarget(tempRender, renderTarget);


Okay, no errors. One question, not sure if this matters at all but the unscratched texture has no alpha data, do i need to add that somehow?


No, I think that’s okay.


Alright then. How do I get this thing to erase at point of click? I already have a script that gets the position of the cursor, I just need to get it “scratching” the surface on click.

layer.onPostRender = function(cameraIndex) is saying camerIndex is undefined.


Found the shader tutorial project and figured I’d give something a shot. Everything seems to work, except the vertex shader doesn’t compile.
This is the vertex shader:

varying vec2 vUv0;

uniform sampler2D uDiffuseMap;

void main(void)
    vec4 color = texture2D(uDiffuseMap, vUv0);

    gl_FragColor = vec4(1.0);


What’s the error with shader?