# Vertices won't always render depending on order

**URL:** <https://discourse.threejs.org/t/vertices-wont-always-render-depending-on-order/32367>\
**Category:** Questions\
**Tags:** geometry\
**Created:** [December 4, 2021, 4:23pm UTC](https://discourse.threejs.org/t/vertices-wont-always-render-depending-on-order/32367 "2021-12-04T16:23:03Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![girole](https://avatars.discourse-cdn.com/v4/letter/g/b9e5f3/32.png) [@girole](https://discourse.threejs.org/u/girole)\
**Post date:** [December 4, 2021, 4:23pm UTC](https://discourse.threejs.org/t/vertices-wont-always-render-depending-on-order/32367/1 "2021-12-04T16:23:03Z")

</div>

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

Here is the snippet I use:

```javascript
                <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!

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [December 4, 2021, 5:15pm UTC](https://discourse.threejs.org/t/vertices-wont-always-render-depending-on-order/32367/2 "2021-12-04T17:15:38Z")

</div>

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](https://jsfiddle.net/xp0zfjge/)

---

<div class="post-metadata">

**Author:** ![girole](https://avatars.discourse-cdn.com/v4/letter/g/b9e5f3/32.png) [@girole](https://discourse.threejs.org/u/girole)\
**Post date:** [December 4, 2021, 5:36pm UTC](https://discourse.threejs.org/t/vertices-wont-always-render-depending-on-order/32367/3 "2021-12-04T17:36:14Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![girole](https://avatars.discourse-cdn.com/v4/letter/g/b9e5f3/32.png) [@girole](https://discourse.threejs.org/u/girole)\
**Post date:** [December 5, 2021, 6:54am UTC](https://discourse.threejs.org/t/vertices-wont-always-render-depending-on-order/32367/4 "2021-12-05T06:54:13Z")

</div>

A reply to myself:  
[This answer](https://stackoverflow.com/a/8142461)