javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
							<!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>

	<code>
var canvas = document.createElement( 'canvas' );
var context = canvas.getContext( 'webgl2' );
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>
&lt;script id="vs" type="x-shader/x-vertex"&gt;
#version 300 es

void main() {

	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

}
&lt;/script&gt;
&lt;script id="fs" type="x-shader/x-fragment"&gt;
#version 300 es

precision highp float;
precision highp int;
out vec4 out_FragColor;

void main() {

	out_FragColor = vec4( 1.0 );

}
&lt;/script&gt;
	</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>