instanced-mesh + three.js r183 - FIXED

by seatsio

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: #44ff88;
      font-family: monospace; font-size: 14px;
      background: rgba(0,0,0,0.8); padding: 12px 16px; border-radius: 6px;
      border: 1px solid #44ff88; max-width: 500px;
    }

JavaScript

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

// ---- FIX ----
// Always use vec4 for vColor assignments, matching three.js r183's always-vec4 vColor
THREE.ShaderChunk['instanced_color_vertex'] = [
  '#ifdef USE_INSTANCING_COLOR_INDIRECT',
  '  #ifdef USE_VERTEX_COLOR',
  '    vColor = vec4(color, 1.0);',
  '  #else',
  '    vColor = vec4( 1.0 );',
  '  #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, but with the fix:
    // 1. Define USE_INSTANCING_COLOR_INDIRECT
    // 2. Always define USE_COLOR_ALPHA (ensures vec4 vColor on older three.js too)
    // 3. Replace <color_vertex> with fixed chunk
    shader.defines['USE_INSTANCING_COLOR_INDIRECT'] = '';
    shader.defines['USE_COLOR_ALPHA'] = '';

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

  var mesh = new THREE.Mesh(geometry, material);
  mesh.position.set(positions[i][0], positions[i][1], positions[i][2]);
  scene.add(mesh);
}

// Floor plane (no shader patch - renders normally for contrast)
var floor = new...