Beginning support of webgl 1 draw buffers extension

src/Rendering/babylon.geometryBufferRenderer.ts

@@ -14,6 +14,8 @@ module BABYLON {
 
         private _enablePosition: boolean = false;
 
+        private _needsDrawBuffersExtension: boolean;
+
         public set renderList(meshes: Mesh[]) {
             this._multiRenderTarget.renderList = meshes;
         }
@@ -36,6 +38,10 @@ module BABYLON {
             this._scene = scene;
             this._ratio = ratio;
 
+            // Multiple color attachment support
+            var engine = scene.getEngine();
+            this._needsDrawBuffersExtension = engine.webGLVersion < 2 && engine.getCaps().drawBuffersExtension;
+
             // Render target
             this._createRenderTargets();
         }
@@ -54,6 +60,11 @@ module BABYLON {
             var mesh = subMesh.getMesh();
             var scene = mesh.getScene();
 
+            // Draw buffers extension
+            if (this._needsDrawBuffersExtension) {
+                defines.push("#define DRAW_BUFFERS_EXTENSION");
+            }
+
             // Alpha test
             if (material && material.needAlphaTesting()) {
                 defines.push("#define ALPHATEST");

src/Shaders/geometry.fragment.fx

@@ -1,8 +1,16 @@
+#ifndef DRAW_BUFFERS_EXTENSION
 #version 300 es
+#else
+#extension GL_EXT_draw_buffers : require
+#endif
 
 precision highp float;
 precision highp int;
 
+#ifdef DRAW_BUFFERS_EXTENSION
+#define in varying
+#endif
+
 in vec3 vNormalV;
 in vec4 vViewPos;
 
@@ -15,11 +23,17 @@ in vec2 vUV;
 uniform sampler2D diffuseSampler;
 #endif
 
-layout(location = 0) out vec4 color0;
-layout(location = 1) out vec4 color1;
+#ifndef DRAW_BUFFERS_EXTENSION
+    layout(location = 0) out vec4 color0;
+    layout(location = 1) out vec4 color1;
 
-#ifdef POSITION
-layout(location = 2) out vec4 color2;
+    #ifdef POSITION
+    layout(location = 2) out vec4 color2;
+    #endif
+#else
+    #define color0 gl_FragData[0]
+    #define color1 gl_FragData[1]
+    #define color2 gl_FragData[2]
 #endif
 
 void main() {

src/Shaders/geometry.vertex.fx

@@ -1,4 +1,6 @@
+#ifndef DRAW_BUFFERS_EXTENSION
 #version 300 es
+#endif
 
 precision highp float;
 precision highp int;
@@ -6,6 +8,11 @@ precision highp int;
 #include<bones300Declaration>
 #include<instances300Declaration>
 
+#ifdef DRAW_BUFFERS_EXTENSION
+#define in attribute
+#define out varying
+#endif
+
 in vec3 position;
 in vec3 normal;
 

src/babylon.engine.ts

@@ -3180,7 +3180,14 @@
                 }
 
                 var texture = new InternalTexture(this, InternalTexture.DATASOURCE_MULTIRENDERTARGET);
-                var attachment = gl["COLOR_ATTACHMENT" + i];
+
+                var attachment: number;
+                if (this.webGLVersion < 2) {
+                    attachment = this._caps.drawBuffersExtension["COLOR_ATTACHMENT" + i + "_WEBGL"];
+                } else {
+                    attachment = gl["COLOR_ATTACHMENT" + i];
+                }
+                
                 textures.push(texture);
                 attachments.push(attachment);
 
@@ -3194,7 +3201,7 @@
 
                 gl.texImage2D(gl.TEXTURE_2D, 0, this._getRGBABufferInternalSizedFormat(type), width, height, 0, gl.RGBA, this._getWebGLTextureType(type), null);
 
-                gl.framebufferTexture2D(gl.DRAW_FRAMEBUFFER, attachment, gl.TEXTURE_2D, texture._webGLTexture, 0);
+                gl.framebufferTexture2D(this.webGLVersion < 2 ? gl.FRAMEBUFFER : gl.DRAW_FRAMEBUFFER, attachment, gl.TEXTURE_2D, texture._webGLTexture, 0);
 
                 if (generateMipMaps) {
                     this._gl.generateMipmap(this._gl.TEXTURE_2D);
@@ -3233,7 +3240,7 @@
                 gl.texImage2D(
                     gl.TEXTURE_2D,
                     0,
-                    gl.DEPTH_COMPONENT16,
+                    this.webGLVersion < 2 ? gl.DEPTH_COMPONENT : gl.DEPTH_COMPONENT16,
                     width,
                     height,
                     0,
@@ -3266,7 +3273,11 @@
                 this._internalTexturesCache.push(depthTexture);
             }
 
-            gl.drawBuffers(attachments);
+            if (gl.drawBuffers) {
+                gl.drawBuffers(attachments);
+            } else {
+                this.getCaps().drawBuffersExtension.drawBuffersWEBGL(attachments);
+            }
             gl.bindRenderbuffer(gl.RENDERBUFFER, null);
             this.bindUnboundFramebuffer(null);