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.
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 am trying to make a Neon sign using three.js and I am using BloomPass and emmissive texture to create this effect. I am primarily following this example as I only want One of the models in my scene to glow. ((https://threejs.org/examples/webgl_postprocessing_unreal_bloom_selective.html))
The issue I am running in to is that this is occuring.
Some elements in my background model and my pacman glb model are glowing and the neon sign is barely glowing. When I tried to change the color of the neon sign or see any changes to it nothing happens. It also makes my scene super dark, it isn't generally this dark.
This is another example with higher exposure and settings 1: https://i.stack.imgur.com/KUPW9.jpg
An issue I was having before the exposure went really low is that the entire scene had the Bloom effect and was super blurry.
Based on other examples I have written the code with the intention of rendering everything in the scene black and then render the Neon scene with bloom then render everything back to original colors however, this is obviously not working.
Github
Don't worry about how messy the code is im just trying everything here lol
VERY IMPORTANT
I have the current code in the NeonSign.js file that is where I have been doing my post processing work. DO NOT use the code in postprocessing.js it is just for reference and is not correct and will not reproduce this error
I am upgrading the UI of my program (from the old Unity UI system to the new one), but it seems like I cannot work with screen-space canvas (either camera or overlay canvases). Objects in world-space canvases work fine. With screen-space GameObjects show in my "Game" preview-screen in the editor, so I am a bit confused as to what the problem may be. To be clear: objects show in the "Game" screen, but not when I press the "play" button.
I attach a composite screenshot with information about one of the objects, the canvases and the camera.
I think I now understand what the problem is. Apparently screen-space canvases (either overlay or camera) can ONLY work with UI-specific game objects. I still do not know why other sorts of elements can be added as children of these canvases (and specially why they correctly show in the Game-preview screen!)
Even if I am missing something deeper here, using elements from the UI folder works where others don't. I thought perhaps someone could find that useful.
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.
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)