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
// Toggle comment at point >>>>>> below to explore bug
//
// Correct behaviour shows four triangles in top right segment.
// Requires 'geom._maxInstanceCount = Infinity' as at >>>>>
//
// It would also be good to be able to avoid unnecessary position attribute.
// This could be done by the line at ++++++++
// This

// import * as THREE from "https://rawgit.com/mrdoob/three.js/dev/build/three.module.js";
// import * as THREE from "https://github.com/sjpt/three.js/blob/noAttributes/build/three.module.js";
// saved here as I could not get CORS access to my github version
import * as THREE from "https://programbits.co.uk/three/three.module.js"

var mesh, renderer, 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 );

    // 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, the position attribute here is a 'placebo' to three.js.
    // It is not used in the shader, just to inform three.js how many vertices there are
    // Nicer would be
// +++++++++++++++++++ the line below should be enough
    geom.drawRange.count = 3;
// +++++++++++++++++++ the 3 lines below should not be necessary
    //!var posb = new...