Coder Social home page Coder Social logo

Comments (4)

trinketmage avatar trinketmage commented on June 26, 2024

Hi,
I am not an expert too, this is an attempt and nothing of a working project, so i am sorry for any misleading :)

The StereoEffect takes in input the renderer, and do the stereo effect for VR.
I wanted to create a HUD on top of it.
After some research, i found that to do a HUD in common WEB 3D applications, you generally put a flat layer on top of everything often simply with HTML DOM, and sometimes you put an orthographic layer into the webGL or canvas scene.
I didn't want to have the HUD as a flat layer in HTML DOM.
So basically, i put a flat layer on top of everything from a certain distance from the camera, but i had troubles to put objects on a flat layer cause you actually have two camera that doesn't look in the same direction, so you have basically have to work with two combined cameras that form a new frustum.
If you put a layer few pixels in front of that fills the base camera frustrum (not with the stereo effect) with a stereo effect, there are some parts of the layer that you wont be able to see if you see them with your stereo cameras.

So for example, even if the crosshair is a flat object, i rendered it as a with two perspective camera. So actually, it is drown on both side of the stereo effect at a certain distance from each stereo camera.
Somehow, if you just put the crossHair in the middle of the screen between the two stereo rendered views, it doesn't seem right when you tried with VR on.
Maybe with objects in the corners (for score bar) it could work but it doesn't seem the right way, and i was thinking of a full HUD solution in one container.

So as there are objects from HUD, that might have a higher distance from the camera that objects from the "game", so for design pattern and to avoid all the z-buffer (kind of distance from the camera problems) it use another scene for the HUD. I was unsure you can do it with stereoEffect.js.
Also i was thinking that, it might be a way with optic to render such a thing, like render on a kind of spherical HUD layer that would appear flat with the stereo effects. But i am still searching for this possibility.

This version of StereoCameras allow just to get cameras from multiple perspective scenes and renderer it on top of each other and that allow to have a HUD completely renderer on top of
i wanted to put HUD objects in its own container.

regards,
Trinket

from three.js-vr-hud.

stefek99 avatar stefek99 commented on June 26, 2024

Thank you.

I read you reply and some of the problems you've encountered - I'm yet to reach them... And then I'll refer to this issue.

One more: ca67bf6#diff-3ec40a1e2a924ba4ba6521185d17b0f2R199

I'm just wondering what is 0.9999 doing?

More: ca67bf6#diff-031f8c8dceed6db3185bda6847533b3dR66

What is listner - never initialised, what's going on?

from three.js-vr-hud.

trinketmage avatar trinketmage commented on June 26, 2024

Sorry, both are residues from other projects.

I think "value = 0.99999" was a variable communicated to shader. After talking with a collègue of mine working with Unity, we kind of agree that, in the case you send 1.0 or 1, it is interpreted by javascript as an integer and send as integer to the shader. So, i am not sure through, but i think, you write 0.99999 to have a float number equal to 1 from javascript to the shader.

The this.listner was there to handle some resize event before the main scene is ready, but it is pointless to keep for this instance.

I will remove those in a next commit.
Thanks for pointing this out.

from three.js-vr-hud.

stefek99 avatar stefek99 commented on June 26, 2024

Thank you for taking your time to answer my rather newbie questions.

I've actually sent you an email (found on your website) mentioning #2 - I've made an effort to make it work - and it kind of works but the experience is terrible...

from three.js-vr-hud.

Related Issues (2)

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.