Change render target to 16bit

index.html

@@ -145,7 +145,7 @@
             //gl_FragColor = vec4(mix(waterColor, vec3(1.,1.,1.),fresnel).xyz, 1.);
             //gl_FragColor = vec4(result,1.0);
             //gl_FragColor = vec4(normal,1.0);
-            gl_FragColor = vec4(displace.xyz,1.0); //Show Perlin Noise texture deactivate vertex distrotion before
+            gl_FragColor = vec4(displace.x,displace.x,displace.x,1.0); //Show Perlin Noise texture deactivate vertex distrotion before
         }
     </script>
     <script id="default-vs" type="x-shader/x-vertex">

src/main.ts

@@ -24,10 +24,11 @@ function initGL(canvas: HTMLCanvasElement) {
         alert("Unable to initialize WebGL. Your browser or machine may not support it.");
     }
     gl = <WebGL2RenderingContext>gltemp;
-    //WebGL2 supports floating point textures by default but it does not support filtering them or rendering to them by default. 
-    gl.getExtension( 'EXT_color_buffer_float' ); //allow 32bit texture as framebuffer target
-    gl.getExtension( 'OES_texture_float_linear' ); //allow linear filtering
-    
+    //WebGL2 supports floating point textures by default but it does not support filtering them or rendering to them by default. Note: 16bit filtering is included
+    if (!gl.getExtension('EXT_color_buffer_float')) {
+        console.log("32Bit render Buffers not available.")
+    } //allow 32bit texture as framebuffer target
+
     gl.enable(gl.DEPTH_TEST);
 }
 
@@ -220,7 +221,7 @@ function initFBO() {
     // Add attachments
     textureFBO = gl.createTexture();
     gl.bindTexture(gl.TEXTURE_2D, textureFBO);                                            //last 3 parameter not intertesting becuase we are not supplying data
-    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA32F, perlinNoiseFBOWidth, ferlinNoiseFBOHeight, 0, gl.RGBA, gl.FLOAT, null);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.R16F, perlinNoiseFBOWidth, ferlinNoiseFBOHeight, 0, gl.RED, gl.HALF_FLOAT, null);
 
     // set the filtering so we don't need mips
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);