Broken

by Scott Divelbiss

HTML

<div id="info">Loading three.js r183...</div>

CSS

body { margin: 0; background: #1a1a2e; }
    canvas { display: block; }
    #info {
      position: absolute; top: 10px; left: 10px; color: #ff4444;
      font-family: monospace; font-size: 14px;
      background: rgba(0,0,0,0.8); padding: 12px 16px; border-radius: 6px;
      border: 1px solid #ff4444; max-width: 500px;
    }

JavaScript

import * as THREE from 'https://unpkg.com/[email protected]/build/three.module.js';

// ---- BUG REPRODUCTION ----
// This is the current instanced_color_vertex chunk from @three.ez/instanced-mesh v0.3.13/v0.3.14
// It assigns vec3 to vColor, but three.js r183 declares vColor as vec4
THREE.ShaderChunk['instanced_color_vertex'] = [
  '#ifdef USE_INSTANCING_COLOR_INDIRECT',
  '  #ifdef USE_VERTEX_COLOR',
  '    vColor = color;',
  '  #else',
  '    #ifdef USE_COLOR_ALPHA',
  '      vColor = vec4( 1.0 );',
  '    #else',
  '      vColor = vec3( 1.0 );',
  '    #endif',
  '  #endif',
  '#endif'
].join('\n');

var info = document.getElementById('info');
var scene = new THREE.Scene();
scene.background = new THREE.Color(0x1a1a2e);
var camera = new THREE.PerspectiveCamera(50, innerWidth / innerHeight, 0.1, 100);
camera.position.set(0, 2, 6);
camera.lookAt(0, 0, 0);

var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(innerWidth, innerHeight);
renderer.setPixelRatio(devicePixelRatio);
document.body.appendChild(renderer.domElement);

var geometry = new THREE.SphereGeometry(0.8, 32, 32);
var colors = [0x4488ff, 0xff4488, 0x44ff88];
var positions = [[-2, 0, 0], [0, 0, 0], [2, 0, 0]];

for (var i = 0; i < 3; i++) {
  var material = new THREE.MeshStandardMaterial({ color: colors[i], roughness: 0.4, metalness: 0.3 });

  material.onBeforeCompile = function(shader) {
    // Reproduce what @three.ez/instanced-mesh does:
    // 1. Define USE_INSTANCING_COLOR_INDIRECT
    // 2. Define USE_COLOR (not USE_COLOR_ALPHA) when opacity is not used
    // 3. Replace <color_vertex> with custom chunk
    shader.defines['USE_INSTANCING_COLOR_INDIRECT'] = '';
    shader.defines['USE_COLOR'] = '';

    shader.vertexShader = shader.vertexShader.replace(
      '#include <color_vertex>',
      THREE.ShaderChunk['instanced_color_vertex']
    );
  };

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