[SOLVED] Set Texture from function MSAA

Help & Support
1

Hi,

I’m tryin to adapt this MSAA, but i’m struggling with the 2 pre computed functions:

// In the constructor
 this.getSearchTexture = function () {

            return 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAAAhCAAAAABIXyLAAAAAOElEQVRIx2NgGAWjYBSMglEwEICREYRgFBZBqDCSLA2MGPUIVQETE9iNUAqLR5gIeoQKRgwXjwAAGn4AtaFeYLEAAAAASUVORK5CYII=';

        };
        
        /*
         * THREE.js
	this.searchTexture.magFilter = NearestFilter;
	this.searchTexture.minFilter = NearestFilter;
	this.searchTexture.generateMipmaps = false;
	this.searchTexture.flipY = false;
         * */
        
        this.tSearch = new pc.Texture(this.graphicsDevice, {
            // format: pc.PIXELFORMAT_RGB16F,
            magFilter : pc.FILTER_NEAREST,
            minFilter : pc.FILTER_NEAREST,
            mipmaps: false,
            flipY: false
            
        });
        // setting the source then upload
        this.tSearch.setSource(this.getSearchTexture());
        this.tSearch.upload();

    };

    // Our effect must derive from pc.PostEffect
    PostEffectSMAAWeights = pc.inherits(PostEffectSMAAWeights, pc.PostEffect);

    PostEffectSMAAWeights.prototype = pc.extend(PostEffectSMAAWeights.prototype, {
        // Every post effect must implement the render method which 
        // sets any parameters that the shader might require and 
        // also renders the effect on the screen
        render: function (inputTarget, outputTarget, rect) {
            var device = this.device;
            var scope = device.scope;
            
            
            // this.tArea.setSource(this.getAreaTexture());
            // this.tArea.upload();
            // this.tSearch.upload();
            // this.tSearch.setSource(this.getSearchTexture());

            this.resolution[0] = 1 / inputTarget.width;
            this.resolution[1] = 1 / inputTarget.height;
            scope.resolve("uResolution").setValue(this.resolution);
            scope.resolve("tDiffuse").setValue(inputTarget.colorBuffer);
            scope.resolve("tArea").setValue(this.tArea);
            scope.resolve("tSearch").setValue(this.tSearch);
            
            pc.posteffect.drawFullscreenQuad(device, outputTarget, this.vertexBuffer, this.weightShader, rect);

I get this when displaying it in three.js:

Screenshot 2021-01-27 at 10.06.25
Screenshot 2021-01-27 at 10.06.252782×1778 514 KB

But nothing here.

How can i make sure the population of the texture is correct?

Best,

P

1 Like
2

I think you are missing setting the base64 encoded image data on an actual Image, and then setting that Image with the setSource function.

So:

var image = new Image();
image.onload = function () {
    this.tSearch.setSource(image);
}.bind(this);
image.src = this.getSearchTexture();

By the way, it looks like you are using quite old PlayCanvas API there to structure your post effect. Check the latest source for now inheritance from pc.PostEffect is done:

2 Likes
3

Ok thanks, checking it now.

2 Likes
4

Ah, I think you have old post effect scripts because the versions in the Store have not been updated in a long, long time. I’ll get them updated as soon as I can. But yeah, the engine repo is the best place to ‘get latest’.

2 Likes
5

Ok thanks.

It worked perfectly.

Best,

P

1 Like