three.js dev template - module

by sjpt

CSS

body {
	background-color: #000;
	margin: 0px;
	overflow: hidden;
}

JavaScript

// Example to show bug in three.js 117 with InstancedBufferGeometry count
// not sure how to link to the very latest three.js versions from jsfiddle

import * as THREE from "https://rawgit.com/mrdoob/three.js/dev/build/three.module.js";;

var mesh, renderer, scene, camera, material, geom;

init();
animate();

function init() {

    // renderer
    var canvas = document.createElement('canvas');
    var gl = canvas.getContext('webgl2', {});
    renderer = new THREE.WebGLRenderer({context: gl, canvas});

    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.setPixelRatio( window.devicePixelRatio );
    document.body.appendChild( renderer.domElement );

    // scene
    scene = new THREE.Scene();
    
    // camera, placebo; three requires a camera even when it isn't needed
    camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );

    // geometry
    geom = new THREE.InstancedBufferGeometry();
    geom.instanceCount = 4;				// basic definition for 117
// >>>>>>>>>>>>>> toggle comment on line below to expose/hide bug
    geom._maxInstanceCount = Infinity;	// to patch 117
    //geom.maxInstancedCount = 4;			// for earlier versions
    
    // note, this is a 'placebo' to three.js.
    // It is not used in the shader, just to inform three.js how many vertices there are
    var posb = new Int8Array(9);
    var posatt = new THREE.InstancedBufferAttribute(posb, 3)
    geom.addAttribute('position', posatt);
    
    
    var vertexShader=`#version 300 es
    void main() {
    vec4 pos = vec4(0,0,0,1);
    if (gl_VertexID == 0) pos.x = 0.2;
    else if (gl_VertexID == 1) pos.y = 1.;
    pos.x += 0.3 * float(gl_InstanceID);
    gl_Position = pos;
    }`
    var fragmentShader =  `#version 300 es
    	out highp vec4 col;
    	void main() {
        	col = vec4(1,1,1,1);
        }
    `
    material = new THREE.RawShaderMaterial({fragmentShader, vertexShader})
    material.side = 2;
    mesh = new THREE.Mesh(geom,...