Create erasable surface

Work in progress
121

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.

122

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

123

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 = this.app.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 = this.app.scene.layers.getLayerByName("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);
     
    console.log(renderTarget);
    
    this.matRes.opacityMap = opacity;
    this.matRes.update();
    
    layer.renderTarget = renderTarget;
    layer.onPostRender = function(cameraIndex)
    {
        opacity = tempTexture;
        graphicsDevice.copyRenderTarget();
    };
};

// update code called every frame
Shader.prototype.update = function(dt)
{
    
};
124

Render to tempRender.

Copy to renderTarget

graphicsDevice.copyRenderTarget(tempRender, renderTarget);
125

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?

126

No, I think that’s okay.

127

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.

128

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);
}
129

What’s the error with shader?