Geek Answers Handbook

The grid suddenly disappears three times. Clipping?

Scenario:
In my scene, I implemented a vertex shader that positions the grid plane along the xz axis at the camera position. Therefore, if the camera moves, the grid plane moves with it. This leads to a visual effect that when moving the camera, the planar mesh remains stationary. This seems to work correctly.

Problem:
If I move the camera (and therefore the flat mesh) to a certain extent, the mesh suddenly disappears.
I realized that, apparently, there is a connection between extinction and the size of the plane, i.e. The larger the plane, the more I can move the camera until the grid plane disappears.

Also, in my test scene, a flat grid disappears only when moving along the negative x axis, positive x axis, or negative z axis. It does not disappear when moving along the positive z axis.

I suppose this has something to do with some kind of cliff, but it may be wrong. Recalculating the bounding box of a flat grid had no effect.

Any ideas?

Greetings

Violin:
I created a fiddle that shows the problem: http://jsfiddle.net/p8wZ6/10/

In the violin, I added an extra box mesh to better visualize that the camera is actually moving.
- To change the axis the camera moves (negative z axis by default) (not), comment out the corresponding line of code in the tick method.
- To resize the plane, change the size value in the createPlane method.

Source Font:

<script id="vertexShader" type="x-shader/x-vertex"> void main() { vec4 pos = vec4( position, 1.0 ); vec4 wPos = modelMatrix * pos; wPos.x += cameraPosition.x; wPos.z += cameraPosition.z; // standard // vec4 pPos = projectionMatrix * modelViewMatrix * pos; // keep fixed vec4 pPos = projectionMatrix * viewMatrix * wPos; gl_Position = pPos; } </script> <script id="fragmentShader" type="x-shader/x-fragment"> void main() { gl_FragColor.rgb = vec3(0.7, 0.7, 0.7); gl_FragColor.a = 1.0; } </script>


Download source package js:

 var scene; var camera; var light; var renderer; var controls; var onTick; var planeMesh; var boxMesh; var heightmap; var clock; function createPlane(){ // disappearance seems related to size of geometry. // the larger the longer it takes until disappearance. var size = 20; var geom = new THREE.PlaneGeometry(size, size, 20, 20); return geom; } function createBox(){ var geom = new THREE.CubeGeometry(2, 2, 4); return geom; } function createMesh(){ // plane var geom = createPlane(); var shaderMaterial = new THREE.ShaderMaterial({ vertexShader: document.getElementById( 'vertexShader' ).textContent, fragmentShader: document.getElementById( 'fragmentShader' ).textContent, side: THREE.DoubleSide, wireframe: true }); planeMesh = new THREE.Mesh(geom, shaderMaterial); var axis = new THREE.AxisHelper(4); planeMesh.rotation.x = -90 * (Math.PI / 180); planeMesh.add(axis); scene.add(planeMesh); // box geom = createBox(); var material = new THREE.MeshBasicMaterial( { color: 0xff00ff, }); boxMesh = new THREE.Mesh(geom, material); boxMesh.position.x = 5; boxMesh.position.z = -15; axis = new THREE.AxisHelper(4); boxMesh.add(axis); scene.add(boxMesh); } function startRendering(){ onTick(); }; function onTick(){ // move camera // causes disappearance // neg. z camera.position.z -= .1; // pos. x // camera.position.x += .1; // neg. x // camera.position.x -= .1; // causes no disappearance // pos. z // camera.position.z += .1; requestAnimationFrame(onTick); //controls.update(clock.getDelta()); renderer.render(scene, camera); } function init(){ renderer = new THREE.WebGLRenderer(); renderer.setClearColor( 0xffffff, 1 ); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); scene = new THREE.Scene(); scene.add(new THREE.AxisHelper(4)); camera = new THREE.PerspectiveCamera(65, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(0, 1, 0); light = new THREE.DirectionalLight(0xffffff, 1); light.shadowCameraVisible = true; light.position.set(0, 0, 100); scene.add(light); //clock = new THREE.Clock(); //controls = new THREE.FirstPersonControls(camera); //controls.movementSpeed = 20; //controls.lookSpeed = .1; } init(); createMesh(); startRendering();
+6
source share
2 answers

You have a fundamental misunderstanding.

You move the camera to the CPU. You move the vertices of the plane in the GPU.

The camera truncation calculation knows nothing about vertex offsets in the vertex shader.

How work you can set

  planeMesh.frustumCulled = false;

The best solution is to simply add a plane as a child of the camera and omit vertex offsets.

 planeMesh.position.set( 0, -1, 0 ); camera.add( planeMesh ); scene.add( camera );

You must add a camera to the scene graph in which you are using the second approach.

three.js r.65

+15
source

When you define your camera in r73, the last two parameters allow you to specify the distance to the camera and the distance from it closer.

Taken from this link: http://threejs.org/docs/#Manual/Introduction/Creating_a_scene

 var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

The third parameter Three.PerspectiveCamera defines the camera near the clipping distance, and the fourth parameter determines the clipping distance of the camera.

0
source

More articles:


All Articles