+ Starting with three.js R95, the engine supports rendering with a WebGL 2 context. By default three.js always uses a + WebGL 1 context when creating an instance of *WebGLRenderer*. If you want use a WebGL 2 context, please have a look + at the following workflow. +
+ ++ Since WebGL 2 is not supported by all devices that support WebGL 1, it's important to check the respective availability. + To do so, please include [link:https://github.com/mrdoob/three.js/blob/master/examples/js/WebGL.js WebGL.js] into your project. +
+ +
+<script src="/path/to/WebGL.js"></script>
+
+
+ + Next, use a code similar to the following in order to perform the availability check. +
+ +
+
+if ( WEBGL.isWebGL2Available() === false ) {
+
+ document.body.appendChild( WEBGL.getWebGL2ErrorMessage() );
+
+}
+
+
+ + Now it's time to create the renderer by applying the HTML5 canvas element and the respective WebGL 2 context + to the constructor of *WebGLRenderer*. As a result, three.js will internally use the given context for rendering and + automatically convert the built-in material's shader code to GLSL ES 3.00. +
+ +
+var canvas = document.createElement( 'canvas' );
+var context = canvas.getContext( 'webgl2' );
+var renderer = new THREE.WebGLRenderer( { canvas: canvas, context: context } );
+
+
+ + Sometimes it is necessary to write custom shader code. Use the following code template as a basis for your own + implementation. First, the GLSL ES 3.00 code. +
+ +
+<script id="vs" type="x-shader/x-vertex">
+#version 300 es
+
+void main() {
+
+ gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+}
+</script>
+<script id="fs" type="x-shader/x-fragment">
+#version 300 es
+
+precision highp float;
+precision highp int;
+out vec4 out_FragColor;
+
+void main() {
+
+ out_FragColor = vec4( 1.0 );
+
+}
+</script>
+
+ + Second, the corresponding material creation in JavaScript. +
+
+var material = new THREE.ShaderMaterial( {
+ vertexShader: document.getElementById( 'vs' ).textContent.trim(),
+ fragmentShader: document.getElementById( 'fs' ).textContent.trim()
+} );
+
+
+
+ Have a look at one of the official examples in order to see WebGL 2 features in action.
+
+ [example:webgl2_materials_texture3d WebGL2 / materials / texture3d]
+ [example:webgl2_materials_texture3d_volume WebGL2 / materials / texture3d / volume]
+
+ Right now, the engine does only support a subset of all existing WebGL 2 features. The following list provides an + overview about what's already available in the latest version of three.js. +
+ Starting with three.js R95, the engine supports rendering with a WebGL 2 context. By default three.js always uses a + WebGL 1 context when creating an instance of *WebGLRenderer*. If you want use a WebGL 2 context, please have a look + at the following workflow. +
+ ++ Since WebGL 2 is not supported by all devices that support WebGL 1, it's important to check the respective availability. + To do so, please include [link:https://github.com/mrdoob/three.js/blob/master/examples/js/WebGL.js WebGL.js] into your project. +
+ +
+<script src="/path/to/WebGL.js"></script>
+
+
+ + Next, use a code similar to the following in order to perform the availability check. +
+ +
+
+if ( WEBGL.isWebGL2Available() === false ) {
+
+ document.body.appendChild( WEBGL.getWebGL2ErrorMessage() );
+
+}
+
+
+ + Now it's time to create the renderer by applying the HTML5 canvas element and the respective WebGL 2 context + to the constructor of *WebGLRenderer*. As a result, three.js will internally use the given context for rendering and + automatically convert the built-in material's shader code to GLSL ES 3.00. +
+ +
+var canvas = document.createElement( 'canvas' );
+var context = canvas.getContext( 'webgl2' );
+var renderer = new THREE.WebGLRenderer( { canvas: canvas, context: context } );
+
+
+ + Sometimes it is necessary to write custom shader code. Use the following code template as a basis for your own + implementation. First, the GLSL ES 3.00 code. +
+ +
+<script id="vs" type="x-shader/x-vertex">
+#version 300 es
+
+void main() {
+
+ gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+}
+</script>
+<script id="fs" type="x-shader/x-fragment">
+#version 300 es
+
+precision highp float;
+precision highp int;
+out vec4 out_FragColor;
+
+void main() {
+
+ out_FragColor = vec4( 1.0 );
+
+}
+</script>
+
+ + Second, the corresponding material creation in JavaScript. +
+
+var material = new THREE.ShaderMaterial( {
+ vertexShader: document.getElementById( 'vs' ).textContent.trim(),
+ fragmentShader: document.getElementById( 'fs' ).textContent.trim()
+} );
+
+
+
+ Have a look at one of the official examples in order to see WebGL 2 features in action.
+
+ [example:webgl2_materials_texture3d WebGL2 / materials / texture3d]
+ [example:webgl2_materials_texture3d_volume WebGL2 / materials / texture3d / volume]
+
+ Right now, the engine does only support a subset of all existing WebGL 2 features. The following list provides an + overview about what's already available in the latest version of three.js. +