Gpu computation renderer gp gpu technique x effectcomposer issues

Questions
1

i’m sick and tired, i don’t know if this is a bug or what, but i’ve been trying to fix this to no end
i’m trying to add bloom to my particles, but as soon as i add the line composer.addPass( bloomPass ); the gpu computation renderer buffer texture breaks and instead renders the scene like a normal webglrenderer. i attatched screenshots of spector with bloom on & off + videos demonstrating both cases

composer.addPass( bloomPass ); is the only line that causes this, without it it works perfectly

If you have any idea what could be causing this please let me know, i’ve been stuck on this for so long

image
image1920×1080 167 KB

image
image1920×1080 219 KB

image
image1827×904 185 KB

image
image1920×1080 320 KB

2

You’re probably gonna have to post a fiddle or glitch or codepen to get traction on this.
Can you make a minimal repro of the issue? I’ve used bloom/post for gpu particle systems before and didn’t have tooo much trouble… Maybe some interaction with rendertarget not being reset or the effects pass not sourcing from the right buffer…

4

did ya figure it oot?

5

not really but almost, i accidentally posted the wrong code XD

after some digging i finally found an example that uses gpurenderer with effectcomposer, they don’t use gpurenderer.compute, but gpurenderer.dorendertarget with a custom material (instead of gpurenderer.createvariable) instead.
it worked for me but it doesn’t pass the previous frame’s position as texturePosition and instead only inputs the initial position

the project is quite big and it uses some unconventional ways of importing stuff so getting it on codepen would be quite some labor, but i’ll post the most relevant code here. if you notice something weird please let me know :pray:

var particleMaterials = [];
var gpuCompute;
var gpuRenderTarget;

function addParticleSystem(params) {
    GPGPUinit(params.WIDTH);
    particleMaterials.push(params.material)
    updateFunctions.push(updateParticles);
}

function updateParticles(params) {
    renderer.setRenderTarget(null);
    gpuCompute.doRenderTarget(positionVariable, gpuRenderTarget);

    particleMaterials[params.id].uniforms.positionTexture.value = gpuRenderTarget.texture;
    positionVariable.uniforms.time.value = params.time;
}

function GPGPUinit(WIDTH) {
    gpuCompute = new GPUComputationRenderer(WIDTH, WIDTH, renderer);

    gpuRenderTarget = gpuCompute.createRenderTarget();

    dtPosition = gpuCompute.createTexture();
    fillPositions(dtPosition);
    console.log(dtPosition);

    positionVariable = new ShaderMaterial(
        {
            fragmentShader: fpfsims,
            defines:
            {
                resolution: 'vec2(' + WIDTH + ', ' + WIDTH+ ')'
            },
            uniforms:
            {
                texturePosition: { value: dtPosition }
            }
        }
    )

    //positionVariable = gpuCompute.addVariable('texturePosition', fpfsims, dtPosition);

    positionVariable.uniforms['time'] = { value: 0 };

    positionVariable.wrapS = RepeatWrapping;
    positionVariable.wrapT = RepeatWrapping;

    const error = gpuCompute.init();

    if (error != null) {
        console.log(error);
    }

}

function fillPositions(texture) {
    let arr = texture.image.data;
    for (let i = 0; i < arr.length; i = i + 4) {
        let x = Math.random();
        let y = Math.random();
        let z = Math.random();

        arr[i] = x;
        arr[i + 1] = y;
        arr[i + 2] = z;
        arr[i + 3] = 1;
    }
}

function render() {
	renderer.clear();
	for (let i = 0; i < updateFunctions.length; i++)
	{
		updateFunctions[i]({id: i, time: time});
	}

	time += 1;

	controls.update();
	renderer.setRenderTarget(null);
	composer.render();
	//renderPostProcessing();
	requestAnimationFrame(render);
}
render();


const sizes = {
	width: window.innerWidth,
	height: window.innerHeight
};

var renderTarget = new WebGLRenderTarget(sizes.width, sizes.height);


var renderer = new WebGLRenderer({
	canvas: canvas,
	alpha: true,
	antialias: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(sizes.width, sizes.height);
renderer.autoClear = false;

const composer = new EffectComposer(renderer);

var scene = new Scene();
scene.background = new Color(0x000000);

var ppScene = new Scene();

//addPass();

const camera = new PerspectiveCamera(100, sizes.width / sizes.height, 0.01, 10000);
scene.add(camera);

camera.position.set(0,0,-10);

const renderPass = new RenderPass( scene, camera );
composer.addPass( renderPass );

const bloomPass = new UnrealBloomPass( 1, 1, 0 );
bloomPass.renderToScreen = true;
composer.addPass( bloomPass );

a proper gpucomputationrenderer documentation would be very much helpful

6

also do u happen to have a github repo of your projects? maybe i can figure it out by looking at them. documentation on this stuff is beyond nonexistent

7

I used post/bloom in this toy I made:

https://136.24.178.125/tgpu/index.html

It’s not using GPUComputationRenderer. It’s all from scratch and uses MultiRenderTarget but the principles should be the same.

8

i used this one as base on my postprocess - https://didisoftwares.ddns.net/i_render.js
its easy to implement new shader materials, and postprocess, and easy to enable disable by “filters.BLOOM.enabled=true or false”
All elements on Layer = 10 as bloom active

1 Like
9

looks super cool thank you

1 Like