Giter Club home page Giter Club logo

Comments (7)

jbaicoianu avatar jbaicoianu commented on July 28, 2024

Some progress - render to texture is working but need to figure out proper projection mapping

from janusweb.

jbaicoianu avatar jbaicoianu commented on July 28, 2024

Good reference for portal culling: http://tower22.blogspot.com/2011/07/x-ray.html

from janusweb.

marciot avatar marciot commented on July 28, 2024

Interesting. So you are rendering to a texture in 3D space?

My first inclination would have been to render both 3D scenes to an off-screen buffer, from the identical point of view in each, with the portal done using a flat color. Then as a post-processing step, do a chromakey to blend the second framebuffer into the first only for the pixels corresponding to the portal.

I've never done this in WebGL, mind you, so it could well be impossible, but if it were possible, it would seem way easier than doing the texturing in 3D space.

-- Marcio

from janusweb.

jbaicoianu avatar jbaicoianu commented on July 28, 2024

My first attempt used that approach yes, but it turned out to not look very good, projecting a 3d world onto a 2d plane in a 3d world is the equivalent of watching a 3d game on a 2d screen - it's not really 3d anymore.

The approach we've had the most success with is a stencil-based approach, where you draw your main scene and then use the stencil buffer to render the visible portals on top of your existing scene, with some additional work to ensure proper depth buffer handling between worlds. This allows you to maintain perspective when looking through portals, rather than feeling like you're looking at a TV - and it works for both eyes in VR mode, so you get full stereoscopic depth across portals.

from janusweb.

marciot avatar marciot commented on July 28, 2024

If I understand you correctly, the stencil based approach may be effectively the same as the chroma-key approach I am suggesting? Let me clarify: I would render the primary scene (scene A) twice, once for each eye, into two 2D framebuffers. Then I would render the scene on the other side of the portal (scene B) twice, once for each eye, into 2D framebuffers.

Now, in a post processing step, I would take both left eye framebuffers, take only the pixels corresponding to the portal in scene A and replace them with the pixels from scene B. I would do the same for the two framebuffers corresponding to the right eye to complete the stereo effect.

Is this what you are doing? I am vaguely familiar with the term stencil as it is used in WebGL, but I do not know the specifics of it. Chroma-key is a term from the cinematography world.

-- Marcio

from janusweb.

jbaicoianu avatar jbaicoianu commented on July 28, 2024

It's effectively the same, but instead of using a specific color to indicate areas you want to replace, you just supply a mask which lets you render only to a specific area. This mask can be created by projecting any geometry, so you can use any shape where you want the other world to show through. So the mask is basically the same as your chromakey index, but we don't have to do an extra pass to blend the two scenes - using the stencil is more efficient because it lets the GPU discard any fragments which lie outside of the stencil, and we just render those parts on top of the old scene, so there's no additional image blending step.

from janusweb.

jbaicoianu avatar jbaicoianu commented on July 28, 2024

Implemented in dev, will go out with next release

from janusweb.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.