question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[EffectComposer] Issue with 2 consecutive RenderPass

See original GitHub issue

The link

http://demo.bkcore.com/threejs/webgl_tron_glow.html

The code

glowcomposer = new THREE.EffectComposer( renderer, renderTarget );

glowcomposer.addPass( renderModelGlow ); // RenderPass
glowcomposer.addPass( hblur ); // ShaderPass
glowcomposer.addPass( vblur ); // ShaderPass
glowcomposer.addPass( effectSave ); // SavePass

glowcomposer.addPass( renderModel ); // RenderPass
glowcomposer.addPass( finalPass ); // ShaderPass

The context

I got two scenes with the same object/camera/light. One with the diffuse texture (http://demo.bkcore.com/threejs/webgl_tron.html) and one with a glow texture (glowing areas are white on black).

My rendering pipeline is as follow : I first render the glow scene and apply a H/V blur to it, then store the output into a frameBuffer using a SavePass. Then I want to render the diffuse scene. And finally mix that with the glow framebuffer.

The issue

My glow sampler2D is passing well to my finalPass shader, but as you can see in the demo, the second RenderPass call for the diffuse scene is not performing well. It only outputs black.

I tried to render the diffuse scene in a single Render pass and that works. It’s when I use it as a second RenderPass that it’s not working.

Any ideas ?

Thank you. Thibaut D.

Issue Analytics

  • State:closed
  • Created 12 years ago
  • Comments:18 (7 by maintainers)

github_iconTop GitHub Comments

9reactions
felixturnercommented, Sep 30, 2016

Seems like the original demo is no longer working:

FWIW I made a stripped-down demo of selectively applying FX and composing via Additive Blend (using Three.js v79) here: https://www.airtightinteractive.com/demos/selective-fx/

0reactions
netpraxiscommented, Oct 30, 2015

Hey bbiswas, can you add where you created g_occlusion_buffer for this part:

var renderModelOcl = new THREE.RenderPass( g_occlusion_buffer, g_occlusion_camera );

Read more comments on GitHub >

github_iconTop Results From Across the Web

Can't implement post.processing with EffectComposer in ...
Im trying to implement post-processing effects in Three.js through this example here: ...
Read more >
EffectComposer – three.js docs
Used to implement post-processing effects in three.js. The class manages a chain of post-processing passes to produce the final visual result. Post-processing ...
Read more >
ThreeJS OutlinePass error on Vertex shader not compiled
Trying to replicate ThreeJS outline postprocessing example, but I'm facing an error on some uncompiled Vertex shader.
Read more >
Customizing Render Pass Setup - Apple Developer
It simply encodes the two passes sequentially, and Metal ensures they run in that order. The sample encodes both render passes into one...
Read more >
(WebGL) Animated selective glow in Three.js - Blog - BKcore
EffectComposer to render the glow passes. ... This is a safe way to prevent unexpected rendering issues, because Three.js and the WebGL ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found