jeromeetienne / AR.js

Efficient Augmented Reality for the Web - 60fps on mobile!
MIT License
15.8k stars 2.22k forks source link

Cannot change camera near and far, GLTF2.0 possible Frustrum Cone on textures #314

Closed Djinne closed 6 years ago

Djinne commented 6 years ago

Can't seem to change the 'Near' and 'Far' of camera which is causing Constant texture glitching on GLTF2.0 Model,

I think it is caused by the frustrum cone effect? An example: https://3ckid.com/01/AR_Mech_Drone.html

Use Hiro marker then move back about 3 meters, and one will notice the black triangle glitches. Mine is worse on my model reason even when super close! Increasing the Z axis on the model then scaling down helps but is not ideal.

I have tried: `

`
Djinne commented 6 years ago

Solved this by going pure Three.js

Here, the 'Near' 0.5 fixes the problem, having it on the default 0.1 causes the problem camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.5, 800 );

Just calling the default camera causes the problem: camera = new THREE.Camera( );

wkl-coder commented 6 years ago

@Djinne how do you sloved , my model flashing very fast

wkl-coder commented 6 years ago

image

Djinne commented 6 years ago

Its actually a "depth test" that is causing the problem. but when you turn off depth test some other problems arise such as bits of the model not being visible, or visible when it should be hidden

wkl-coder commented 6 years ago

@Djinne how do I can close depth test?

wkl-coder commented 6 years ago

Is there no solution?

Djinne commented 6 years ago

In the three.js file, there is a line of code that has depthTest = true;

Think you need to set it to false, but somehow try to attach that to the material thats giving you problems

wkl-coder commented 6 years ago

I don't know much about this, can you teach me how to get it changed in js?

@Djinne I use A-frame and AR.js

wkl-coder commented 6 years ago

image is it okay ?

Djinne commented 6 years ago

Maybe, I don't know. if it doesn't work, try add

material="depthTest: false;"

https://aframe.io/docs/0.8.0/components/material.html#properties_depthtest

Djinne commented 6 years ago

I stopped using aframe and started using pure three.js because aframe doesn't doesn't allow you to expand too well

wkl-coder commented 6 years ago

image I add but also image

wkl-coder commented 6 years ago

DO pure three.js have this problem ?

Djinne commented 6 years ago

Yes, I still haven't been able to truly solve this problem.

wkl-coder commented 6 years ago

Ok, I checked the issue official and did not really have to answer the question

Djinne commented 6 years ago

I have tried, no one seems to have a solution. But the solution seems to be somehow making the depthTest false, then somehow adding a layers to each material

Djinne commented 6 years ago

Maybe its a gltf thing? have you tried other model extensions?

cyocun commented 5 years ago

Has this problem been solved yet? A similar problem has occurred.

Implemented by THREEx. In addition to GLTF 2.0, I tried dae and obje & mtl but they are the same.

It looks like it occurs at the point where objects overlap. I can not use depthtest as the overlap changes.

It is also reproduced using THREE.PerspectiveCamera. Display size also seems to be related.

This is a reference video. https://www.dropbox.com/s/ij6cixg50m6iqn4/test.mp4?dl=0

cyocun commented 5 years ago

Fixed by setting logarithmicDepthBuffer to true along with THREE.PerspectiveCamera!