课程表

three.js课程

工具箱
速查手册

Three 使用WebGL2

当前位置:免费教程 » JS/JS库/框架 » three.js

从R95版本起,three.js便开始支持使用WebGL 2环境来进行渲染。默认情况下,当创建一个WebGLRenderer实例时, three.js总是使用WebGL 1环境。如果你希望来使用WebGL 2环境,请参阅以下的工作流程。

工作流程

由于WebGL 2并不被所有支持WebGL 1的设备所支持,因此检查各种设备上WebGL 2的可用性是非常重要的。 要对其可用性进行检查,请将WebGL.js包含到你的项目中。

<script src="/path/to/WebGL.js"></script>

接下来,使用和下列代码相似的代码来进行可用性检查。

if ( WEBGL.isWebGL2Available() === false ) {
	document.body.appendChild( WEBGL.getWebGL2ErrorMessage() );
}

现在,你就可以将由WebGLRenderer所构造的renderer,应用到HTML5 Canvas元素和对应的WebGL 2绘图环境上了。 最终,three.js将在内部使用所给定的绘图环境来渲染,并自动将内置的材质的着色器代码转化为GLSL ES 3.00。

var canvas = document.createElement( 'canvas' );
var context = canvas.getContext( 'webgl2' );
var renderer = new THREE.WebGLRenderer( { canvas: canvas, context: context } );

有时候,写一些自定义着色器也是非常必要的。请使用下列的代码模板作为你自己来进行实现的基础。 首先是GLSL ES 3.00代码。

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

然后是使用JavaScript来创建的对应的材质。

var material = new THREE.ShaderMaterial( {
	vertexShader: document.getElementById( 'vs' ).textContent.trim(),
	fragmentShader: document.getElementById( 'fs' ).textContent.trim()
} );

接下来

请参阅官方示例,来看一看WebGL 2各种特性的运行。
WebGL2 / materials / texture3d
WebGL2 / materials / texture3d / volume
WebGL2 / multisampled renderbuffers

支持的特性

当前,three.js引擎仅支持所有现有的WebGL 2特性的一个子集。 下列列表展现了在最新版本three.js中,已可用的特性的概览。

  • 3D Textures

  • Multisampled Renderbuffers


转载本站内容时,请务必注明来自W3xue,违者必究。
 友情链接: NPS