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/jsm/WebGL.js WebGL.js] into your project.
import { WEBGL } from 'three/examples/jsm/WebGL.js';
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.
Since you are manually creating the WebGL 2 rendering context, you also have to pass in all necessary context attributes. Note: It's not possible to modify these attributes after the context has been created, so passing them to the WebGLRenderer won't have any effect.
var canvas = document.createElement( 'canvas' );
var context = canvas.getContext( 'webgl2', { alpha: false } );
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_texture2darray WebGL2 / materials / texture2darray]
[example:webgl2_multisampled_renderbuffers WebGL2 / multisampled renderbuffers]
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.