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.

Unable to implement Depth Peeling example without changing WebGLRenderer

See original GitHub issue

This is a continuation of #19305, which got stuck at some point

I would like to contribute an order independent transparency rendering example using Depth Peeling algorithm. Implementation requires to render transparent objects multiple times + one render of opaque objects. Current WebGLRenderer.setTransparentSort is not enough for that. It would be nice to have an option to set whole custom WebGLRenderLists.

Additionally extendable WebGLRenderer would open alot of new opportunities, i.e. progressive rendering, custom backgrounds… you name it.

Some stuff can be done by rendering multiple passes using EffectComposer instead, but it adds unwanted CPU overhead and increases code complexity. I suppose composer should be used for posteffects, not customizing rendering pipeline.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:2
  • Comments:12 (5 by maintainers)

github_iconTop GitHub Comments

2reactions
pailheadcommented, Jun 4, 2020

@taphos you should edit the title then not to mention some specific algorithm.

1reaction
taphoscommented, Jun 4, 2020

@gkjohnson @pailhead This ticket is about WebGLRenderer design, please create a new thread for depth peeling implementation discussion.

Read more comments on GitHub >

github_iconTop Results From Across the Web

[Solved]-depth peeling invariance in webgl (and threejs)-three.js
Coding example for the question depth peeling invariance in webgl (and threejs)-three.js.
Read more >
Depth peel and transparency - Questions - three.js forum
I'm experimenting with depth peeling using three.js. I've struggled a bit with achieving the correct blending. I have two examples: The ...
Read more >
Can depth peeling be implemented without any shader?
Yes, you can do it if you have GL_ARB_depth_texture & GL_ARB_shadow, although it is fiddly. GL_ARB_occlusion_query is very useful as well, ...
Read more >
Depth peeling successfully implemented in WebGL
In the easy-to-use WebGL-based GlowScript 3D programming ... my chagrin that this depth peeling transparency scheme fails on some platforms, ...
Read more >
How to use lighting and WebGLRenderer in Three.js
AmbientLight(0xf6e86d);. This code will illuminate the cube object with a green color. threejs light renderer example. Directional.
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