Trying to use StereoEffect with CSS3dRenderer

Questions
1

I’m trying to view the example of molecules in stereo devices
https://threejs.org/examples/?q=css3d#css3d_molecules

The implementation seems easy but dosen’t work

renderer = new CSS3DRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.getElementById( ‘container’ ).appendChild( renderer.domElement );

effect = new StereoEffect( renderer );
effect.setSize( window.innerWidth, window.innerHeight );

…

function render() {
//renderer.render( scene, camera );
effect.render( scene, camera );
}

It generate a error in console: “renderer.clear is not a function”

I’m very confusing abaut that. Is posible to do that?

2

Hm. Are they compatible at all?

Here is a demo with a rather old Three.js (r73):

http://ebspace.com/demo/three/examples/css3dstereo_periodictable.html

image

2 Likes
3

Thank you @PavelBoytchev it’s a interesting demo. But it’s not seems the way to do that today.

In r170 you have to create the CSS3Drender and set it into the effect. There is not a CSS3DStereoRenderer in the library to use this.

This is a interesting solution but i want to know if i’m doing somthing wrong here.

4

If by stereo devices, you mean VR headsets, I don’t think there are any that support css"3d" dom operation in a meaningful way.
You would need to implement this in GL for it to work with headsets.

5

Hello @manthrax , the Stereo effect that I’m working is that example three.js examples

CSS3D and this Stereo, I think it must be possible but i get this error: “renderer.clear is not a function”

6

I work a little more in the issue, and I create this methods in CSS3DRenderer.js constructor

	this.clear = function () {

	};

	this.setScissorTest = function () {

	};

	this.setScissor = function () {

	};

	this.setViewport = function () {

	};

At this moment, the renderer stop the errors but the effect not occur either.

7

Yeah none of that is gonna work. VR devices cannot display dom elements in VR 3d , full stop.

Rendering webgl stuff in 3d on a headset pretty much requires rendering it via GL.

The DOM is not designed to display on a headset unless the webXR/VR api’s are used, and those are webGL api’s.

3 Likes
8

But you can use this effect in a simple phone. And this device can display dom elements.

And I also try the Anaglyph effect, and either dosent works in this way.

9

Yes, that’s the pitfall of old releases. CSS3DStereoRenderer has been removed in r77. You may study the old code to see how things have been done … and then reimplement them with the new Three.js. Just using the code as it is will not work in most of the cases.

If I were desperately needing stereo CSS, I’d make two canvases next to each other, then render the scene with slightly offset cameras. This might work for using stereo glasses with a smartphone. But for VR headsets there is a fundamental issue, as HTML does not pass through while in VR session, unless it is drawn as an image.

1 Like
10

thank you @PavelBoytchev , this is the point that I have to understand, to take a way in the project. Thank you again.

1 Like