WebGLRenderer WebGL2.0 basic support

src/renderers/WebGLRenderer.js

@@ -2427,7 +2427,7 @@ function WebGLRenderer( parameters ) {
 
 	};
 
-	this.setRenderTarget = function ( renderTarget ) {
+	this.setRenderTarget = function ( renderTarget, optType ) {
 
 		_currentRenderTarget = renderTarget;
 
@@ -2469,7 +2469,7 @@ function WebGLRenderer( parameters ) {
 
 		if ( _currentFramebuffer !== framebuffer ) {
 
-			_gl.bindFramebuffer( _gl.FRAMEBUFFER, framebuffer );
+			_gl.bindFramebuffer( optType || _gl.FRAMEBUFFER, framebuffer );
 			_currentFramebuffer = framebuffer;
 
 		}

src/renderers/webgl/WebGLExtensions.js

@@ -6,6 +6,8 @@ function WebGLExtensions( gl ) {
 
 	var extensions = {};
 
+	var isWebGL2 = ( typeof WebGL2RenderingContext !== 'undefined' && gl instanceof WebGL2RenderingContext );
+
 	return {
 
 		get: function ( name ) {
@@ -21,7 +23,17 @@ function WebGLExtensions( gl ) {
 			switch ( name ) {
 
 				case 'WEBGL_depth_texture':
-					extension = gl.getExtension( 'WEBGL_depth_texture' ) || gl.getExtension( 'MOZ_WEBGL_depth_texture' ) || gl.getExtension( 'WEBKIT_WEBGL_depth_texture' );
+
+					if ( isWebGL2 ) {
+
+						extension = gl;
+
+					} else {
+
+						extension = gl.getExtension( 'WEBGL_depth_texture' ) || gl.getExtension( 'MOZ_WEBGL_depth_texture' ) || gl.getExtension( 'WEBKIT_WEBGL_depth_texture' );
+
+					}
+
 					break;
 
 				case 'EXT_texture_filter_anisotropic':
@@ -41,7 +53,22 @@ function WebGLExtensions( gl ) {
 					break;
 
 				default:
-					extension = gl.getExtension( name );
+
+					if ( isWebGL2 && 
+						[ 'ANGLE_instanced_arrays',
+						  'OES_texture_float',
+						  'OES_texture_half_float',
+						  'OES_texture_half_float_linear',
+						  'OES_element_index_uint',
+						  'OES_standard_derivatives' ].indexOf( name ) >= 0 ) {
+
+						extension = gl;
+
+					} else {
+
+						extension = gl.getExtension( name );
+
+					}
 
 			}
 

src/renderers/webgl/WebGLProgram.js

@@ -79,15 +79,15 @@ function getToneMappingFunction( functionName, toneMapping ) {
 
 }
 
-function generateExtensions( extensions, parameters, rendererExtensions ) {
+function generateExtensions( extensions, parameters, rendererExtensions, isWebGL2 ) {
 
 	extensions = extensions || {};
 
 	var chunks = [
-		( extensions.derivatives || parameters.envMapCubeUV || parameters.bumpMap || parameters.normalMap || parameters.flatShading ) ? '#extension GL_OES_standard_derivatives : enable' : '',
+		( ! isWebGL2 && ( extensions.derivatives || parameters.envMapCubeUV || parameters.bumpMap || parameters.normalMap || parameters.flatShading ) ) ? '#extension GL_OES_standard_derivatives : enable' : '',
 		( extensions.fragDepth || parameters.logarithmicDepthBuffer ) && rendererExtensions.get( 'EXT_frag_depth' ) ? '#extension GL_EXT_frag_depth : enable' : '',
 		( extensions.drawBuffers ) && rendererExtensions.get( 'WEBGL_draw_buffers' ) ? '#extension GL_EXT_draw_buffers : require' : '',
-		( extensions.shaderTextureLOD || parameters.envMap ) && rendererExtensions.get( 'EXT_shader_texture_lod' ) ? '#extension GL_EXT_shader_texture_lod : enable' : ''
+		( ! isWebGL2 && ( extensions.shaderTextureLOD || parameters.envMap ) && rendererExtensions.get( 'EXT_shader_texture_lod' ) ) ? '#extension GL_EXT_shader_texture_lod : enable' : ''
 	];
 
 	return chunks.filter( filterEmptyLine ).join( '\n' );
@@ -206,6 +206,8 @@ function WebGLProgram( renderer, extensions, code, material, shader, parameters
 
 	var gl = renderer.context;
 
+	var isWebGL2 = typeof WebGL2RenderingContext !== 'undefined' && gl instanceof WebGL2RenderingContext;
+
 	var defines = material.defines;
 
 	var vertexShader = shader.vertexShader;
@@ -285,7 +287,7 @@ function WebGLProgram( renderer, extensions, code, material, shader, parameters
 
 	//
 
-	var customExtensions = generateExtensions( material.extensions, parameters, extensions );
+	var customExtensions = generateExtensions( material.extensions, parameters, extensions, isWebGL2 );
 
 	var customDefines = generateDefines( defines );
 
@@ -517,6 +519,35 @@ function WebGLProgram( renderer, extensions, code, material, shader, parameters
 	var vertexGlsl = prefixVertex + vertexShader;
 	var fragmentGlsl = prefixFragment + fragmentShader;
 
+	if ( isWebGL2 ) {
+
+		// GLSL 3.0 conversion
+		var gles3VS = [
+			'#define attribute in',
+			'#define varying out',
+			'#define texture2D texture'
+		].join( '\n' );
+
+		var gles3PS = [
+			'#define varying in',
+			'out highp vec4 pc_fragColor;',
+			'#define gl_FragColor pc_fragColor',
+			'#define texture2D texture',
+			'#define textureCube texture',
+			'#define texture2DProj textureProj',
+			'#define texture2DLodEXT textureLod',
+			'#define texture2DProjLodEXT textureProjLod',
+			'#define textureCubeLodEXT textureLod',
+			'#define texture2DGradEXT textureGrad',
+			'#define texture2DProjGradEXT textureProjGrad',
+			'#define textureCubeGradEXT textureGrad'
+		].join( '\n' );
+
+		vertexGlsl = '#version 300 es\n' + gles3VS + '\n' + vertexGlsl;
+		fragmentGlsl = '#version 300 es\n' + gles3PS + '\n' + fragmentGlsl;
+
+	}
+
 	// console.log( '*VERTEX*', vertexGlsl );
 	// console.log( '*FRAGMENT*', fragmentGlsl );
 

src/renderers/webgl/WebGLTextures.js

@@ -545,7 +545,13 @@ function WebGLTextures( _gl, extensions, state, properties, capabilities, utils,
 
 			} else {
 
-				state.texImage2D( _gl.TEXTURE_2D, 0, glFormat, image.width, image.height, 0, glFormat, glType, image.data );
+				// temporal workaround
+				// @TODO Fix
+				var isWebGL2 = ( typeof WebGL2RenderingContext !== 'undefined' && _gl instanceof WebGL2RenderingContext );
+
+				var glInternalFormat = ( isWebGL2 && glFormat === _gl.RGBA && glType === _gl.FLOAT ) ? _gl.RGBA32F : glFormat;
+
+				state.texImage2D( _gl.TEXTURE_2D, 0, glInternalFormat, image.width, image.height, 0, glFormat, glType, image.data );
 				textureProperties.__maxMipLevel = 0;
 
 			}

src/renderers/webgl/WebGLUtils.js

@@ -38,7 +38,8 @@ function WebGLUtils( gl, extensions ) {
 
 			extension = extensions.get( 'OES_texture_half_float' );
 
-			if ( extension !== null ) return extension.HALF_FLOAT_OES;
+			var isWebGL2 = ( typeof WebGL2RenderingContext !== 'undefined' && gl instanceof WebGL2RenderingContext );
+			return isWebGL2 ? gl.HALF_FLOAT : extension.HALF_FLOAT_OES;
 
 		}