Merge pull request #2734 from julien-moreau/master

Add support for webgl 1 draw buffers extension for the MultiRenderTarget class #2732

src/Materials/Textures/babylon.multiRenderTarget.ts

@@ -29,6 +29,22 @@ module BABYLON {
             return this._textures[this._textures.length - 1];
         }
 
+        public set wrapU (wrap: number) {
+            if (this._textures) {
+                for (var i = 0; i < this._textures.length; i++) {
+                    this._textures[i].wrapU = wrap;
+                }
+            }
+        }
+
+        public set wrapV (wrap: number) {
+            if (this._textures) {
+                for (var i = 0; i < this._textures.length; i++) {
+                    this._textures[i].wrapV = wrap;
+                }
+            }
+        }
+
         constructor(name: string, size: any, count: number, scene: Scene, options?: any) {
             options = options || {};
 

src/Materials/babylon.effect.ts

@@ -378,12 +378,15 @@
                 callback(preparedSourceCode.replace("#version 300 es", ""));
                 return;
             }
+
+            var hasDrawBuffersExtension = preparedSourceCode.search(/#extension.+GL_EXT_draw_buffers.+require/) !== -1;
             
             // Remove extensions 
             // #extension GL_OES_standard_derivatives : enable
             // #extension GL_EXT_shader_texture_lod : enable
             // #extension GL_EXT_frag_depth : enable
-            var regex = /#extension.+(GL_OES_standard_derivatives|GL_EXT_shader_texture_lod|GL_EXT_frag_depth).+enable/g;
+            // #extension GL_EXT_draw_buffers : require
+            var regex = /#extension.+(GL_OES_standard_derivatives|GL_EXT_shader_texture_lod|GL_EXT_frag_depth|GL_EXT_draw_buffers).+(enable|require)/g;
             var result = preparedSourceCode.replace(regex, "");
 
             // Migrate to GLSL v300
@@ -398,7 +401,8 @@
                 result = result.replace(/textureCube\(/g, "texture(");
                 result = result.replace(/gl_FragDepthEXT/g, "gl_FragDepth");
                 result = result.replace(/gl_FragColor/g, "glFragColor");
-                result = result.replace(/void\s+?main\(/g, "out vec4 glFragColor;\nvoid main(");
+                result = result.replace(/gl_FragData/g, "glFragData");
+                result = result.replace(/void\s+?main\(/g, (hasDrawBuffersExtension ? "" : "out vec4 glFragColor;\n") + "void main(");
             }
             
             callback(result);

src/Rendering/babylon.geometryBufferRenderer.ts

@@ -102,7 +102,9 @@ module BABYLON {
                 this._effect = this._scene.getEngine().createEffect("geometry",
                     attribs,
                     ["world", "mBones", "viewProjection", "diffuseMatrix", "view"],
-                    ["diffuseSampler"], join);
+                    ["diffuseSampler"], join,
+                    null, null, null,
+                    { buffersCount: this._enablePosition ? 3 : 2 });
             }
 
             return this._effect.isReady();

src/Shaders/ShadersInclude/mrtFragmentDeclaration.fx

@@ -0,0 +1,3 @@
+#if __VERSION__ >= 200
+layout(location = 0) out vec4 glFragData[{X}];
+#endif

src/Shaders/geometry.fragment.fx

@@ -1,38 +1,38 @@
-#version 300 es
+#extension GL_EXT_draw_buffers : require
 
 precision highp float;
 precision highp int;
 
-in vec3 vNormalV;
-in vec4 vViewPos;
+varying vec3 vNormalV;
+varying vec4 vViewPos;
 
 #ifdef POSITION
-in vec3 vPosition;
+varying vec3 vPosition;
 #endif
 
 #ifdef ALPHATEST
-in vec2 vUV;
+varying vec2 vUV;
 uniform sampler2D diffuseSampler;
 #endif
 
-layout(location = 0) out vec4 color0;
-layout(location = 1) out vec4 color1;
-
 #ifdef POSITION
-layout(location = 2) out vec4 color2;
+#include<mrtFragmentDeclaration>[3]
+#else
+#include<mrtFragmentDeclaration>[2]
 #endif
 
 void main() {
 #ifdef ALPHATEST
-	if (texture(diffuseSampler, vUV).a < 0.4)
+	if (texture2D(diffuseSampler, vUV).a < 0.4)
 		discard;
 #endif
 
-    color0 = vec4(vViewPos.z / vViewPos.w, 0.0, 0.0, 1.0);
-    color1 = vec4(normalize(vNormalV), 1.0);
+    gl_FragData[0] = vec4(vViewPos.z / vViewPos.w, 0.0, 0.0, 1.0);
+    //color0 = vec4(vViewPos.z / vViewPos.w, 0.0, 0.0, 1.0);
+    gl_FragData[1] = vec4(normalize(vNormalV), 1.0);
     //color2 = vec4(vPositionV, 1.0);
 
     #ifdef POSITION
-    color2 = vec4(vPosition, 1.0);
+    gl_FragData[2] = vec4(vPosition, 1.0);
     #endif
 }

src/Shaders/geometry.vertex.fx

@@ -1,22 +1,20 @@
-#version 300 es
-
 precision highp float;
 precision highp int;
 
-#include<bones300Declaration>
-#include<instances300Declaration>
+#include<bonesDeclaration>
+#include<instancesDeclaration>
 
-in vec3 position;
-in vec3 normal;
+attribute vec3 position;
+attribute vec3 normal;
 
 #if defined(ALPHATEST) || defined(NEED_UV)
-out vec2 vUV;
+varying vec2 vUV;
 uniform mat4 diffuseMatrix;
 #ifdef UV1
-in vec2 uv;
+varying vec2 uv;
 #endif
 #ifdef UV2
-in vec2 uv2;
+varying vec2 uv2;
 #endif
 #endif
 
@@ -24,11 +22,11 @@ in vec2 uv2;
 uniform mat4 viewProjection;
 uniform mat4 view;
 
-out vec3 vNormalV;
-out vec4 vViewPos;
+varying vec3 vNormalV;
+varying vec4 vViewPos;
 
 #ifdef POSITION
-out vec3 vPosition;
+varying vec3 vPosition;
 #endif
 
 void main(void)

src/babylon.engine.ts

@@ -1050,7 +1050,6 @@
             this._caps.uintIndices = this._webGLVersion > 1 || this._gl.getExtension('OES_element_index_uint') !== null;
             this._caps.fragmentDepthSupported = this._webGLVersion > 1 || this._gl.getExtension('EXT_frag_depth') !== null;
             this._caps.highPrecisionShaderSupported = true;
-            this._caps.drawBuffersExtension = this._webGLVersion > 1 || this._gl.getExtension('WEBGL_draw_buffers');
 
             // Checks if some of the format renders first to allow the use of webgl inspector.
             this._caps.colorBufferFloat = this._webGLVersion > 1 && this._gl.getExtension('EXT_color_buffer_float');
@@ -1068,6 +1067,25 @@
 
             this._caps.textureLOD = this._webGLVersion > 1 || this._gl.getExtension('EXT_shader_texture_lod');
 
+            // Draw buffers
+            if (this._webGLVersion > 1) {
+                this._caps.drawBuffersExtension = true;
+            } else {
+                var drawBuffersExtension = this._gl.getExtension('WEBGL_draw_buffers');
+
+                if (drawBuffersExtension !== null) {
+                    this._caps.drawBuffersExtension = true;
+                    this._gl.drawBuffers = drawBuffersExtension.drawBuffersWEBGL;
+                    this._gl.DRAW_FRAMEBUFFER = this._gl.FRAMEBUFFER;
+                    
+                    for (var i = 0; i < 16; i++) {
+                        this._gl["COLOR_ATTACHMENT" + i] = drawBuffersExtension["COLOR_ATTACHMENT" + i + "_WEBGL"];
+                    }
+                } else {
+                    this._caps.drawBuffersExtension = false;
+                }
+            }
+
             // Vertex array object
             if (this._webGLVersion > 1) {
                 this._caps.vertexArrayObject = true;
@@ -3190,7 +3208,7 @@
 
             var width = size.width || size;
             var height = size.height || size;
-
+            
             var textures = [];
             var attachments = []
 
@@ -3217,6 +3235,7 @@
 
                 var texture = new InternalTexture(this, InternalTexture.DATASOURCE_MULTIRENDERTARGET);
                 var attachment = gl["COLOR_ATTACHMENT" + i];
+                
                 textures.push(texture);
                 attachments.push(attachment);
 
@@ -3269,7 +3288,7 @@
                 gl.texImage2D(
                     gl.TEXTURE_2D,
                     0,
-                    gl.DEPTH_COMPONENT16,
+                    this.webGLVersion < 2 ? gl.DEPTH_COMPONENT : gl.DEPTH_COMPONENT16,
                     width,
                     height,
                     0,
@@ -4129,7 +4148,7 @@
 
                 if (internalTexture._cachedWrapU !== texture.wrapU) {
                     internalTexture._cachedWrapU = texture.wrapU;
-
+                    
                     switch (texture.wrapU) {
                         case Texture.WRAP_ADDRESSMODE:
                             this._gl.texParameteri(this._gl.TEXTURE_2D, this._gl.TEXTURE_WRAP_S, this._gl.REPEAT);