Vertices won't always render depending on order

Questions
1

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!

2

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

3

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

4

A reply to myself:
This answer

1 Like