Create erasable surface


#21

Okay, so render target needs to be another entity in the scene with the texture/material on it? Or is this the old method like from the RTO tutorial?


#22

No. Render target is not an entity.
Render target is:

let renderTarget = new pc.RenderTarget(…)

You have to create it exactly like in API reference.


#23

Ok, so I misunderstood when you said I didn’t need depth, I removed the whole line instead of just that.
It should have just been var renderTarget = new pc.RenderTarget(graphicsDevice, texture);


#24

Right.

Now you have to set this target to your surface layer.


#25

Right, so in the API that line is layer.renderTarget = renderTarget; Do I replace layer with the name of my layer, or do I add the name after (i.e. layer.Surface.renderTarget = renderTarget)?


#26

No, you have to resolve your layer from scene by name.

pc.app.scene.layers.getLayerByName("Surface")


#27

Extending off of that, I should make a variable for that data say: var layer = pc.app.scene.layers.getLayerByName("surface") and then layer.renderTarget, etc.


#28

Of course.

I miss this obvious things, but you definitely have to store your layer reference somewhere.


#29

And the temporary texture would be something like: var tempTexture = texture?


#30

It should be exactly like your opacity map.
You have to create it by constructor.

If you just set it by = you set reference to original one.


#31

I feel like I’m still missing something here. I need actual texture assets to use the renderTarget, and the textures I’m creating in script need to reference these? And the opacity map should just be a png texture with nothing visible on it?

Sorry if I seem to be running in circles, I learn best from clear visible examples. If I could see an actual working example with current script syntax I could figure out where I’ve gone wrong.


#32

No. You have diffuseMap - its texture of your material, not scratched.

You create opacityMap - pc.Texture, which you use for a)RenderTarget and b) opacityMap for your scratch material.

Then you create temporaryOpacityMap. This texture you need to copy opacityMap, because webGL can’t render in the same texture. Don’t clone opacityMap, create a new one.

So in a sum you have:

  1. opacityMap
  2. temporaryOpacityMap
  3. renderTarget => opacityMap
  4. Scratch material with this opacityMap

Me too. But this method became available two weeks ago.


#33

So from that

  1. My opacity map is this:
var texture = new pc.Texture(graphicsDevice,
    {
        width: 64,
        height: 32,
        format: pc.PIXELFORMAT_R8_G8_B8_A8
    });

Since my diffuseMap texture file is 64X32.

  1. Then I just do the same thing and call it temp.

  2. I set renderTarget to texture from 1

  3. Not sure about this.

I’m about to head off for the weekend and I won’t be able to work on this again until Monday.


#34
  1. You have a material. Probably on your mesh. You have to resolve it somehow. I guees it’s pc.StandardMaterial

Then you set it’s opacityMap to yours.

material.opacityMap = opacityMap;
material.update();

Okay, i’ll be there.


#35

@mikefinch Alright so, I make a reference to the material on my mesh using pc.StandardMaterial, then set the opacityMap, makes sense.

This is what I’ve gone for:

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

Shader.attributes.add('material', {type: 'asset', assetType: 'material'});

// initialize code called once per entity
Shader.prototype.initialize = function() 
{
    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);
    
    this.material = new pc.StandardMaterial();
    this.material.opacityMap = opacity;
    this.material.update();
    
    layer.Surface.renderTarget = renderTarget;
};

There’s an error on line 9 saying graphicsDevice is not defined.


#36

use this.app.graphicsDevice instead

Okay, I would suggest to test it with already prepared opacityMap, to make sure it works.
Just create an image with transparent pixels and upload it instead of created one.


#37

Other errors pop up after fixing graphicsDevice.
Line 27: cannot set property ‘opacityMap’ of null. Removed line 26 to fix this and got:
Line 28: this.material.update is not a function.Removed that line and everything seems to work, except I haven’t got my pointer set up.


#38

What is in your this.material then? Did it create?


#39

Right now it’s the material I assigned to it in the editor using the attribute.
It seems after calling this.material = new pc.StandardMaterial(); it gets set to null.


#40

Okay, then don’t create material.

Remove only this line:
this.material = new pc.StandardMaterial();

It should work with custom opacity texture.