CSS depth and positioning is weird. Make the editor appear 1m away from user.

[brianpeiris]

I worked around #12 for now but ideally the editor should be positioned about 1m away from the user. Right now it appears to be very far away and extremely large. However the editor is always overlaid on top of the 3D WebGL content!! The mixed depth cues are very disorienting. Need to figure out what I'm doing wrong. Maybe @vvuk can help?

[vvuk]

You are unfortunately not going to be able to get proper depth-mixing of the WebGL content and CSS content -- right now they are not sharing the same depth buffer, and are always rendered with WebGL (or rather, non-browser-rendered VR content) rendered first, and then any CSS/browser-VR rendered content going on top. This will be fixed at some point though!

[brianpeiris]

Thanks for the reply @vvuk! I realize that mixing isn't possible any time soon but shouldn't I be able to make it look like the CSS content is ~1m away from the camera? Right now I have it set to translate3d(-100px, 100px, 500px), similar to your simple-css-2.html example. I tried a lower "z" value but of course that makes the CSS content massive so I tried scaling the content or changing the original CSS dimensions but that either made the text too blurred to use or just made the textarea too tiny. What do the "px" values mean anyway?

[capnmidnight]

I'm personally going a different route. Given the cross-browser compatibility issues, I'm opting to implement a text editor.

For printing text in 3-space, I had started with the Three.js 3D text geometry, but that turned out to be O(n^2) somewhere, as typing anything over 7 or 8 characters long quickly grew to be unbearably slow. So now I'm drawing text to a Canvas and making that into a texture: https://github.com/capnmidnight/VR/blob/master/html5/js/vui/vui.js

And for getting text from the keyboard, I have a system for being able to capture input on demand: https://github.com/capnmidnight/VR/blob/master/html5/js/input/KeyboardInput.js

This is pretty rudimentary at this point, as the only use of these features so far has been chat for the online version of my app. But it's actually my ultimate goal to be able to build this sort of stuff out and have a full UI toolkit of panels, buttons, textboxes, etc.

I suspect doing what you're doing, you'd actually want what I call "preamble mode" to be the default and have a key combo to activate navigation mode. Actually, that's a good idea, I'll be making that a feature, to choose what mode is the default and to specify what key combos switch between modes.

[brianpeiris]

Copying @vvuk's comment from reddit:

The units/scale with CSS is.. quite a bit of a hack right now. I'm working on a real fix for this, but it'll take some time -- I'm focusing on polishing off the WebGL support so that we can actually ship it in the near future, and then going back to the CSS issues since those will take time to resolve.

[brianpeiris]

I'm afraid this problem is a little more obvious now since I moved the virtual floor as part of my fix for #8. So now the text editor depth looks quite wrong unless you avoid looking at the edges of the editor. It seems like the eye separation is totally off for the CSS 3D content compared to the WebGL content.

[brianpeiris]

@capnmidnight Thanks for the comment and the suggestions. I might end up actually using your text widget but for the moment this problem is bearable IMO. I like your modes suggestion. I think I'm going to allow navigation via WASD when the text editor is hidden.

[brianpeiris]

The editor is now rendered in the 3D scene.