如何使用WebGL 2([name])
从R95版本起,Verge3D便开始支持使用WebGL 2环境来进行渲染。默认情况下,当创建一个*WebGLRenderer*实例时, Verge3D总是使用WebGL 1环境。如果你希望来使用WebGL 2环境,请参阅以下的工作流程。
工作流程
由于WebGL 2并不被所有支持WebGL 1的设备所支持,因此检查各种设备上WebGL 2的可用性是非常重要的。 要对其可用性进行检查,请将[link:https://github.com/Soft8Soft/verge3d-code-examples/blob/master/js/WebGL.js WebGL.js]包含到你的项目中。
<script src="/path/to/WebGL.js"></script>
接下来,使用和下列代码相似的代码来进行可用性检查。
if (WEBGL.isWebGL2Available() === false) {
document.body.appendChild(WEBGL.getWebGL2ErrorMessage());
}
现在,你就可以将由*WebGLRenderer*所构造的renderer,应用到HTML5 Canvas元素和对应的WebGL 2绘图环境上了。 最终,Verge3D将在内部使用所给定的绘图环境来渲染,并自动将内置的材质的着色器代码转化为GLSL ES 3.00。
var canvas = document.createElement('canvas');
var context = canvas.getContext('webgl2');
var renderer = new v3d.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 v3d.ShaderMaterial({
vertexShader: document.getElementById('vs').textContent.trim(),
fragmentShader: document.getElementById('fs').textContent.trim()
});
接下来
请参阅官方示例,来看一看WebGL 2各种特性的运行。
[example:webgl2_materials_texture3d WebGL2 / materials / texture3d]
[example:webgl2_materials_texture3d_volume WebGL2 / materials / texture3d / volume]
[example:webgl2_multisampled_renderbuffers WebGL2 / multisampled renderbuffers]
支持的特性
当前,Verge3D引擎仅支持所有现有的WebGL 2特性的一个子集。 下列列表展现了在最新版本Verge3D中,已可用的特性的概览。
- 3D Textures
- Multisampled Renderbuffers