1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>[name]</h1>
<p>
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.
</p>
<h2>Workflow</h2>
<p>
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.
</p>
<code>
import { WEBGL } from 'three/examples/jsm/WebGL.js';
</code>
<p>
Next, use a code similar to the following in order to perform the availability check.
</p>
<code>
if ( WEBGL.isWebGL2Available() === false ) {
document.body.appendChild( WEBGL.getWebGL2ErrorMessage() );
}
</code>
<p>
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.
</p>
<p>
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.
</p>
<code>
var canvas = document.createElement( 'canvas' );
var context = canvas.getContext( 'webgl2', { alpha: false } );
var renderer = new THREE.WebGLRenderer( { canvas: canvas, context: context } );
</code>
<p>
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.
</p>
<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>
</code>
<p>
Second, the corresponding material creation in JavaScript.
</p>
<code>
var material = new THREE.ShaderMaterial( {
vertexShader: document.getElementById( 'vs' ).textContent.trim(),
fragmentShader: document.getElementById( 'fs' ).textContent.trim()
} );
</code>
<h2>Next Steps</h2>
<p>
Have a look at one of the official examples in order to see WebGL 2 features in action.<br /><br />
[example:webgl2_materials_texture3d WebGL2 / materials / texture3d]<br />
[example:webgl2_materials_texture2darray WebGL2 / materials / texture2darray]<br />
[example:webgl2_multisampled_renderbuffers WebGL2 / multisampled renderbuffers]
</p>
<h2>Supported features</h2>
<p>
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.
<ul>
<li>3D Textures</li>
<li>2D Texture Arrays</li>
<li>Multisampled Renderbuffers</li>
<li>Non-power of two (POT) textures work just the same as POT textures now. No resizing is required for best quality.</li>
</ul>
</p>
</body>
</html>
|
