<!doctype html>
<html>
  <head>
    <title>Inconsistent triangle interpolation on a square</title>
    <style>
      body { max-width: 100%; }
      /* feel free to style the canvas any way you want. If you want it to
      use the entire window, set width: 100% and height: 100%. */
      
      canvas {
          width: 80%;
          height: 400px;
          display: block;
          margin: 10px auto;
      }
    </style>
  </head>
<body>

  <h1>Inconsistent triangle interpolation on a square</h1>
  
  <p>Demo of two RGB triangles arranged as a square automatically interpolated by WebGL, but with different colors assigned to the same vertex on the two triangles.
</p>

</body>
</html>
var scene = new THREE.Scene();

var vertexA = new THREE.Vector3(0, 0, 0);
var colorA = new THREE.Color( THREE.ColorKeywords.red );

var vertexB = new THREE.Vector3(1, 0, 0);
var colorB = new THREE.Color( THREE.ColorKeywords.lime );

// same position as B but a different color
var vertexB2 = new THREE.Vector3(1, 0, 0); 
var colorB2 = new THREE.Color( THREE.ColorKeywords.blue );

var vertexC = new THREE.Vector3(0, 1, 0);
var colorC = new THREE.Color( THREE.ColorKeywords.blue );

// same position as C but a different color
var vertexC2 = new THREE.Vector3(0, 1, 0); 
var colorC2 = new THREE.Color( THREE.ColorKeywords.lime );

var vertexD = new THREE.Vector3(1, 1, 0 );
var colorD = new THREE.Color( THREE.ColorKeywords.red );

var triGeom = new THREE.Geometry();
triGeom.vertices = [ vertexA, vertexB, vertexC, vertexD, vertexB2, vertexC2 ];
triGeom.faces = [ new THREE.Face3(0, 1, 2),
                  new THREE.Face3(3, 5, 4)
                ];
triGeom.vertexColors = [ colorA, colorB, colorC, colorD, colorB2, colorC2 ];

triGeom.computeFaceNormals();
// set particular vertex colors for each face
TW.computeFaceColors(triGeom); 

// create a material that uses the vertex colors to compute face color
var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.VertexColors } );

var mesh = new THREE.Mesh( triGeom, material );

scene.add(mesh);

// ================================================================
var renderer = new THREE.WebGLRenderer();

TW.mainInit(renderer,scene);

TW.cameraSetup(renderer,
               scene,
               {minx: 0, maxx: 1,
                miny: 0, maxy: 1,
                minz: 0, maxz: 0});

TW.viewFromFront();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://s3.amazonaws.com/m.mr-pc.org/t/cisc3620/2020sp/three.min.js
  2. https://s3.amazonaws.com/m.mr-pc.org/t/cisc3620/2020sp/OrbitControls.js
  3. https://s3.amazonaws.com/m.mr-pc.org/t/cisc3620/2020sp/tw.js
  4. https://s3.amazonaws.com/m.mr-pc.org/t/cisc3620/2020sp/dat.gui.min.js