I'm trying to show HTML content in 3D alongside a Forge mode using the ThreeJS CSS3dRenderer (https://threejs.org/docs/#examples/en/renderers/CSS3DRenderer).
An example of the functionality: http://learningthreejs.com/data/2013-04-30-closing-the-gap-between-html-and-webgl/index.html
In purely a normal ThreeJS context the the steps needed for that are:
Create a ThreeJS scene #1 for the DOM content.
Create another scene #2 for the 3D content.
Add CSS3DObjects with the HTML content into scene #1
Add a matching 3D element into scene #2 with blending enabled. This makes the HTML content able to occlude the objects in scene #2.
Add other 3D objects into scene #2.
Render #1 with CSS3DRenderer and #2 with the normal WebGLRenderer.
In the Forge viewer context scene #2 is replaced with an overlay scene.
I applied the tricks featured here https://forge.autodesk.com/blog/transparent-background-viewer-long-last to make the CSS scene visible through the viewer scene and that works ok, except for the strange effect that when the renderer alpha is enabled elements in the overlay scene are only rendered when the occlude the Forge model.
The problem I'm having is point 4. In the case of two normal ThreeJS scenes the position, rotation and scale of the CSS3DObject in scene #1 can just be copied to the object in scene #2 and they match perfectly. Not so between a ThreeJS scene and the viewer's overlay scene as the units don't match up. (Or that's how I've reasoned it.)
Is there some way I can transform between these units?
According to our Engineering - hats off for Cleve to put the demo together:
The camera you are using NOP_VIEWER.impl.camera isn't a THREE camera. It is a UnifiedCamera defined by LMV to hold both a perspective and orthographic camera. You need to get the right camera from the UnifiedCamera and use that for the render. Just realized that the CSS3DRenderer was taken from a more recent version of THREE.js and it assumes things that aren't true about THREE.js r71 that LMV uses. I noticed that it uses camera.isPerspectiveCamera to decide when a camera is perspective, That isn't defined in r71 which uses instance of THREE.PerspectiveCamera.
camera = new THREE.PerspectiveCamera(
45, window.innerWidth / window.innerHeight, 0.1, 4000
);
The CSS3DRenderer renders into a flat plane that is composited with the LMV 3D scene. I found an example that faked putting the CSS3D scene with a WebGL scene by zapping transparent holes in the WebGL scene where CSS3D objects were in front of the WebGL scene. This is the example: https://codepen.io/Fyrestar/pen/QOXJaJ
Related
I need to generate a Depth Mask image of my 3D environment in Spark AR. I need this so I can use it as a Depth Mask in a Scene Render Pass for a glow effect. Currently, the glow is rendering over the top of other objects in my scene. I can't just render everything else on top because the user can move around and view the scene from any angle.
If I create new "Empty (2d)" project then a scene with 1 camera is pre-created there.
The camera default position and rotation is more like 3d scene though: position=-10,10,10 rotation=-35,-45,0 projection="Perspective".
If I add a label in the scene then new Canvas is created with another camera with these properties: (pos=0,0,1000, rot=0,0,0, projection=ortho). This camera is more like 2d way.
The default project settings is: design size=960x640 with fixed width.
Now, the label is shown in the middle of the canvas/screen even though the label's position=0,0.
Canvas grid shows the origin at bottom-left corner.
I assume that only the second camera with ortho projection is used because it has higher priority. The main camera is of no use at this moment. Is this correct? Is there any purpose for the main camera in 2d application?
why is the label shown in the center of the canvas? It's center position is at (480,320). The label is direct child of the canvas. What controls the origin in the canvas?
if I create a node and place another label (pos=0,0) in that node then again the label is in the center of the node. Where do I set the parent node coordinate system origin?
little off topic question: where do I set the scene which is shown at app startup?
The application I am writing is not a game, but does require many of the features one would use in a game... displaying a 2D scene, moving the camera to pan and zoom, rotating or otherwise animating objects within the scene. But the display of the scene will be controlled via numerous regular windows controls.
The best comparison I can think of right now is a level editor. The majority of the user interface is a standard window with panes that contain different controls. The scene is contained in another child window. When the user makes adjustments such as camera location, the scene responds accordingly.
So far, everything I've seen about cocos is geared around a single window. Is it possible to embed a scene into a child window as I've described?
You can add your custom layer to your main scene using Director::getInstance()->getRunningScene()->addChild(...) function
I was wondering how to draw over a video like this.
http://www.bannerblog.com.au/2009/06/burger_king_sharpie.php
I'm not sure that in the example is drawing process over video. As for me It's a 3d model with video background. And you could sync prerecorded states with 3d object transformations (position, rotation, mesh transformations), or create well textured object.
Here for your tutorial how to draw over the 3D objects
Easy! Use Adobe After Effects (or any number of other compositing programs).
I am mixing the CSS3D Renderer with WebGL Renderer to add HTML elements in 3D space to a WebGL scene. The CSS3DObject is in front of WebGL Meshes even though the WebGL Renderer has a higher z-index.
Here is the jsfiddle http://jsfiddle.net/kd9Tc/
This is what the scene looks like. Note the back view.
Whenever the CSS3DObject hits a mesh, I would like the correct depth to be displayed. I believe that this has something to do with the z-buffer or depth. I would prefer to have the text on a transparent background and not a solid color as shown in the example.
How can this be done?