Vertices won't always render depending on order

Hi,
Problem:
The code doesn’t always render properly depending on the order of vertices in array.

Here is the snippet I use:

                <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js" integrity="sha512-dLxUelApnYxpLt6K2iomGngnHO83iUvZytA3YjDUCjT0HDOHKXnVYdf3hU4JjM8uEhxf9nD1/ey98U3t2vZ0qQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
                <script>

                THREE.Object3D.DefaultUp.set(0, 0, 1);

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

                const renderer = new THREE.WebGLRenderer();
                renderer.setSize( window.innerWidth, window.innerHeight );
                document.body.appendChild( renderer.domElement );

                const vertices = new Float32Array([
                    246.320663,117.859497,0.000000,
                    244.895833,121.204978,10.000000,
                    246.320663,117.859497,10.000000,
                    244.895833,121.204978,0.000000,
                    244.895833,121.204978,10.000000,
                    246.320663,117.859497,0.000000,

                    // Replace with this one, to see it fail to render the full rectangle
/* 
                    246.320663,117.859497,0.000000,
                    244.895833,121.204978,10.000000,
                    246.320663,117.859497,10.000000,
                    244.895833,121.204978,0.000000,
                    246.320663,117.859497,0.000000,
                    244.895833,121.204978,10.000000,
*/
                    ]
                )

                const geometry = new THREE.BufferGeometry();
                // itemSize = 3 because there are 3 values (components) per vertex
                geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );

                const material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
                const mesh = new THREE.Mesh( geometry, material );

                scene.add( mesh );

                camera.position.x = 270;
                camera.position.y = 125;
                camera.position.z = 5;
                camera.lookAt(0,0,5);

                const size = 260;
                const divisions = 260;

                var grid = new THREE.GridHelper( size, divisions, 0x444444, 0x888888 );
                grid.rotateX(Math.PI / 2);
                scene.add( grid );

                const axesHelper = new THREE.AxesHelper( 260 );
                scene.add( axesHelper );

                function render() {
                  renderRequested = false;
                  renderer.render(scene, camera);
                }

                function requestRenderIfNotRequested() {
                  if (!renderRequested) {
                    renderRequested = true;
                    requestAnimationFrame(render);
                  }
                }
                const animate = function () {


                        requestAnimationFrame( render );
                       // renderer.render( scene, camera );
                };

                animate();
                </script>

I certainly missed a point but which one?
Thanks!

The winding order of your second quad is not consistent. So one triangle is flipped. This becomes clear if you move the camera around the quad or by using a double sided material: Edit fiddle - JSFiddle - Code Playground

Nice!

So if I don’t want to deal with that problem again in the future, what are the corrective steps I should take to make sure the winding is correct in any situations?

Thanks

A reply to myself:
This answer

1 Like