I built the scene with three.js
I use outlinePass in the scene, an abnormal situation
Why is this happening and how should I avoid it?
Related
When a three.js scene is loading, objects and textures appear randomly during the loading of the scene. Is there a graceful way to render a scene only after the entire scene is loaded and ready?
Does three.js fire off an event when this happens?
You can use onLoad function in loading manager https://threejs.org/docs/#api/en/loaders/managers/LoadingManager.onLoad
I have two different canvases: one for the background and one for the game scene
Principal canvas:
Background canvas:
I'm having this problem: If I put an object in the principal canvas, everything seems to works but If I add a light component to this object, I'll not see the light (it is like the background image is ahead the light):
Without the background canvas:
With the background canvas:
Any idea why?
(The problem is not the BGcanvas, the problem is the image component of the BGcanvas, if I disable it, I can see the light)
Lights are 3D scene objects
UI objects are not effected by lights or scene objects because they exist in a completely different rendering path:
I need to post-process the scene that I rendered previously on textureA (as render target), with my custom shader and save the result to textureB (input:textureA, output:textureB). Therefore, I don't need a scene and a camera. I think it's too simple to even bother with three.js classes like EffectComposer, Shaderpass, CopyShader, TexturePass, etc.
So, how do I setup this computing-like post-processing in a simple way?
I've create for you a fiddle that shows a basic post-processing effect without EffectComposer. The idea behind this code is to work with an instance of WebGLRenderTarget.
First, you draw the scene into this render target. In the next step, you use this render target as a texture for a plane which is rendered with an orthographic camera. The code in the render loop looks like this:
renderer.clear();
renderer.render( scene, camera, renderTarget );
renderer.render( sceneFX, cameraFX );
The corresponding material of this plane is your custom shader. I've used a luminosity shader from the official repo.
Therefore, I don't need a scene and a camera.
Please do it like in the example. That's the intended way of the library.
Demo: https://jsfiddle.net/f2Lommf5/5149/
three.js R91
I'm new to coding and everyday I learn something new. I want to have a masked scene with other 3D objects, that are from other scenes, to be behind and around it. At this moment I'm stuck with a masked scene. Right now I have this working. As u can see the background is grey and other 3D objects, that are from other scenes and behind the masked scene, can't be seen because of it.
How can I make the backround from masked scene to be transparent with other 3D objects from other scenes?
I think it has something to do with the fragmentShader, because I can change the background color by changing this line "vec4 background = vec4(1.0, 1.0, 1.0, 0.0);",.
Thanks in advance for all the help!
Update
I understand that the background is transparent on this previous link, but I fail to create a new scene with new 3D objects that is visible and is outside the masked scene. Just helping me make a new scene on that previous link would help me out with my problem.
I'm viewing a scene using threejs and the trackball camera. I try to get the view matrix from the camera, but its matrixworldinverse isn't updating. I do call updateMatrixWorld in my render function. The matrixworld is updating, just not the inverse. Any ideas why?
You need to do it yourself:
camera.matrixWorldInverse.getInverse( camera.matrixWorld );
Make sure camera.matrixWorld is updated first. Note that by default, it is automatically updated by the renderer.
three.js r.58