Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
车家大少爷
three.js
提交
15b0d2b6
T
three.js
项目概览
车家大少爷
/
three.js
与 Fork 源项目一致
从无法访问的项目Fork
通知
2
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
T
three.js
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
15b0d2b6
编写于
10月 15, 2018
作者:
M
Mugen87
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Docs: Added manual page about WebGL 2
上级
feb480aa
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
241 addition
and
1 deletion
+241
-1
docs/list.js
docs/list.js
+3
-1
docs/manual/en/introduction/How-to-use-WebGL2.html
docs/manual/en/introduction/How-to-use-WebGL2.html
+119
-0
docs/manual/zh/introduction/How-to-use-WebGL2.html
docs/manual/zh/introduction/How-to-use-WebGL2.html
+119
-0
未找到文件。
docs/list.js
浏览文件 @
15b0d2b6
...
...
@@ -10,6 +10,7 @@ var list = {
"
Browser support
"
:
"
manual/en/introduction/Browser-support
"
,
"
WebGL compatibility check
"
:
"
manual/en/introduction/WebGL-compatibility-check
"
,
"
How to run things locally
"
:
"
manual/en/introduction/How-to-run-things-locally
"
,
"
How to use WebGL 2
"
:
"
manual/en/introduction/How-to-use-WebGL2
"
,
"
Drawing lines
"
:
"
manual/en/introduction/Drawing-lines
"
,
"
Creating text
"
:
"
manual/en/introduction/Creating-text
"
,
"
Loading 3D models
"
:
"
manual/en/introduction/Loading-3D-models
"
,
...
...
@@ -436,6 +437,7 @@ var list = {
"
浏览器支持
"
:
"
manual/zh/introduction/Browser-support
"
,
"
WebGL兼容性检查
"
:
"
manual/zh/introduction/WebGL-compatibility-check
"
,
"
如何在本地运行Three.js
"
:
"
manual/zh/introduction/How-to-run-things-locally
"
,
"
How to use WebGL 2
"
:
"
manual/zh/introduction/How-to-use-WebGL2
"
,
"
画线
"
:
"
manual/zh/introduction/Drawing-lines
"
,
"
创建文字
"
:
"
manual/zh/introduction/Creating-text
"
,
"
载入3D模型
"
:
"
manual/zh/introduction/Loading-3D-models
"
,
...
...
@@ -757,7 +759,7 @@ var list = {
"
CompressedTexture
"
:
"
api/zh/textures/CompressedTexture
"
,
"
CubeTexture
"
:
"
api/zh/textures/CubeTexture
"
,
"
DataTexture
"
:
"
api/zh/textures/DataTexture
"
,
"
DataTexture3D
"
:
"
api/
en
/textures/DataTexture3D
"
,
"
DataTexture3D
"
:
"
api/
zh
/textures/DataTexture3D
"
,
"
DepthTexture
"
:
"
api/zh/textures/DepthTexture
"
,
"
Texture
"
:
"
api/zh/textures/Texture
"
,
"
VideoTexture
"
:
"
api/zh/textures/VideoTexture
"
...
...
docs/manual/en/introduction/How-to-use-WebGL2.html
0 → 100644
浏览文件 @
15b0d2b6
<!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>
<br
/>
<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/js/WebGL.js WebGL.js] into your project.
</p>
<code>
<
script src="/path/to/WebGL.js"
><
/script
>
</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>
<
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_texture3d_volume WebGL2 / materials / texture3d / volume]
<br
/>
</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>
</ul>
</p>
</body>
</html>
docs/manual/zh/introduction/How-to-use-WebGL2.html
0 → 100644
浏览文件 @
15b0d2b6
<!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>
<br
/>
<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/js/WebGL.js WebGL.js] into your project.
</p>
<code>
<
script src="/path/to/WebGL.js"
><
/script
>
</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>
<
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_texture3d_volume WebGL2 / materials / texture3d / volume]
<br
/>
</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>
</ul>
</p>
</body>
</html>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录