Comments (7)
Some progress - render to texture is working but need to figure out proper projection mapping
from janusweb.
Good reference for portal culling: http://tower22.blogspot.com/2011/07/x-ray.html
from janusweb.
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.
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.
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.
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.
Implemented in dev, will go out with next release
from janusweb.
Related Issues (20)
- Issue installing from source Windows HOT 6
- Updated UI
- New homepage
- Release announcement article
- iOS support HOT 2
- Revisit PWA support HOT 4
- Objects loaded before skybox don't set envMap HOT 1
- edit: unable to spawn primitives HOT 1
- Edit mode: debug view stays on
- Edit mode: inspector doesn't update new assets HOT 1
- Edit mode: Improved source editor HOT 3
- Virtual filesystem support
- Edit mode: transform controls doesn't work with pointerlock HOT 1
- npm install issues HOT 4
- Install issues from default docs HOT 2
- npm install --only=prod ERR! what's problem?Thanks HOT 3
- Failed at the [email protected] postinstall script?Thanks HOT 1
- @v1.5.42: physics failing after teleport via portal walkthrough
- v1.5.42(under chrome) ::: adding objects from visual editor while in edit mode is causing room to freeze, very often
- project uses uglify-es but it's abandoned and seems like uglify-js should be used to make it work again
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from janusweb.