three.js ~ Draw Buffer Define Extension Error

2017-23-05

by Ludovic Bailly

HTML

<script src="http://threejs.org/build/three.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script id="shader-vs" type="x-shader/x-vertex">
uniform float size;
uniform float scale;

#include <color_pars_vertex>

void main() {

	#include <color_vertex>
	#include <begin_vertex>
	#include <project_vertex>
  
	gl_PointSize = size;

	#include <worldpos_vertex>

}
</script>
<script id="shader-fs" type="x-shader/x-fragment">
uniform vec3 diffuse;
uniform float opacity;

void main() {
	#ifdef GL_EXT_draw_buffers
		gl_FragColor = vec4( 0.0, 1.0, 0.0, 1.0 );
  #else
  	gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0 );
  #endif
}
</script>
<script id="shader-vs2" type="x-shader/x-vertex">
/* Just adding some comment to force ThreeJS to create a new WebGL program */
uniform float size;
uniform float scale;

#include <color_pars_vertex>

void main() {

	#include <color_vertex>
	#include <begin_vertex>
	#include <project_vertex>
  
	gl_PointSize = size;

	#include <worldpos_vertex>

}
</script>
<script id="shader-fs2" type="x-shader/x-fragment">
/* Just adding some comment to force ThreeJS to create a new WebGL program */
uniform vec3 diffuse;
uniform float opacity;

void main() {
	#ifdef GL_EXT_draw_buffers
		gl_FragColor = vec4( 0.0, 1.0, 0.0, 1.0 );
  #else
  	gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0 );
  #endif
}
</script>

JavaScript

var camera, scene, directionalLight, renderer, gl;
var materialDrawBuffer, materialSimple, materialDrawBuffer2, materialSimple2;
var geometry, mesh;

var WIDTH = window.innerWidth - 20;
var HEIGHT = window.innerHeight - 20;

createPointMaterial();
init();
animate();

function init() {
    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(50, WIDTH / HEIGHT, 2, 20);
    camera.position.z = 5;
    camera.position.y = 0;
    
    var ambient = new THREE.AmbientLight( 0x404040 );
    scene.add(ambient);
    
    directionalLight = new THREE.DirectionalLight( 0xffffff, 1.0 );
		directionalLight.position.set( 0, 3, 3 );
		scene.add( directionalLight );
    scene.add(camera);

		geometry = new THREE.Geometry();
  	geometry.vertices.push( new THREE.Vector3(-1.0, 1.0, 0.0) );
    mesh = new THREE.Points( geometry, materialDrawBuffer );
  	scene.add( mesh );
    
    geometry = new THREE.Geometry();
  	geometry.vertices.push( new THREE.Vector3(1.0, 1.0, 0.0) );
    mesh = new THREE.Points( geometry, materialSimple );
  	scene.add( mesh );
    
    geometry = new THREE.Geometry();
  	geometry.vertices.push( new THREE.Vector3(0.0, -1.0, 0.0) );
    mesh = new THREE.Points( geometry, materialSimple2 );
  	scene.add( mesh );
    
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(WIDTH, HEIGHT);

    document.body.appendChild(renderer.domElement);
}

function animate() {
  	requestAnimationFrame(animate);
    
    renderer.render(scene, camera);
}

function createPointMaterial() {
    /** (1) */
    
		var vertexShader = document.getElementById('shader-vs').innerHTML;
    var fragmentShader = document.getElementById('shader-fs').innerHTML;
    
    /** Invert those two following instanciations to see first instanced shader decides extensions,
    		even if they do not share the same properties values */
    /** (1-1) */
    materialDrawBuffer = new THREE.ShaderMaterial( {
        vertexShader: vertexShader,
       ...