|
|
@@ -1,127 +0,0 @@
|
|
|
-<!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>
|
Mugen87