add fiddle showing normal defects with indexed geometry

web/mesh/fiddle.html

@@ -0,0 +1,138 @@
+<html>
+<head>
+    <style>
+    body, div {
+        border: 0;
+        margin: 0;
+        padding: 0;
+    }
+    </style>
+<script>self.module = { exports: {} }</script>
+<script src="/src/main/gapp.js"></script>
+<script src="/src/ext/three.js"></script>
+<script src="/src/add/three.js"></script>
+<script src="/src/moto/orbit.js"></script>
+<script>
+let camera, scene, renderer, controls;
+let material, mesh;
+let vertices, indices;
+let unindexed, indexed;
+
+function light(i, x, y, z) {
+    let l = new THREE.PointLight(0xffffff, i);
+    l.position.set(x,y,z);
+    return l;
+}
+
+function init() {
+    scene = new THREE.Scene();
+    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
+    camera.position.z = 15;
+
+    scene.add(camera);
+    scene.add(new THREE.AmbientLight(0xffffff, 0.2));
+    scene.add(light(0.2,  30,   0,   0));
+    scene.add(light(0.2, -30,   0,   0));
+    scene.add(light(0.2,   0,  30,   0));
+    scene.add(light(0.2,   0, -30,   0));
+    scene.add(light(0.2,   0,   0,  30));
+    scene.add(light(0.2,   0,   0, -30));
+
+    vertices = Float32Array.from([
+        -2, -2,  -2,
+        -2,  2,  -2,
+         2,  2,  -2,
+         2, -2,  -2,
+        -2, -2,   2,
+        -2,  2,   2,
+         2,  2,   2,
+         2, -2,   2,
+    ]);
+
+    indices = Uint32Array.from([
+        0, 1, 2, // bottom
+        0, 2, 3,
+        6, 5, 4, // top
+        7, 6, 4,
+        0, 4, 1, // side 1
+        1, 4, 5,
+        2, 6, 3, // side 2
+        3, 6, 7
+    ]);
+
+    // generate full vertices list (non-indexed)
+    let vertall = [];
+    for (let i of indices) {
+        vertall = vertall.concat([...vertices].slice(i*3,i*3+3));
+    }
+    vertall = Float32Array.from(vertall);
+
+    material = new THREE.MeshPhongMaterial({
+        side: THREE.DoubleSide,
+        shininess: 100,
+        specular: 0x404040,
+        transparent: false,
+        color: 0xffff00,
+        opacity: 0.5
+    });
+
+    // non-indexed geometry
+    unindexed = new THREE.BufferGeometry()
+        .setAttribute('position', new THREE.BufferAttribute(vertall, 3));
+    unindexed.computeVertexNormals();
+
+    // mesh with non-indexed geometry
+    let meshU = new THREE.Mesh(unindexed, material);
+    meshU.add(new THREE.Mesh(
+        unindexed.clone(), new THREE.MeshBasicMaterial({
+            wireframe:  true,
+            color: 0xffff00
+        })
+    ));
+    scene.add(meshU);
+    meshU.position.y = 2.5;
+
+    // indexed geometry
+    indexed = new THREE.BufferGeometry()
+        .setAttribute('position', new THREE.BufferAttribute(vertices, 3))
+        .setIndex(new THREE.BufferAttribute(indices, 1));
+    indexed.computeVertexNormals();
+
+    // mesh with indexed geometry
+    let meshI = new THREE.Mesh(indexed, material);
+    meshI.add(new THREE.Mesh(
+        indexed.clone(), new THREE.MeshBasicMaterial({
+            wireframe:  true,
+            color: 0xffff00
+        })
+    ));
+    scene.add(meshI);
+    meshI.position.y = -2.5;
+
+    renderer = new THREE.WebGLRenderer({
+        antialias: true,
+        preserveDrawingBuffer: true,
+        logarithmicDepthBuffer: true
+    });
+
+    controls = new moto.Orbit(camera, renderer.domElement);
+    controls.update();
+
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    document.body.appendChild(renderer.domElement);
+
+    animate();
+}
+
+function animate() {
+    requestAnimationFrame(animate);
+    render();
+}
+
+function render() {
+    renderer.render(scene, camera);
+}
+</script>
+</head>
+<body onload="init()"></body>
+</html>