Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Ablesons
three.js
提交
2ff9d410
T
three.js
项目概览
Ablesons
/
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,发现更多精彩内容 >>
提交
2ff9d410
编写于
10月 28, 2016
作者:
M
Mr.doob
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Added WebGL2Renderer.
上级
8cd41354
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
399 addition
and
0 deletion
+399
-0
examples/files.js
examples/files.js
+3
-0
examples/webgl2_sandbox.html
examples/webgl2_sandbox.html
+210
-0
src/Three.js
src/Three.js
+1
-0
src/renderers/WebGL2Renderer.js
src/renderers/WebGL2Renderer.js
+185
-0
未找到文件。
examples/files.js
浏览文件 @
2ff9d410
...
@@ -262,6 +262,9 @@ var files = {
...
@@ -262,6 +262,9 @@ var files = {
"
webgl deferred
"
:
[
"
webgl deferred
"
:
[
"
webgldeferred_animation
"
"
webgldeferred_animation
"
],
],
"
webgl2
"
:
[
"
webgl2_sandbox
"
],
"
webvr
"
:
[
"
webvr
"
:
[
"
webvr_cubes
"
,
"
webvr_cubes
"
,
"
webvr_panorama
"
,
"
webvr_panorama
"
,
...
...
examples/webgl2_sandbox.html
0 → 100644
浏览文件 @
2ff9d410
<!DOCTYPE html>
<html
lang=
"en"
>
<head>
<title>
three.js - webgl2 sandbox
</title>
<meta
charset=
"utf-8"
>
<meta
name=
"viewport"
content=
"width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
>
<style>
body
{
background
:
#000
;
padding
:
0
;
margin
:
0
;
font-weight
:
bold
;
overflow
:
hidden
;
}
#info
{
position
:
absolute
;
top
:
0px
;
width
:
100%
;
color
:
#ffffff
;
padding
:
5px
;
font-family
:
Monospace
;
font-size
:
13px
;
text-align
:
center
;
z-index
:
1000
;
}
a
{
color
:
#ffffff
;
}
</style>
</head>
<body>
<div
id=
"info"
><a
href=
"http://threejs.org"
target=
"_blank"
>
three.js
</a>
- webgl2 sandbox.
</div>
<script
src=
"../build/three.js"
></script>
<script
src=
"js/libs/stats.min.js"
></script>
<script>
var
statsEnabled
=
true
;
var
container
,
stats
;
var
camera
,
scene
,
renderer
;
var
mesh
,
zmesh
,
lightMesh
,
geometry
;
var
mouseX
=
0
,
mouseY
=
0
;
var
windowHalfX
=
window
.
innerWidth
/
2
;
var
windowHalfY
=
window
.
innerHeight
/
2
;
init
();
animate
();
function
init
()
{
container
=
document
.
createElement
(
'
div
'
);
document
.
body
.
appendChild
(
container
);
camera
=
new
THREE
.
PerspectiveCamera
(
60
,
window
.
innerWidth
/
window
.
innerHeight
,
1
,
20000
);
camera
.
position
.
z
=
3200
;
scene
=
new
THREE
.
Scene
();
scene
.
background
=
new
THREE
.
Color
(
0
,
0
,
0.5
);
scene
.
fog
=
new
THREE
.
Fog
(
0x000000
,
1
,
20000
);
var
light
=
new
THREE
.
PointLight
(
0xffffff
);
scene
.
add
(
light
);
var
texture1
=
new
THREE
.
CanvasTexture
(
generateTexture
(
0
,
0.5
,
1
),
THREE
.
UVMapping
);
var
materials
=
[
new
THREE
.
MeshNormalMaterial
(),
new
THREE
.
MeshDepthMaterial
(),
new
THREE
.
MeshBasicMaterial
(
{
color
:
0x0066ff
,
blending
:
THREE
.
AdditiveBlending
,
transparent
:
true
,
depthWrite
:
false
}
),
new
THREE
.
MeshBasicMaterial
(
{
color
:
0xffaa00
,
wireframe
:
true
}
),
new
THREE
.
MeshBasicMaterial
(
{
map
:
texture1
,
fog
:
false
}
),
new
THREE
.
MeshLambertMaterial
(
{
color
:
0xdddddd
}
),
new
THREE
.
MeshPhongMaterial
(
{
color
:
0xdddddd
,
specular
:
0x009900
,
shininess
:
30
,
shading
:
THREE
.
FlatShading
}
),
new
THREE
.
MeshPhongMaterial
(
{
color
:
0xdddddd
,
specular
:
0x009900
,
shininess
:
30
,
shading
:
THREE
.
SmoothShading
}
)
];
var
geometry
=
new
THREE
.
SphereGeometry
(
50
,
32
,
16
);
for
(
var
i
=
0
;
i
<
5000
;
i
++
)
{
// random order
//var index = Math.floor( Math.random() * materials.length );
// sort by material / geometry
var
index
=
Math
.
floor
(
(
i
/
5000
)
*
materials
.
length
);
var
material
=
materials
[
index
];
var
mesh
=
new
THREE
.
Mesh
(
geometry
,
material
);
mesh
.
position
.
x
=
Math
.
random
()
*
10000
-
5000
;
mesh
.
position
.
y
=
Math
.
random
()
*
10000
-
5000
;
mesh
.
position
.
z
=
Math
.
random
()
*
10000
-
5000
;
//mesh.rotation.x = Math.random() * 360 * ( Math.PI / 180 );
mesh
.
rotation
.
y
=
Math
.
random
()
*
2
*
Math
.
PI
;
mesh
.
scale
.
x
=
mesh
.
scale
.
y
=
mesh
.
scale
.
z
=
Math
.
random
()
*
4
+
1
;
scene
.
add
(
mesh
);
}
renderer
=
new
THREE
.
WebGL2Renderer
();
renderer
.
setPixelRatio
(
window
.
devicePixelRatio
);
renderer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
container
.
appendChild
(
renderer
.
domElement
);
if
(
statsEnabled
)
{
stats
=
new
Stats
();
container
.
appendChild
(
stats
.
dom
);
}
document
.
addEventListener
(
'
mousemove
'
,
onDocumentMouseMove
,
false
);
//
window
.
addEventListener
(
'
resize
'
,
onWindowResize
,
false
);
}
function
onWindowResize
()
{
windowHalfX
=
window
.
innerWidth
/
2
;
windowHalfY
=
window
.
innerHeight
/
2
;
camera
.
aspect
=
window
.
innerWidth
/
window
.
innerHeight
;
camera
.
updateProjectionMatrix
();
renderer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
}
function
generateTexture
(
r
,
g
,
b
)
{
var
canvas
=
document
.
createElement
(
'
canvas
'
);
canvas
.
width
=
256
;
canvas
.
height
=
256
;
var
context
=
canvas
.
getContext
(
'
2d
'
);
var
image
=
context
.
getImageData
(
0
,
0
,
256
,
256
);
var
x
=
0
,
y
=
0
,
p
;
for
(
var
i
=
0
,
j
=
0
,
l
=
image
.
data
.
length
;
i
<
l
;
i
+=
4
,
j
++
)
{
x
=
j
%
256
;
y
=
x
==
0
?
y
+
1
:
y
;
p
=
Math
.
floor
(
x
^
y
);
image
.
data
[
i
]
=
~~
p
*
r
;
image
.
data
[
i
+
1
]
=
~~
p
*
g
;
image
.
data
[
i
+
2
]
=
~~
p
*
b
;
image
.
data
[
i
+
3
]
=
255
;
}
context
.
putImageData
(
image
,
0
,
0
);
return
canvas
;
}
function
onDocumentMouseMove
(
event
)
{
mouseX
=
(
event
.
clientX
-
windowHalfX
)
*
10
;
mouseY
=
(
event
.
clientY
-
windowHalfY
)
*
10
;
}
//
function
animate
()
{
requestAnimationFrame
(
animate
);
render
();
if
(
statsEnabled
)
stats
.
update
();
}
function
render
()
{
camera
.
position
.
x
+=
(
mouseX
-
camera
.
position
.
x
)
*
.
05
;
camera
.
position
.
y
+=
(
-
mouseY
-
camera
.
position
.
y
)
*
.
05
;
camera
.
lookAt
(
scene
.
position
);
renderer
.
render
(
scene
,
camera
);
}
</script>
</body>
</html>
src/Three.js
浏览文件 @
2ff9d410
...
@@ -3,6 +3,7 @@ import './polyfills.js';
...
@@ -3,6 +3,7 @@ import './polyfills.js';
export
{
WebGLRenderTargetCube
}
from
'
./renderers/WebGLRenderTargetCube.js
'
;
export
{
WebGLRenderTargetCube
}
from
'
./renderers/WebGLRenderTargetCube.js
'
;
export
{
WebGLRenderTarget
}
from
'
./renderers/WebGLRenderTarget.js
'
;
export
{
WebGLRenderTarget
}
from
'
./renderers/WebGLRenderTarget.js
'
;
export
{
WebGLRenderer
}
from
'
./renderers/WebGLRenderer.js
'
;
export
{
WebGLRenderer
}
from
'
./renderers/WebGLRenderer.js
'
;
export
{
WebGL2Renderer
}
from
'
./renderers/WebGL2Renderer.js
'
;
export
{
ShaderLib
}
from
'
./renderers/shaders/ShaderLib.js
'
;
export
{
ShaderLib
}
from
'
./renderers/shaders/ShaderLib.js
'
;
export
{
UniformsLib
}
from
'
./renderers/shaders/UniformsLib.js
'
;
export
{
UniformsLib
}
from
'
./renderers/shaders/UniformsLib.js
'
;
export
{
UniformsUtils
}
from
'
./renderers/shaders/UniformsUtils.js
'
;
export
{
UniformsUtils
}
from
'
./renderers/shaders/UniformsUtils.js
'
;
...
...
src/renderers/WebGL2Renderer.js
0 → 100644
浏览文件 @
2ff9d410
/**
* @author mrdoob / http://mrdoob.com/
*/
import
{
REVISION
}
from
'
../constants
'
;
import
{
WebGLExtensions
}
from
'
./webgl/WebGLExtensions
'
;
import
{
WebGLState
}
from
'
./webgl/WebGLState
'
;
import
{
Color
}
from
'
../math/Color
'
;
import
{
Vector4
}
from
'
../math/Vector4
'
;
function
WebGL2Renderer
(
parameters
)
{
console
.
log
(
'
THREE.WebGL2Renderer
'
,
REVISION
);
parameters
=
parameters
||
{};
var
_canvas
=
parameters
.
canvas
!==
undefined
?
parameters
.
canvas
:
document
.
createElementNS
(
'
http://www.w3.org/1999/xhtml
'
,
'
canvas
'
),
_context
=
parameters
.
context
!==
undefined
?
parameters
.
context
:
null
,
_alpha
=
parameters
.
alpha
!==
undefined
?
parameters
.
alpha
:
false
,
_depth
=
parameters
.
depth
!==
undefined
?
parameters
.
depth
:
true
,
_stencil
=
parameters
.
stencil
!==
undefined
?
parameters
.
stencil
:
true
,
_antialias
=
parameters
.
antialias
!==
undefined
?
parameters
.
antialias
:
false
,
_premultipliedAlpha
=
parameters
.
premultipliedAlpha
!==
undefined
?
parameters
.
premultipliedAlpha
:
true
,
_preserveDrawingBuffer
=
parameters
.
preserveDrawingBuffer
!==
undefined
?
parameters
.
preserveDrawingBuffer
:
false
;
// initialize
var
gl
;
try
{
var
attributes
=
{
alpha
:
_alpha
,
depth
:
_depth
,
stencil
:
_stencil
,
antialias
:
_antialias
,
premultipliedAlpha
:
_premultipliedAlpha
,
preserveDrawingBuffer
:
_preserveDrawingBuffer
};
gl
=
_context
||
_canvas
.
getContext
(
'
webgl2
'
,
attributes
);
if
(
gl
===
null
)
{
if
(
_canvas
.
getContext
(
'
webgl2
'
)
!==
null
)
{
throw
'
Error creating WebGL2 context with your selected attributes.
'
;
}
else
{
throw
'
Error creating WebGL2 context.
'
;
}
}
_canvas
.
addEventListener
(
'
webglcontextlost
'
,
onContextLost
,
false
);
}
catch
(
error
)
{
console
.
error
(
'
THREE.WebGL2Renderer:
'
+
error
);
}
//
var
_this
=
this
,
_autoClear
=
true
,
_autoClearColor
=
true
,
_autoClearDepth
=
true
,
_autoClearStencil
=
true
,
_clearColor
=
new
Color
(
0x000000
),
_clearAlpha
=
0
,
_width
=
_canvas
.
width
,
_height
=
_canvas
.
height
,
_pixelRatio
=
1
,
_viewport
=
new
Vector4
(
0
,
0
,
_width
,
_height
);
var
extensions
=
new
WebGLExtensions
(
gl
);
var
state
=
new
WebGLState
(
gl
,
extensions
,
function
()
{}
);
//
function
clear
(
color
,
depth
,
stencil
)
{
var
bits
=
0
;
if
(
color
===
undefined
||
color
)
bits
|=
gl
.
COLOR_BUFFER_BIT
;
if
(
depth
===
undefined
||
depth
)
bits
|=
gl
.
DEPTH_BUFFER_BIT
;
if
(
stencil
===
undefined
||
stencil
)
bits
|=
gl
.
STENCIL_BUFFER_BIT
;
gl
.
clear
(
bits
);
}
function
setPixelRatio
(
value
)
{
if
(
value
===
undefined
)
return
;
_pixelRatio
=
value
;
setSize
(
_viewport
.
z
,
_viewport
.
w
,
false
);
}
function
setSize
(
width
,
height
,
updateStyle
)
{
_width
=
width
;
_height
=
height
;
_canvas
.
width
=
width
*
_pixelRatio
;
_canvas
.
height
=
height
*
_pixelRatio
;
if
(
updateStyle
!==
false
)
{
_canvas
.
style
.
width
=
width
+
'
px
'
;
_canvas
.
style
.
height
=
height
+
'
px
'
;
}
setViewport
(
0
,
0
,
width
,
height
);
}
function
setViewport
(
x
,
y
,
width
,
height
)
{
state
.
viewport
(
_viewport
.
set
(
x
,
y
,
width
,
height
)
);
}
function
render
(
scene
,
camera
)
{
if
(
camera
!==
undefined
&&
camera
.
isCamera
!==
true
)
{
console
.
error
(
'
THREE.WebGL2Renderer.render: camera is not an instance of THREE.Camera.
'
);
return
;
}
var
background
=
scene
.
background
;
var
forceClear
=
false
;
if
(
background
===
null
)
{
state
.
buffers
.
color
.
setClear
(
_clearColor
.
r
,
_clearColor
.
g
,
_clearColor
.
b
,
_clearAlpha
,
_premultipliedAlpha
);
}
else
if
(
background
&&
background
.
isColor
)
{
state
.
buffers
.
color
.
setClear
(
background
.
r
,
background
.
g
,
background
.
b
,
1
,
_premultipliedAlpha
);
forceClear
=
true
;
}
if
(
_autoClear
||
forceClear
)
{
this
.
clear
(
_autoClearColor
,
_autoClearDepth
,
_autoClearStencil
);
}
}
function
onContextLost
(
event
)
{
event
.
preventDefault
();
}
return
{
domElement
:
_canvas
,
clear
:
clear
,
setPixelRatio
:
setPixelRatio
,
setSize
:
setSize
,
render
:
render
}
}
export
{
WebGL2Renderer
};
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录