I'm just a 3D newbie, and this is my first experiment with Three.js:
http://www.miguelrivero.net/mainWeb/images/portafolio/exp/BowieNextDay/heroesCoverCube.html
Any idea why the side textures show these wires?
Thanks!
You are probably using the canvas renderer. Although you seem to try to use WebGL, it falls back to Canvas. Try to update for more recent version first.
CanvasRenderer has this wireframe behaviour. To work around it, you can set material.overdraw to true. In r59 this parameter was changed from boolean to number.
WebGLRenderer should not have this problem, if you manage to get this to work.
Related
I am trying to achieve seamless objects next to each other in Three.JS which currently works fine on most devices / browsers but in some cases i'm experiencing difficulties. For example while using MacOS with the latest version of Google Chrome (and also Safari) the objects render with pixelated gaps in between that should not be there.
Bug occurs with all 3D Objects, GLTF models (left) and BoxGeometry (right):
While using the same Mac device but using Firefox everything renders as expected:
Sizes are exactly (1, 1, 1) and should fit exactly next to each other. I've also tried to scale it up to (1.05, 1.05, 1.05) but this didn't fix the problem, in fact it only got worse as applying scaling results in Z-fighting when textures are enabled.
I'm currently using R137 of Three.JS and made sure my application correctly applies window.devicePixelRatio so that should not be the problem either - is there any other renderer setting that i'm forgetting which could help resolve this rendering issue?
The behaviour for Android and Windows devices also works correctly. The used Android device has a devicePixelRatio greater than 2 and everything looks smooth there. I doubt it's a problem with my Mac GPU as it renders correctly with Firefox; is this a bug of the browser maybe, and is there something we can do about it ourselves?
Hopefully this is not a duplicate, i couldn't find any solutions/answers to this.
EDIT:
I've found out that EffectComposer (for FXAA) are causing these problems for Google Chrome / Safari on Mac devices. Which is weird because it works completely fine on all other devices. I'm currently still looking for a way to fix this. If anyone had problems in the past with EffectComposer for Mac and managed to fix them please share your solution with us. When replacing FXAA shader with for example Sepia shader the same bugs occur, it doesn't seem to matter which shaders are being passed, anything pass from EffectComposer causes this.
I've made a fiddle: https://jsfiddle.net/ilanbentley/g3yxdvmh/3/
Note how the right side (EffectComposer) has buggy edges while the left side (Renderer) looks good (for Mac).
Somehow the code below is responsible for this buggy behaviour:
const renderPass = new RenderPass( scene, camera );
fxaaPass = new ShaderPass( FXAAShader );
composer2 = new EffectComposer( renderer );
composer2.addPass( renderPass );
composer2.addPass( fxaaPass );
I'm rendering a barrel object in Android with GLES20. The barrel is not rendered correctly and it's not clear to me where the problem is (texture? model? culling? depth?):
I've tried debugging with Google's debugger. The model can be rendered correctly in the debugger and the texture is also loaded correctly.
I have tried various parameters related to glFrontFace, glBlendFunc, GL_DEPTH_TEST and GL_CULL_FACE. But so far none of the combinations can render the barrel successfully.
Does anyone know what's wrong with this rendering?
PS: In the debugger GAPID, the depth buffer seem to be all black (Y=1.0). But I'm not sure if this is a issue with the debugger? I have enabled GL_DEPTH_TEST with GL_LEQUAL. I've also used setEGLConfigChooser(true).
Credit to #HolyBlackCat!
Both zNear and zFar need to be positive. The messed up perspective matrix produces this weired looking rendering.
I am facing a problem where a THREE.SpotLight is casting a Shadow without an object beeing in its frustum.
I have setup a simple scene containing a THREE.SpotLight and a plane-mesh. The SpotLight is set to cast Shadows and the plane to receive Shadows. There is a square Shadow visible on the ground plane, which is the size of the SpotLights shadowCamera. This scene is the right hand side of the image below.
A cube-mesh is now added and positioned outside the initial camera viewspace. By zooming out, a bit before the cube-mesh becomes visible to the camera, the Spotlight Shadow disappears. This is pictured in the left hand side of the image.
http://jsfiddle.net/L0rdzbej/157/
This happens in Firefox, from what I heared it is not the case in Chrome. What is happening here and how to avoid it?
The shadow does not show up anymore, so im marking this as solved.
Edit: In case anyone comes a long who is facing the same problem, here is a link to the reported issue on github: https://github.com/mrdoob/three.js/issues/7750. It hasnt got much attention because it couldnt be reproduced by the maintainers.
I am upgrading my application from three.js -r51 to -r57 (I got started before -r58 was released). When I did, I noticed that any of my 3D collada models that did not have in them a line like this:
<extra><technique><double_sided>1</double_sided></technique></extra>
did not render.
It appears that the polygons are being culled. If I force _gl.disable( _gl.CULL_FACE ); my model shows up as expected. But why would it cull all of my faces all of the time? (even if I had the winding order backward, I should see the other side of the object, right?)
It turns out that my parameter to setFaceCulling wasn't right. I was passing false instead of a culling mode.
With the r51 implementation, false happened to disable all culling.
With the r57 implementation, it dumped me into the new default behavior ... which is to enable culling and set it to cull both front and back faces.
So, I was able to fix it ... but I'm not sure I would have made that the default behavior. ;o)
I'm trying to create, modify and update (directional only for now) lights and shadowmaps dynamically. The light, shadow and shadow camera helper gets updated correctly as I move the light around or change shadow properties, except from the light's point of view, everything behind the origin (0,0,0) is shadowed for no apparent reason.
Screenshots:
http://i.imgur.com/n4AHvle.png
http://i.imgur.com/l0uaZHD.jpg
http://i.imgur.com/brKwCof.jpg
http://i.imgur.com/a6dqMGo.jpg (new, with spotlight)
You can see a scene with car and a piece of ground, they belong to a geometry imported with ColladaLoader. The problem is with shadowmapping, the car throws shadow correctly, but there are stripy shadows on the ground even though there is nothing else than the car obscuring light.
If I add more similar lights, they also have the same 4 stripes. They also appear with spotlight. If I change shadow map resolution, the stripes' size changes relative to each other, but there seems to be always four of them, spaced from center to both directions.
EDIT: JSFiddle here: http://jsfiddle.net/cL3hX/1/ There shouldn't be any shadows in the scene, unless some new geometry is introduced inside the shadow camera frustum.
Couple of notes on the fiddle:
I have r55, but the demo is r54 because jsfiddle apparently does not yet have r55.
I could only reproduce this with a Collada file. So it probably has something to do with the model. I created a simple cube in Sketchup 8, and tried to export it with various collada options.
In the JSFiddle I could only reproduce the bug with a file exported with "doublesided faces" -setting enabled. In my own application code, I do have the same bug on models created with or without that setting enabled, but in the fiddle, the bug seems to be triggered only when "doublesided faces" are exported. Anyway I do need to somehow show backsides of faces, because the tool I'm developing must work with Sketchup exports, and it's very hard to make models in Sketchup without having a mess of frontsides/backsides visible.
The very simple Collada file is included in the JSFiddle as javascript variable. Here's a download link for the same file: https://dl.dropbox.com/u/14489569/shadowmapdemo.dae
The problem is your Collada model.
Your "plane" is actually multiple coplanar faces back-to-back in a single geometry.
It's no wonder there are artifacts.
Replace it with a THREE.CubeGeometry.