Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Ablesons
three.js
提交
8e53294e
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,发现更多精彩内容 >>
提交
8e53294e
编写于
12月 14, 2010
作者:
A
alteredq
浏览文件
操作
浏览文件
下载
差异文件
Synced with mrdoob's branch.
上级
044a98c8
42253300
变更
13
展开全部
隐藏空白更改
内联
并排
Showing
13 changed file
with
1675 addition
and
562 deletion
+1675
-562
build/Three.js
build/Three.js
+80
-80
build/ThreeDebug.js
build/ThreeDebug.js
+78
-78
build/ThreeExtras.js
build/ThreeExtras.js
+119
-118
examples/geometry_minecraft.html
examples/geometry_minecraft.html
+32
-26
examples/lights_pointlights.html
examples/lights_pointlights.html
+15
-15
examples/lights_pointlights_smooth.html
examples/lights_pointlights_smooth.html
+135
-0
examples/uqbiquity_test.html
examples/uqbiquity_test.html
+1
-0
examples/webglrenderer2_sandbox.html
examples/webglrenderer2_sandbox.html
+242
-0
src/extras/ShaderUtils.js
src/extras/ShaderUtils.js
+329
-213
src/materials/MeshShaderMaterial.js
src/materials/MeshShaderMaterial.js
+1
-1
src/renderers/Projector.js
src/renderers/Projector.js
+5
-3
src/renderers/WebGLRenderer.js
src/renderers/WebGLRenderer.js
+27
-28
src/renderers/WebGLRenderer2.js
src/renderers/WebGLRenderer2.js
+611
-0
未找到文件。
build/Three.js
浏览文件 @
8e53294e
此差异已折叠。
点击以展开。
build/ThreeDebug.js
浏览文件 @
8e53294e
此差异已折叠。
点击以展开。
build/ThreeExtras.js
浏览文件 @
8e53294e
此差异已折叠。
点击以展开。
examples/geometry_minecraft.html
浏览文件 @
8e53294e
...
...
@@ -30,8 +30,8 @@
</head>
<body>
<div
id=
"container"
><br
/><br
/><br
/><br
/><br
/>
Generating world...
</div>
<div
id=
"info"
><a
href=
"http://github.com/mrdoob/three.js"
target=
"_blank"
>
three.js
</a>
-
<a
href=
"http://www.minecraft.net/"
target=
"_blank"
>
minecraft
</a>
demo. featuring
<a
href=
"http://painterlypack.net/"
target=
"_blank"
>
painterly pack
</a><br
/>
(left click: forward, right click: backward)
</div>
<div
id=
"container"
><br
/><br
/><br
/><br
/><br
/>
Generating world...
</div>
<div
id=
"info"
><a
href=
"http://github.com/mrdoob/three.js"
target=
"_blank"
>
three.js
</a>
-
<a
href=
"http://www.minecraft.net/"
target=
"_blank"
>
minecraft
</a>
demo. featuring
<a
href=
"http://painterlypack.net/"
target=
"_blank"
>
painterly pack
</a><br
/>
(left click: forward, right click: backward)
</div>
<script
type=
"text/javascript"
src=
"js/Stats.js"
></script>
<script
type=
"text/javascript"
src=
"js/ImprovedNoise.js"
></script>
...
...
@@ -78,7 +78,7 @@
var
grass_dirt
=
loadTexture
(
'
textures/minecraft/grass_dirt.png
'
),
grass
=
loadTexture
(
'
textures/minecraft/grass.png
'
),
dirt
=
loadTexture
(
'
textures/minecraft/dirt.png
'
);
var
materials
=
[
grass_dirt
,
// right
...
...
@@ -90,45 +90,51 @@
];
var
h
,
px
,
nx
,
pz
,
nz
,
cubes
=
[];
var
h
,
h2
,
px
,
nx
,
pz
,
nz
,
cubes
=
[];
for
(
var
i
=
0
;
i
<
16
;
i
++
)
{
px
=
(
i
&
8
)
==
8
;
nx
=
(
i
&
4
)
==
4
;
pz
=
(
i
&
2
)
==
2
;
nz
=
(
i
&
1
)
==
1
;
cubes
[
i
]
=
new
Cube
(
100
,
100
,
100
,
1
,
1
,
materials
,
false
,
{
px
:
px
,
nx
:
nx
,
py
:
true
,
ny
:
false
,
pz
:
pz
,
nz
:
nz
}
);
}
var
geometry
=
new
THREE
.
Geometry
();
camera
.
position
.
y
=
getY
(
worldHalfWidth
,
worldHalfDepth
)
+
100
;
camera
.
position
.
y
=
getY
(
worldHalfWidth
,
worldHalfDepth
)
*
100
+
100
;
camera
.
target
.
position
.
y
=
camera
.
position
.
y
;
for
(
var
z
=
0
;
z
<
worldDepth
;
z
++
)
{
for
(
var
x
=
0
;
x
<
worldWidth
;
x
++
)
{
px
=
nx
=
pz
=
nz
=
0
;
h
=
getY
(
x
,
z
);
px
=
(
getY
(
x
-
1
,
z
)
!=
h
)
||
x
==
0
?
1
:
0
;
nx
=
(
getY
(
x
+
1
,
z
)
!=
h
)
||
x
==
worldWidth
-
1
?
1
:
0
;
pz
=
(
getY
(
x
,
z
+
1
)
!=
h
)
||
z
==
worldDepth
-
1
?
1
:
0
;
nz
=
(
getY
(
x
,
z
-
1
)
!=
h
)
||
z
==
0
?
1
:
0
;
h2
=
getY
(
x
-
1
,
z
);
px
=
(
h2
!=
h
&&
h2
!=
h
+
1
)
||
x
==
0
?
1
:
0
;
h2
=
getY
(
x
+
1
,
z
);
nx
=
(
h2
!=
h
&&
h2
!=
h
+
1
)
||
x
==
worldWidth
-
1
?
1
:
0
;
h2
=
getY
(
x
,
z
+
1
);
pz
=
(
h2
!=
h
&&
h2
!=
h
+
1
)
||
z
==
worldDepth
-
1
?
1
:
0
;
h2
=
getY
(
x
,
z
-
1
);
nz
=
(
h2
!=
h
&&
h2
!=
h
+
1
)
||
z
==
0
?
1
:
0
;
mesh
=
new
THREE
.
Mesh
(
cubes
[
px
*
8
+
nx
*
4
+
pz
*
2
+
nz
]
);
mesh
.
position
.
x
=
x
*
100
-
worldHalfWidth
*
100
;
mesh
.
position
.
y
=
h
;
mesh
.
position
.
y
=
h
*
100
;
mesh
.
position
.
z
=
z
*
100
-
worldHalfDepth
*
100
;
GeometryUtils
.
merge
(
geometry
,
mesh
);
}
}
...
...
@@ -171,16 +177,16 @@
}
function
generateAO
(
image
,
sides
)
{
var
c
=
document
.
createElement
(
'
canvas
'
);
c
.
width
=
image
.
width
;
c
.
height
=
image
.
height
;
c
.
getContext
(
"
2d
"
).
drawImage
(
image
,
0
,
0
);
return
c
;
}
function
loadTexture
(
path
)
{
var
image
=
new
Image
();
...
...
@@ -218,7 +224,7 @@
function
getY
(
x
,
z
)
{
return
~~
(
data
[
x
+
z
*
worldWidth
]
*
0.2
)
*
100
;
return
~~
(
data
[
x
+
z
*
worldWidth
]
*
0.2
);
}
...
...
examples/lights_pointlights.html
浏览文件 @
8e53294e
...
...
@@ -46,7 +46,7 @@
var
camera
,
scene
,
renderer
,
particle1
,
particle2
,
particle2
,
light1
,
light2
,
light3
,
object
;
mesh
;
init
();
setInterval
(
loop
,
1000
/
60
);
...
...
@@ -60,9 +60,16 @@
scene
=
new
THREE
.
Scene
();
object
=
new
THREE
.
Mesh
(
new
WaltHead
(),
new
THREE
.
MeshLambertMaterial
(
{
color
:
0xffffff
,
shading
:
THREE
.
FlatShading
}
)
);
object
.
overdraw
=
true
;
scene
.
addObject
(
object
);
scene
.
addLight
(
new
THREE
.
AmbientLight
(
0x00020
)
);
light1
=
new
THREE
.
PointLight
(
0xff0040
);
scene
.
addLight
(
light1
);
light2
=
new
THREE
.
PointLight
(
0x0040ff
);
scene
.
addLight
(
light2
);
light3
=
new
THREE
.
PointLight
(
0x80ff80
);
scene
.
addLight
(
light3
);
particle1
=
new
THREE
.
Particle
(
new
THREE
.
ParticleCircleMaterial
(
{
color
:
0xff0040
}
)
);
particle1
.
scale
.
x
=
particle1
.
scale
.
y
=
particle1
.
scale
.
z
=
0.5
;
...
...
@@ -76,16 +83,9 @@
particle3
.
scale
.
x
=
particle3
.
scale
.
y
=
particle3
.
scale
.
z
=
0.5
;
scene
.
addObject
(
particle3
);
scene
.
addLight
(
new
THREE
.
AmbientLight
(
0x00020
)
);
light1
=
new
THREE
.
PointLight
(
0xff0040
);
scene
.
addLight
(
light1
);
light2
=
new
THREE
.
PointLight
(
0x0040ff
);
scene
.
addLight
(
light2
);
light3
=
new
THREE
.
PointLight
(
0x80ff80
);
scene
.
addLight
(
light3
);
mesh
=
new
THREE
.
Mesh
(
new
WaltHead
(),
new
THREE
.
MeshLambertMaterial
(
{
color
:
0xffffff
,
shading
:
THREE
.
FlatShading
}
)
);
mesh
.
overdraw
=
true
;
scene
.
addObject
(
mesh
);
renderer
=
new
THREE
.
CanvasRenderer
();
renderer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
...
...
@@ -97,7 +97,7 @@
var
time
=
new
Date
().
getTime
()
*
0.0005
;
object
.
rotation
.
y
-=
0.01
;
mesh
.
rotation
.
y
-=
0.01
;
particle1
.
position
.
x
=
Math
.
sin
(
time
*
0.7
)
*
30
;
particle1
.
position
.
y
=
Math
.
cos
(
time
*
0.5
)
*
40
;
...
...
examples/lights_pointlights_smooth.html
0 → 100644
浏览文件 @
8e53294e
<!DOCTYPE HTML>
<html
lang=
"en"
>
<head>
<title>
three.js - point light
</title>
<meta
charset=
"utf-8"
>
<style
type=
"text/css"
>
body
{
background-color
:
#000000
;
margin
:
0px
;
overflow
:
hidden
;
}
#info
{
position
:
absolute
;
top
:
0px
;
width
:
100%
;
color
:
#ffffff
;
padding
:
5px
;
font-family
:
Monospace
;
font-size
:
13px
;
text-align
:
center
;
}
a
{
color
:
#ff0080
;
text-decoration
:
none
;
}
a
:hover
{
color
:
#0080ff
;
}
</style>
</head>
<body>
<div
id=
"container"
></div>
<div
id=
"info"
>
<a
href=
"http://github.com/mrdoob/three.js"
target=
"_blank"
>
three.js
</a>
- point lights demo.
<br
/>
Walt Disney head by
<a
href=
"http://www.davidoreilly.com/2009/01/walt-disneys-head-on-a-plate"
target=
"_blank"
>
David OReilly
</a>
</div>
<script
type=
"text/javascript"
src=
"../build/Three.js"
></script>
<script
type=
"text/javascript"
src=
"obj/WaltHead.js"
></script>
<script
type=
"text/javascript"
>
var
camera
,
scene
,
renderer
,
particle1
,
particle2
,
particle2
,
light1
,
light2
,
light3
,
geometry
,
mesh
;
init
();
setInterval
(
loop
,
1000
/
60
);
function
init
()
{
var
container
=
document
.
getElementById
(
'
container
'
);
camera
=
new
THREE
.
Camera
(
65
,
window
.
innerWidth
/
window
.
innerHeight
,
1
,
1000
);
camera
.
position
.
z
=
100
;
scene
=
new
THREE
.
Scene
();
scene
.
addLight
(
new
THREE
.
AmbientLight
(
0x00020
)
);
light1
=
new
THREE
.
PointLight
(
0xff0040
);
scene
.
addLight
(
light1
);
light2
=
new
THREE
.
PointLight
(
0x0040ff
);
scene
.
addLight
(
light2
);
light3
=
new
THREE
.
PointLight
(
0x80ff80
);
scene
.
addLight
(
light3
);
particle1
=
new
THREE
.
Particle
(
new
THREE
.
ParticleCircleMaterial
(
{
color
:
0xff0040
}
)
);
particle1
.
scale
.
x
=
particle1
.
scale
.
y
=
particle1
.
scale
.
z
=
0.5
;
scene
.
addObject
(
particle1
);
particle2
=
new
THREE
.
Particle
(
new
THREE
.
ParticleCircleMaterial
(
{
color
:
0x0040ff
}
)
);
particle2
.
scale
.
x
=
particle2
.
scale
.
y
=
particle2
.
scale
.
z
=
0.5
;
scene
.
addObject
(
particle2
);
particle3
=
new
THREE
.
Particle
(
new
THREE
.
ParticleCircleMaterial
(
{
color
:
0x80ff80
}
)
);
particle3
.
scale
.
x
=
particle3
.
scale
.
y
=
particle3
.
scale
.
z
=
0.5
;
scene
.
addObject
(
particle3
);
geometry
=
new
WaltHead
();
geometry
.
computeVertexNormals
();
mesh
=
new
THREE
.
Mesh
(
geometry
,
new
THREE
.
MeshLambertMaterial
(
{
color
:
0xffffff
,
shading
:
THREE
.
SmoothShading
}
)
);
mesh
.
overdraw
=
true
;
scene
.
addObject
(
mesh
);
renderer
=
new
THREE
.
CanvasRenderer
();
renderer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
container
.
appendChild
(
renderer
.
domElement
);
}
function
loop
()
{
var
time
=
new
Date
().
getTime
()
*
0.0005
;
mesh
.
rotation
.
y
-=
0.01
;
particle1
.
position
.
x
=
Math
.
sin
(
time
*
0.7
)
*
30
;
particle1
.
position
.
y
=
Math
.
cos
(
time
*
0.5
)
*
40
;
particle1
.
position
.
z
=
Math
.
cos
(
time
*
0.3
)
*
30
;
light1
.
position
.
x
=
particle1
.
position
.
x
;
light1
.
position
.
y
=
particle1
.
position
.
y
;
light1
.
position
.
z
=
particle1
.
position
.
z
;
particle2
.
position
.
x
=
Math
.
cos
(
time
*
0.3
)
*
30
;
particle2
.
position
.
y
=
Math
.
sin
(
time
*
0.5
)
*
40
;
particle2
.
position
.
z
=
Math
.
sin
(
time
*
0.7
)
*
30
;
light2
.
position
.
x
=
particle2
.
position
.
x
;
light2
.
position
.
y
=
particle2
.
position
.
y
;
light2
.
position
.
z
=
particle2
.
position
.
z
;
particle3
.
position
.
x
=
Math
.
sin
(
time
*
0.7
)
*
30
;
particle3
.
position
.
y
=
Math
.
cos
(
time
*
0.3
)
*
40
;
particle3
.
position
.
z
=
Math
.
sin
(
time
*
0.5
)
*
30
;
light3
.
position
.
x
=
particle3
.
position
.
x
;
light3
.
position
.
y
=
particle3
.
position
.
y
;
light3
.
position
.
z
=
particle3
.
position
.
z
;
renderer
.
render
(
scene
,
camera
);
}
</script>
</body>
</html>
examples/uqbiquity_test.html
浏览文件 @
8e53294e
...
...
@@ -67,6 +67,7 @@
<script
type=
"text/javascript"
src=
"../src/renderers/CanvasRenderer.js"
></script>
<script
type=
"text/javascript"
src=
"../src/renderers/SVGRenderer.js"
></script>
<script
type=
"text/javascript"
src=
"../src/renderers/WebGLRenderer.js"
></script>
<script
type=
"text/javascript"
src=
"../src/renderers/WebGLRenderer2.js"
></script>
<script
type=
"text/javascript"
src=
"../src/renderers/renderables/RenderableFace3.js"
></script>
<script
type=
"text/javascript"
src=
"../src/renderers/renderables/RenderableParticle.js"
></script>
<script
type=
"text/javascript"
src=
"../src/renderers/renderables/RenderableLine.js"
></script>
...
...
examples/webglrenderer2_sandbox.html
0 → 100644
浏览文件 @
8e53294e
<!DOCTYPE HTML>
<html
lang=
"en"
>
<head>
<title>
three.js - webgl
</title>
<meta
charset=
"utf-8"
>
<style
type=
"text/css"
>
body
{
background
:
#fff
;
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
;
}
#log
{
position
:
absolute
;
top
:
50px
;
text-align
:
left
;
display
:
block
;
z-index
:
100
}
</style>
</head>
<body>
<pre
id=
"log"
></pre>
<div
id=
"info"
><a
href=
"http://github.com/mrdoob/three.js"
target=
"_blank"
>
three.js
</a>
- webgl cube Fresnel shader demo.
</div>
<!--
<script type="text/javascript" src="../build/Three.js"></script>
-->
<script
type=
"text/javascript"
src=
"../src/Three.js"
></script>
<script
type=
"text/javascript"
src=
"../src/core/Color.js"
></script>
<script
type=
"text/javascript"
src=
"../src/core/Vector2.js"
></script>
<script
type=
"text/javascript"
src=
"../src/core/Vector3.js"
></script>
<script
type=
"text/javascript"
src=
"../src/core/Vector4.js"
></script>
<script
type=
"text/javascript"
src=
"../src/core/Ray.js"
></script>
<script
type=
"text/javascript"
src=
"../src/core/Rectangle.js"
></script>
<script
type=
"text/javascript"
src=
"../src/core/Matrix3.js"
></script>
<script
type=
"text/javascript"
src=
"../src/core/Matrix4.js"
></script>
<script
type=
"text/javascript"
src=
"../src/core/Vertex.js"
></script>
<script
type=
"text/javascript"
src=
"../src/core/Face3.js"
></script>
<script
type=
"text/javascript"
src=
"../src/core/Face4.js"
></script>
<script
type=
"text/javascript"
src=
"../src/core/UV.js"
></script>
<script
type=
"text/javascript"
src=
"../src/core/Geometry.js"
></script>
<script
type=
"text/javascript"
src=
"../src/cameras/Camera.js"
></script>
<script
type=
"text/javascript"
src=
"../src/lights/Light.js"
></script>
<script
type=
"text/javascript"
src=
"../src/lights/AmbientLight.js"
></script>
<script
type=
"text/javascript"
src=
"../src/lights/DirectionalLight.js"
></script>
<script
type=
"text/javascript"
src=
"../src/lights/PointLight.js"
></script>
<script
type=
"text/javascript"
src=
"../src/objects/Object3D.js"
></script>
<script
type=
"text/javascript"
src=
"../src/objects/Particle.js"
></script>
<script
type=
"text/javascript"
src=
"../src/objects/Line.js"
></script>
<script
type=
"text/javascript"
src=
"../src/objects/Mesh.js"
></script>
<script
type=
"text/javascript"
src=
"../src/materials/Material.js"
></script>
<script
type=
"text/javascript"
src=
"../src/materials/LineBasicMaterial.js"
></script>
<script
type=
"text/javascript"
src=
"../src/materials/MeshBasicMaterial.js"
></script>
<script
type=
"text/javascript"
src=
"../src/materials/MeshLambertMaterial.js"
></script>
<script
type=
"text/javascript"
src=
"../src/materials/MeshPhongMaterial.js"
></script>
<script
type=
"text/javascript"
src=
"../src/materials/MeshDepthMaterial.js"
></script>
<script
type=
"text/javascript"
src=
"../src/materials/MeshNormalMaterial.js"
></script>
<script
type=
"text/javascript"
src=
"../src/materials/MeshFaceMaterial.js"
></script>
<script
type=
"text/javascript"
src=
"../src/materials/MeshCubeMaterial.js"
></script>
<script
type=
"text/javascript"
src=
"../src/materials/MeshShaderMaterial.js"
></script>
<script
type=
"text/javascript"
src=
"../src/materials/ParticleBasicMaterial.js"
></script>
<script
type=
"text/javascript"
src=
"../src/materials/ParticleCircleMaterial.js"
></script>
<script
type=
"text/javascript"
src=
"../src/materials/ParticleDOMMaterial.js"
></script>
<script
type=
"text/javascript"
src=
"../src/materials/Texture.js"
></script>
<script
type=
"text/javascript"
src=
"../src/materials/mappings/CubeReflectionMapping.js"
></script>
<script
type=
"text/javascript"
src=
"../src/materials/mappings/CubeRefractionMapping.js"
></script>
<script
type=
"text/javascript"
src=
"../src/materials/mappings/LatitudeReflectionMapping.js"
></script>
<script
type=
"text/javascript"
src=
"../src/materials/mappings/LatitudeRefractionMapping.js"
></script>
<script
type=
"text/javascript"
src=
"../src/materials/mappings/SphericalReflectionMapping.js"
></script>
<script
type=
"text/javascript"
src=
"../src/materials/mappings/SphericalRefractionMapping.js"
></script>
<script
type=
"text/javascript"
src=
"../src/materials/mappings/UVMapping.js"
></script>
<script
type=
"text/javascript"
src=
"../src/scenes/Scene.js"
></script>
<script
type=
"text/javascript"
src=
"../src/renderers/Projector.js"
></script>
<script
type=
"text/javascript"
src=
"../src/renderers/DOMRenderer.js"
></script>
<script
type=
"text/javascript"
src=
"../src/renderers/CanvasRenderer.js"
></script>
<script
type=
"text/javascript"
src=
"../src/renderers/SVGRenderer.js"
></script>
<script
type=
"text/javascript"
src=
"../src/renderers/WebGLRenderer.js"
></script>
<script
type=
"text/javascript"
src=
"../src/renderers/WebGLRenderer2.js"
></script>
<script
type=
"text/javascript"
src=
"../src/renderers/renderables/RenderableFace3.js"
></script>
<script
type=
"text/javascript"
src=
"../src/renderers/renderables/RenderableParticle.js"
></script>
<script
type=
"text/javascript"
src=
"../src/renderers/renderables/RenderableLine.js"
></script>
<script
type=
"text/javascript"
src=
"../src/extras/primitives/Sphere.js"
></script>
<script
type=
"text/javascript"
src=
"../src/extras/ShaderUtils.js"
></script>
<script
type=
"text/javascript"
src=
"js/Stats.js"
></script>
<script
type=
"text/javascript"
>
var
statsEnabled
=
true
;
var
container
,
stats
;
var
camera
,
scene
,
webglRenderer
;
var
mesh
,
zmesh
,
lightMesh
,
geometry
;
var
mouseX
=
0
,
mouseY
=
0
;
var
windowHalfX
=
window
.
innerWidth
/
2
;
var
windowHalfY
=
window
.
innerHeight
/
2
;
document
.
addEventListener
(
'
mousemove
'
,
onDocumentMouseMove
,
false
);
init
();
// loop();
setInterval
(
loop
,
1000
/
60
);
function
init
()
{
container
=
document
.
createElement
(
'
div
'
);
document
.
body
.
appendChild
(
container
);
camera
=
new
THREE
.
Camera
(
60
,
window
.
innerWidth
/
window
.
innerHeight
,
1
,
100000
);
camera
.
position
.
z
=
3200
;
scene
=
new
THREE
.
Scene
();
var
geometry
=
new
Sphere
(
100
,
32
,
16
);
var
uniforms
=
ShaderUtils
.
lib
[
'
basic
'
].
uniforms
;
var
vertex_shader
=
ShaderUtils
.
lib
[
'
basic
'
].
vertex_shader
;
var
fragment_shader
=
ShaderUtils
.
lib
[
'
basic
'
].
fragment_shader
;
var
generatedTexture
=
new
THREE
.
Texture
(
generateTexture
()
);
var
materials
=
[
new
THREE
.
MeshLambertMaterial
(
{
color
:
0xdddddd
,
shading
:
THREE
.
FlatShading
}
),
new
THREE
.
MeshPhongMaterial
(
{
ambient
:
0x030303
,
color
:
0xdddddd
,
specular
:
0x009900
,
shininess
:
30
,
shading
:
THREE
.
FlatShading
}
),
new
THREE
.
MeshNormalMaterial
(),
new
THREE
.
MeshBasicMaterial
(
{
color
:
0x665500
,
blending
:
THREE
.
AdditiveBlending
}
),
new
THREE
.
MeshLambertMaterial
(
{
color
:
0xdddddd
,
shading
:
THREE
.
SmoothShading
}
),
new
THREE
.
MeshPhongMaterial
(
{
ambient
:
0x030303
,
color
:
0xdddddd
,
specular
:
0x009900
,
shininess
:
30
,
shading
:
THREE
.
SmoothShading
}
),
new
THREE
.
MeshNormalMaterial
(
{
shading
:
THREE
.
SmoothShading
}
),
new
THREE
.
MeshBasicMaterial
(
{
color
:
0xffaa00
,
wireframe
:
true
}
),
new
THREE
.
MeshDepthMaterial
(
{
near
:
1
,
far
:
2000
}
),
new
THREE
.
MeshBasicMaterial
(
{
map
:
generatedTexture
}
),
new
THREE
.
MeshLambertMaterial
(
{
map
:
generatedTexture
}
),
new
THREE
.
MeshShaderMaterial
(
{
uniforms
:
uniforms
,
vertex_shader
:
vertex_shader
,
fragment_shader
:
fragment_shader
}
)
];
for
(
var
i
=
0
;
i
<
1000
;
i
++
)
{
var
mesh
=
new
THREE
.
Mesh
(
geometry
,
materials
[
Math
.
floor
(
Math
.
random
()
*
materials
.
length
)
]
);
mesh
.
position
.
x
=
Math
.
random
()
*
10000
-
5000
;
mesh
.
position
.
y
=
Math
.
random
()
*
10000
-
5000
;
mesh
.
position
.
z
=
Math
.
random
()
*
10000
-
5000
;
mesh
.
scale
.
x
=
mesh
.
scale
.
y
=
mesh
.
scale
.
z
=
Math
.
random
()
*
4
+
1
;
scene
.
addObject
(
mesh
);
}
webglRenderer
=
new
THREE
.
WebGLRenderer2
();
webglRenderer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
container
.
appendChild
(
webglRenderer
.
domElement
);
if
(
statsEnabled
)
{
stats
=
new
Stats
();
stats
.
domElement
.
style
.
position
=
'
absolute
'
;
stats
.
domElement
.
style
.
top
=
'
0px
'
;
stats
.
domElement
.
style
.
zIndex
=
100
;
container
.
appendChild
(
stats
.
domElement
);
}
}
function
generateTexture
()
{
var
canvas
=
document
.
createElement
(
'
canvas
'
);
canvas
.
loaded
=
true
;
canvas
.
width
=
256
;
canvas
.
height
=
256
;
var
context
=
canvas
.
getContext
(
'
2d
'
);
var
image
=
context
.
getImageData
(
0
,
0
,
256
,
256
);
var
x
=
0
,
y
=
0
;
for
(
var
i
=
0
,
j
=
0
,
l
=
image
.
data
.
length
;
i
<
l
;
i
+=
4
,
j
++
)
{
x
=
j
%
256
;
y
=
x
==
0
?
y
+
1
:
y
;
image
.
data
[
i
+
2
]
=
Math
.
floor
(
x
^
y
);
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
loop
()
{
camera
.
position
.
x
+=
(
mouseX
-
camera
.
position
.
x
)
*
.
05
;
camera
.
position
.
y
+=
(
-
mouseY
-
camera
.
position
.
y
)
*
.
05
;
webglRenderer
.
render
(
scene
,
camera
);
if
(
statsEnabled
)
stats
.
update
();
}
function
log
(
text
)
{
var
e
=
document
.
getElementById
(
"
log
"
);
e
.
innerHTML
=
text
+
"
<br/>
"
+
e
.
innerHTML
;
}
</script>
</body>
</html>
src/extras/ShaderUtils.js
浏览文件 @
8e53294e
var
ShaderUtils
=
{
lib
:
{
'
fresnel
'
:
{
uniforms
:
{
uniforms
:
{
"
mRefractionRatio
"
:
{
type
:
"
f
"
,
value
:
1.02
},
"
mFresnelBias
"
:
{
type
:
"
f
"
,
value
:
0.1
},
"
mFresnelPower
"
:
{
type
:
"
f
"
,
value
:
2.0
},
"
mFresnelScale
"
:
{
type
:
"
f
"
,
value
:
1.0
},
"
tCube
"
:
{
type
:
"
t
"
,
value
:
1
,
texture
:
null
}
"
mFresnelBias
"
:
{
type
:
"
f
"
,
value
:
0.1
},
"
mFresnelPower
"
:
{
type
:
"
f
"
,
value
:
2.0
},
"
mFresnelScale
"
:
{
type
:
"
f
"
,
value
:
1.0
},
"
tCube
"
:
{
type
:
"
t
"
,
value
:
1
,
texture
:
null
}
},
fragment_shader
:
[
"
uniform samplerCube tCube;
"
,
"
varying vec3 vReflect;
"
,
"
varying vec3 vRefract[3];
"
,
"
varying float vReflectionFactor;
"
,
"
void main() {
"
,
"
vec4 reflectedColor = textureCube( tCube, vec3( -vReflect.x, vReflect.yz ) );
"
,
"
vec4 refractedColor = vec4( 1.0, 1.0, 1.0, 1.0 );
"
,
"
refractedColor.r = textureCube( tCube, vec3( -vRefract[0].x, vRefract[0].yz ) ).r;
"
,
"
refractedColor.g = textureCube( tCube, vec3( -vRefract[1].x, vRefract[1].yz ) ).g;
"
,
"
refractedColor.b = textureCube( tCube, vec3( -vRefract[2].x, vRefract[2].yz ) ).b;
"
,
"
refractedColor.a = 1.0;
"
,
"
gl_FragColor = mix( refractedColor, reflectedColor, clamp( vReflectionFactor, 0.0, 1.0 ) );
"
,
"
}
"
"
}
"
].
join
(
"
\n
"
),
vertex_shader
:
[
"
uniform float mRefractionRatio;
"
,
"
uniform float mFresnelBias;
"
,
"
uniform float mFresnelScale;
"
,
...
...
@@ -47,217 +48,332 @@ var ShaderUtils = {
"
void main(void) {
"
,
"
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
"
,
"
vec4 mPosition = objectMatrix * vec4( position, 1.0 );
"
,
"
vec3 nWorld = normalize ( mat3( objectMatrix[0].xyz, objectMatrix[1].xyz, objectMatrix[2].xyz ) * normal );
"
,
"
vec3 I = mPosition.xyz - cameraPosition;
"
,
"
vReflect = reflect( I, nWorld );
"
,
"
vRefract[0] = refract( normalize( I ), nWorld, mRefractionRatio );
"
,
"
vRefract[1] = refract( normalize( I ), nWorld, mRefractionRatio * 0.99 );
"
,
"
vRefract[2] = refract( normalize( I ), nWorld, mRefractionRatio * 0.98 );
"
,
"
vReflectionFactor = mFresnelBias + mFresnelScale * pow( 1.0 + dot( normalize( I ), nWorld ), mFresnelPower );
"
,
"
gl_Position = projectionMatrix * mvPosition;
"
,
"
}
"
"
}
"
].
join
(
"
\n
"
)
},
'
normal
'
:
{
uniforms
:
{
"
tNormal
"
:
{
type
:
"
t
"
,
value
:
2
,
texture
:
null
},
"
tAO
"
:
{
type
:
"
t
"
,
value
:
3
,
texture
:
null
},
"
tDisplacement
"
:
{
type
:
"
t
"
,
value
:
4
,
texture
:
null
},
"
uDisplacementBias
"
:
{
type
:
"
f
"
,
value
:
-
0.5
},
"
uDisplacementScale
"
:{
type
:
"
f
"
,
value
:
2.5
},
"
uPointLightPos
"
:
{
type
:
"
v3
"
,
value
:
new
THREE
.
Vector3
()
},
"
uPointLightColor
"
:
{
type
:
"
c
"
,
value
:
new
THREE
.
Color
(
0xeeeeee
)
},
"
uDirLightPos
"
:
{
type
:
"
v3
"
,
value
:
new
THREE
.
Vector3
()
},
"
uDirLightColor
"
:
{
type
:
"
c
"
,
value
:
new
THREE
.
Color
(
0xeeeeee
)
},
"
uAmbientLightColor
"
:{
type
:
"
c
"
,
value
:
new
THREE
.
Color
(
0x050505
)
},
"
uDiffuseColor
"
:
{
type
:
"
c
"
,
value
:
new
THREE
.
Color
(
0xeeeeee
)
},
"
uSpecularColor
"
:
{
type
:
"
c
"
,
value
:
new
THREE
.
Color
(
0x111111
)
},
"
uAmbientColor
"
:
{
type
:
"
c
"
,
value
:
new
THREE
.
Color
(
0x050505
)
},
"
uShininess
"
:
{
type
:
"
f
"
,
value
:
30
}
},
fragment_shader
:
[
"
uniform vec3 uDirLightPos;
"
,
"
uniform vec3 uDirLightColor;
"
,
"
uniform vec3 uPointLightPos;
"
,
"
uniform vec3 uPointLightColor;
"
,
"
uniform vec3 uAmbientColor;
"
,
"
uniform vec3 uDiffuseColor;
"
,
"
uniform vec3 uSpecularColor;
"
,
"
uniform float uShininess;
"
,
"
uniform sampler2D tNormal;
"
,
"
uniform sampler2D tAO;
"
,
"
varying vec3 vTangent;
"
,
"
varying vec3 vBinormal;
"
,
"
varying vec3 vNormal;
"
,
"
varying vec2 vUv;
"
,
"
varying vec3 vLightWeighting;
"
,
"
varying vec3 vPointLightVector;
"
,
"
varying vec3 vViewPosition;
"
,
"
void main() {
"
,
"
vec3 normalTex = normalize( texture2D( tNormal, vUv ).xyz * 2.0 - 1.0 );
"
,
"
vec3 aoTex = texture2D( tAO, vUv ).xyz;
"
,
"
mat3 tsb = mat3( vTangent, vBinormal, vNormal );
"
,
"
vec3 finalNormal = tsb * normalTex;
"
,
"
vec3 normal = normalize( finalNormal );
"
,
"
vec3 viewPosition = normalize( vViewPosition );
"
,
// point light
"
vec4 pointDiffuse = vec4( 0.0, 0.0, 0.0, 0.0 );
"
,
"
vec4 pointSpecular = vec4( 0.0, 0.0, 0.0, 0.0 );
"
,
"
vec3 pointVector = normalize( vPointLightVector );
"
,
"
vec3 pointHalfVector = normalize( vPointLightVector + vViewPosition );
"
,
"
float pointDotNormalHalf = dot( normal, pointHalfVector );
"
,
"
float pointDiffuseWeight = max( dot( normal, pointVector ), 0.0 );
"
,
"
float pointSpecularWeight = 0.0;
"
,
"
if ( pointDotNormalHalf >= 0.0 )
"
,
"
pointSpecularWeight = pow( pointDotNormalHalf, uShininess );
"
,
"
pointDiffuse += vec4( uDiffuseColor, 1.0 ) * pointDiffuseWeight;
"
,
"
pointSpecular += vec4( uSpecularColor, 1.0 ) * pointSpecularWeight;
"
,
// directional light
"
vec4 dirDiffuse = vec4( 0.0, 0.0, 0.0, 0.0 );
"
,
"
vec4 dirSpecular = vec4( 0.0, 0.0, 0.0, 0.0 );
"
,
"
vec4 lDirection = viewMatrix * vec4( uDirLightPos, 0.0 );
"
,
"
vec3 dirVector = normalize( lDirection.xyz );
"
,
"
vec3 dirHalfVector = normalize( lDirection.xyz + vViewPosition );
"
,
"
float dirDotNormalHalf = dot( normal, dirHalfVector );
"
,
"
float dirDiffuseWeight = max( dot( normal, dirVector ), 0.0 );
"
,
"
float dirSpecularWeight = 0.0;
"
,
"
if ( dirDotNormalHalf >= 0.0 )
"
,
"
dirSpecularWeight = pow( dirDotNormalHalf, uShininess );
"
,
"
dirDiffuse += vec4( uDiffuseColor, 1.0 ) * dirDiffuseWeight;
"
,
"
dirSpecular += vec4( uSpecularColor, 1.0 ) * dirSpecularWeight;
"
,
// all lights contribution summation
"
vec4 totalLight = vec4( uAmbientColor, 1.0 );
"
,
"
totalLight += dirDiffuse + dirSpecular;
"
,
"
totalLight += pointDiffuse + pointSpecular;
"
,
"
gl_FragColor = vec4( totalLight.xyz * vLightWeighting * aoTex, 1.0 );
"
,
"
}
"
].
join
(
"
\n
"
),
vertex_shader
:
[
"
attribute vec4 tangent;
"
,
"
uniform vec3 uDirLightPos;
"
,
"
uniform vec3 uDirLightColor;
"
,
"
uniform vec3 uPointLightPos;
"
,
"
uniform vec3 uPointLightColor;
"
,
"
uniform vec3 uAmbientLightColor;
"
,
"
#ifdef VERTEX_TEXTURES
"
,
"
uniform sampler2D tDisplacement;
"
,
"
uniform float uDisplacementScale;
"
,
"
uniform float uDisplacementBias;
"
,
"
#endif
"
,
"
varying vec3 vTangent;
"
,
"
varying vec3 vBinormal;
"
,
"
varying vec3 vNormal;
"
,
"
varying vec2 vUv;
"
,
"
varying vec3 vLightWeighting;
"
,
"
varying vec3 vPointLightVector;
"
,
"
varying vec3 vViewPosition;
"
,
"
void main() {
"
,
"
vec4 mPosition = objectMatrix * vec4( position, 1.0 );
"
,
"
vViewPosition = cameraPosition - mPosition.xyz;
"
,
"
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
"
,
"
vNormal = normalize( normalMatrix * normal );
"
,
// tangent and binormal vectors
"
vTangent = normalize( normalMatrix * tangent.xyz );
"
,
"
vBinormal = cross( vNormal, vTangent ) * tangent.w;
"
,
"
vBinormal = normalize( vBinormal );
"
,
"
vUv = uv;
"
,
// ambient light
"
vLightWeighting = uAmbientLightColor;
"
,
// point light
"
vec4 lPosition = viewMatrix * vec4( uPointLightPos, 1.0 );
"
,
"
vPointLightVector = normalize( lPosition.xyz - mvPosition.xyz );
"
,
"
float pointLightWeighting = max( dot( vNormal, vPointLightVector ), 0.0 );
"
,
"
vLightWeighting += uPointLightColor * pointLightWeighting;
"
,
// directional light
"
vec4 lDirection = viewMatrix * vec4( uDirLightPos, 0.0 );
"
,
"
float directionalLightWeighting = max( dot( vNormal, normalize( lDirection.xyz ) ), 0.0 );
"
,
"
vLightWeighting += uDirLightColor * directionalLightWeighting;
"
,
// displacement mapping
uniforms
:
{
"
tNormal
"
:
{
type
:
"
t
"
,
value
:
2
,
texture
:
null
},
"
tAO
"
:
{
type
:
"
t
"
,
value
:
3
,
texture
:
null
},
"
tDisplacement
"
:
{
type
:
"
t
"
,
value
:
4
,
texture
:
null
},
"
uDisplacementBias
"
:
{
type
:
"
f
"
,
value
:
-
0.5
},
"
uDisplacementScale
"
:
{
type
:
"
f
"
,
value
:
2.5
},
"
uPointLightPos
"
:
{
type
:
"
v3
"
,
value
:
new
THREE
.
Vector3
()
},
"
uPointLightColor
"
:
{
type
:
"
c
"
,
value
:
new
THREE
.
Color
(
0xeeeeee
)
},
"
uDirLightPos
"
:
{
type
:
"
v3
"
,
value
:
new
THREE
.
Vector3
()
},
"
uDirLightColor
"
:
{
type
:
"
c
"
,
value
:
new
THREE
.
Color
(
0xeeeeee
)
},
"
uAmbientLightColor
"
:
{
type
:
"
c
"
,
value
:
new
THREE
.
Color
(
0x050505
)
},
"
uDiffuseColor
"
:
{
type
:
"
c
"
,
value
:
new
THREE
.
Color
(
0xeeeeee
)
},
"
uSpecularColor
"
:
{
type
:
"
c
"
,
value
:
new
THREE
.
Color
(
0x111111
)
},
"
uAmbientColor
"
:
{
type
:
"
c
"
,
value
:
new
THREE
.
Color
(
0x050505
)
},
"
uShininess
"
:
{
type
:
"
f
"
,
value
:
30
}
},
fragment_shader
:
[
"
uniform vec3 uDirLightPos;
"
,
"
uniform vec3 uDirLightColor;
"
,
"
uniform vec3 uPointLightPos;
"
,
"
uniform vec3 uPointLightColor;
"
,
"
uniform vec3 uAmbientColor;
"
,
"
uniform vec3 uDiffuseColor;
"
,
"
uniform vec3 uSpecularColor;
"
,
"
uniform float uShininess;
"
,
"
uniform sampler2D tNormal;
"
,
"
uniform sampler2D tAO;
"
,
"
varying vec3 vTangent;
"
,
"
varying vec3 vBinormal;
"
,
"
varying vec3 vNormal;
"
,
"
varying vec2 vUv;
"
,
"
varying vec3 vLightWeighting;
"
,
"
varying vec3 vPointLightVector;
"
,
"
varying vec3 vViewPosition;
"
,
"
void main() {
"
,
"
vec3 normalTex = normalize( texture2D( tNormal, vUv ).xyz * 2.0 - 1.0 );
"
,
"
vec3 aoTex = texture2D( tAO, vUv ).xyz;
"
,
"
mat3 tsb = mat3( vTangent, vBinormal, vNormal );
"
,
"
vec3 finalNormal = tsb * normalTex;
"
,
"
vec3 normal = normalize( finalNormal );
"
,
"
vec3 viewPosition = normalize( vViewPosition );
"
,
// point light
"
vec4 pointDiffuse = vec4( 0.0, 0.0, 0.0, 0.0 );
"
,
"
vec4 pointSpecular = vec4( 0.0, 0.0, 0.0, 0.0 );
"
,
"
vec3 pointVector = normalize( vPointLightVector );
"
,
"
vec3 pointHalfVector = normalize( vPointLightVector + vViewPosition );
"
,
"
float pointDotNormalHalf = dot( normal, pointHalfVector );
"
,
"
float pointDiffuseWeight = max( dot( normal, pointVector ), 0.0 );
"
,
"
float pointSpecularWeight = 0.0;
"
,
"
if ( pointDotNormalHalf >= 0.0 )
"
,
"
pointSpecularWeight = pow( pointDotNormalHalf, uShininess );
"
,
"
pointDiffuse += vec4( uDiffuseColor, 1.0 ) * pointDiffuseWeight;
"
,
"
pointSpecular += vec4( uSpecularColor, 1.0 ) * pointSpecularWeight;
"
,
// directional light
"
vec4 dirDiffuse = vec4( 0.0, 0.0, 0.0, 0.0 );
"
,
"
vec4 dirSpecular = vec4( 0.0, 0.0, 0.0, 0.0 );
"
,
"
vec4 lDirection = viewMatrix * vec4( uDirLightPos, 0.0 );
"
,
"
vec3 dirVector = normalize( lDirection.xyz );
"
,
"
vec3 dirHalfVector = normalize( lDirection.xyz + vViewPosition );
"
,
"
float dirDotNormalHalf = dot( normal, dirHalfVector );
"
,
"
float dirDiffuseWeight = max( dot( normal, dirVector ), 0.0 );
"
,
"
float dirSpecularWeight = 0.0;
"
,
"
if ( dirDotNormalHalf >= 0.0 )
"
,
"
dirSpecularWeight = pow( dirDotNormalHalf, uShininess );
"
,
"
dirDiffuse += vec4( uDiffuseColor, 1.0 ) * dirDiffuseWeight;
"
,
"
dirSpecular += vec4( uSpecularColor, 1.0 ) * dirSpecularWeight;
"
,
// all lights contribution summation
"
vec4 totalLight = vec4( uAmbientColor, 1.0 );
"
,
"
totalLight += dirDiffuse + dirSpecular;
"
,
"
totalLight += pointDiffuse + pointSpecular;
"
,
"
gl_FragColor = vec4( totalLight.xyz * vLightWeighting * aoTex, 1.0 );
"
,
"
}
"
].
join
(
"
\n
"
),
vertex_shader
:
[
"
attribute vec4 tangent;
"
,
"
uniform vec3 uDirLightPos;
"
,
"
uniform vec3 uDirLightColor;
"
,
"
uniform vec3 uPointLightPos;
"
,
"
uniform vec3 uPointLightColor;
"
,
"
uniform vec3 uAmbientLightColor;
"
,
"
#ifdef VERTEX_TEXTURES
"
,
"
vec3 dv = texture2D( tDisplacement, uv ).xyz;
"
,
"
float df = uDisplacementScale * dv.x + uDisplacementBias;
"
,
"
vec4 displacedPosition = vec4( vNormal.xyz * df, 0.0 ) + mvPosition;
"
,
"
gl_Position = projectionMatrix * displacedPosition;
"
,
"
#else
"
,
"
gl_Position = projectionMatrix * mvPosition;
"
,
"
uniform sampler2D tDisplacement;
"
,
"
uniform float uDisplacementScale;
"
,
"
uniform float uDisplacementBias;
"
,
"
#endif
"
,
"
}
"
].
join
(
"
\n
"
)
"
varying vec3 vTangent;
"
,
"
varying vec3 vBinormal;
"
,
"
varying vec3 vNormal;
"
,
"
varying vec2 vUv;
"
,
"
varying vec3 vLightWeighting;
"
,
"
varying vec3 vPointLightVector;
"
,
"
varying vec3 vViewPosition;
"
,
"
void main() {
"
,
"
vec4 mPosition = objectMatrix * vec4( position, 1.0 );
"
,
"
vViewPosition = cameraPosition - mPosition.xyz;
"
,
"
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
"
,
"
vNormal = normalize( normalMatrix * normal );
"
,
// tangent and binormal vectors
"
vTangent = normalize( normalMatrix * tangent.xyz );
"
,
"
vBinormal = cross( vNormal, vTangent ) * tangent.w;
"
,
"
vBinormal = normalize( vBinormal );
"
,
"
vUv = uv;
"
,
// ambient light
"
vLightWeighting = uAmbientLightColor;
"
,
// point light
"
vec4 lPosition = viewMatrix * vec4( uPointLightPos, 1.0 );
"
,
"
vPointLightVector = normalize( lPosition.xyz - mvPosition.xyz );
"
,
"
float pointLightWeighting = max( dot( vNormal, vPointLightVector ), 0.0 );
"
,
"
vLightWeighting += uPointLightColor * pointLightWeighting;
"
,
// directional light
"
vec4 lDirection = viewMatrix * vec4( uDirLightPos, 0.0 );
"
,
"
float directionalLightWeighting = max( dot( vNormal, normalize( lDirection.xyz ) ), 0.0 );
"
,
"
vLightWeighting += uDirLightColor * directionalLightWeighting;
"
,
// displacement mapping
"
#ifdef VERTEX_TEXTURES
"
,
"
vec3 dv = texture2D( tDisplacement, uv ).xyz;
"
,
"
float df = uDisplacementScale * dv.x + uDisplacementBias;
"
,
"
vec4 displacedPosition = vec4( vNormal.xyz * df, 0.0 ) + mvPosition;
"
,
"
gl_Position = projectionMatrix * displacedPosition;
"
,
"
#else
"
,
"
gl_Position = projectionMatrix * mvPosition;
"
,
"
#endif
"
,
"
}
"
].
join
(
"
\n
"
)
},
/*
'hatching' : {
uniforms: {
"uSampler": { type: "t", value: 2, texture: null },
"uDirLightPos": { type: "v3", value: new THREE.Vector3() },
"uDirLightColor": { type: "c", value: new THREE.Color( 0xeeeeee ) },
"uAmbientLightColor": { type: "c", value: new THREE.Color( 0x050505 ) }
},
vertex_shader: [
"varying vec3 vNormal;",
"void main() {",
"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
"vNormal = normalize( normalMatrix * normal );",
"}"
].join("\n"),
fragment_shader: [
"uniform vec3 uDirLightPos;",
"uniform vec3 uDirLightColor;",
"uniform vec3 uAmbientLightColor;",
"uniform sampler2D uSampler;",
"varying vec3 vNormal;",
"void main() {",
"float directionalLightWeighting = max(dot(normalize(vNormal), uDirLightPos), 0.0);",
"vec3 lightWeighting = uAmbientLightColor + uDirLightColor * directionalLightWeighting;",
"gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);",
"if (length(lightWeighting) < 1.00) {",
"if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {",
"gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);",
"}",
"}",
"if (length(lightWeighting) < 0.75) {",
"if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {",
"gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);",
"}",
"}",
"if (length(lightWeighting) < 0.50) {",
"if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {",
"gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);",
"}",
"}",
"if (length(lightWeighting) < 0.3465) {",
"if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {",
"gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);",
"}",
"}",
"}"
].join("\n")
},
*/
'
basic
'
:
{
uniforms
:
{},
vertex_shader
:
[
"
void main() {
"
,
"
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
"
,
"
}
"
].
join
(
"
\n
"
),
fragment_shader
:
[
"
void main() {
"
,
"
gl_FragColor = vec4(1.0, 0.0, 0.0, 0.5);
"
,
"
}
"
].
join
(
"
\n
"
)
}
}
};
src/materials/MeshShaderMaterial.js
浏览文件 @
8e53294e
...
...
@@ -24,7 +24,7 @@ THREE.MeshShaderMaterial = function ( parameters ) {
this
.
opacity
=
1
;
this
.
shading
=
THREE
.
SmoothShading
;
this
.
blending
=
THREE
.
NormalBlending
;
this
.
wireframe
=
false
;
this
.
wireframe_linewidth
=
1
;
this
.
wireframe_linecap
=
'
round
'
;
...
...
src/renderers/Projector.js
浏览文件 @
8e53294e
...
...
@@ -24,7 +24,7 @@ THREE.Projector = function() {
var
o
,
ol
,
v
,
vl
,
f
,
fl
,
n
,
nl
,
objects
,
object
,
objectMatrix
,
objectRotationMatrix
,
objectMaterial
,
objectOverdraw
,
vertices
,
vertex
,
vertexPositionScreen
,
geometry
,
vertices
,
vertex
,
vertexPositionScreen
,
faces
,
face
,
faceVertexNormals
,
normal
,
v1
,
v2
,
v3
,
v4
;
_renderList
=
[];
...
...
@@ -48,9 +48,11 @@ THREE.Projector = function() {
if
(
object
instanceof
THREE
.
Mesh
)
{
geometry
=
object
.
geometry
;
// vertices
vertices
=
object
.
geometry
.
vertices
;
vertices
=
geometry
.
vertices
;
for
(
v
=
0
,
vl
=
vertices
.
length
;
v
<
vl
;
v
++
)
{
...
...
@@ -74,7 +76,7 @@ THREE.Projector = function() {
// faces
faces
=
object
.
geometry
.
faces
;
faces
=
geometry
.
faces
;
for
(
f
=
0
,
fl
=
faces
.
length
;
f
<
fl
;
f
++
)
{
...
...
src/renderers/WebGLRenderer.js
浏览文件 @
8e53294e
...
...
@@ -195,7 +195,7 @@ THREE.WebGLRenderer = function ( scene ) {
vertexArray
.
push
(
v3
.
x
,
v3
.
y
,
v3
.
z
);
if
(
object
.
geometry
.
hasTangents
)
{
t1
=
object
.
geometry
.
vertices
[
face
.
a
].
tangent
;
t2
=
object
.
geometry
.
vertices
[
face
.
b
].
tangent
;
t3
=
object
.
geometry
.
vertices
[
face
.
c
].
tangent
;
...
...
@@ -203,12 +203,12 @@ THREE.WebGLRenderer = function ( scene ) {
tangentArray
.
push
(
t1
.
x
,
t1
.
y
,
t1
.
z
,
t1
.
w
);
tangentArray
.
push
(
t2
.
x
,
t2
.
y
,
t2
.
z
,
t2
.
w
);
tangentArray
.
push
(
t3
.
x
,
t3
.
y
,
t3
.
z
,
t3
.
w
);
}
if
(
vertexNormals
.
length
==
3
&&
needsSmoothNormals
)
{
for
(
i
=
0
;
i
<
3
;
i
++
)
{
normalArray
.
push
(
vertexNormals
[
i
].
x
,
vertexNormals
[
i
].
y
,
vertexNormals
[
i
].
z
);
...
...
@@ -256,9 +256,9 @@ THREE.WebGLRenderer = function ( scene ) {
vertexArray
.
push
(
v2
.
x
,
v2
.
y
,
v2
.
z
);
vertexArray
.
push
(
v3
.
x
,
v3
.
y
,
v3
.
z
);
vertexArray
.
push
(
v4
.
x
,
v4
.
y
,
v4
.
z
);
if
(
object
.
geometry
.
hasTangents
)
{
t1
=
object
.
geometry
.
vertices
[
face
.
a
].
tangent
;
t2
=
object
.
geometry
.
vertices
[
face
.
b
].
tangent
;
t3
=
object
.
geometry
.
vertices
[
face
.
c
].
tangent
;
...
...
@@ -268,17 +268,17 @@ THREE.WebGLRenderer = function ( scene ) {
tangentArray
.
push
(
t2
.
x
,
t2
.
y
,
t2
.
z
,
t2
.
w
);
tangentArray
.
push
(
t3
.
x
,
t3
.
y
,
t3
.
z
,
t3
.
w
);
tangentArray
.
push
(
t4
.
x
,
t4
.
y
,
t4
.
z
,
t4
.
w
);
}
if
(
vertexNormals
.
length
==
4
&&
needsSmoothNormals
)
{
for
(
i
=
0
;
i
<
4
;
i
++
)
{
normalArray
.
push
(
vertexNormals
[
i
].
x
,
vertexNormals
[
i
].
y
,
vertexNormals
[
i
].
z
);
}
}
else
{
for
(
i
=
0
;
i
<
4
;
i
++
)
{
...
...
@@ -331,13 +331,13 @@ THREE.WebGLRenderer = function ( scene ) {
_gl
.
bufferData
(
_gl
.
ARRAY_BUFFER
,
new
Float32Array
(
normalArray
),
_gl
.
STATIC_DRAW
);
if
(
object
.
geometry
.
hasTangents
)
{
geometryChunk
.
__webGLTangentBuffer
=
_gl
.
createBuffer
();
_gl
.
bindBuffer
(
_gl
.
ARRAY_BUFFER
,
geometryChunk
.
__webGLTangentBuffer
);
_gl
.
bufferData
(
_gl
.
ARRAY_BUFFER
,
new
Float32Array
(
tangentArray
),
_gl
.
STATIC_DRAW
);
}
if
(
uvArray
.
length
>
0
)
{
geometryChunk
.
__webGLUVBuffer
=
_gl
.
createBuffer
();
...
...
@@ -414,9 +414,9 @@ THREE.WebGLRenderer = function ( scene ) {
mWireframe
=
material
.
wireframe
;
mLineWidth
=
material
.
wireframe_linewidth
;
mBlending
=
material
.
blending
;
setUniforms
(
program
,
material
.
uniforms
);
}
...
...
@@ -540,21 +540,21 @@ THREE.WebGLRenderer = function ( scene ) {
// normals
if
(
attributes
.
normal
>=
0
)
{
_gl
.
bindBuffer
(
_gl
.
ARRAY_BUFFER
,
geometryChunk
.
__webGLNormalBuffer
);
_gl
.
vertexAttribPointer
(
attributes
.
normal
,
3
,
_gl
.
FLOAT
,
false
,
0
,
0
);
}
// tangents
if
(
attributes
.
tangent
>=
0
)
{
_gl
.
bindBuffer
(
_gl
.
ARRAY_BUFFER
,
geometryChunk
.
__webGLTangentBuffer
);
_gl
.
vertexAttribPointer
(
attributes
.
tangent
,
4
,
_gl
.
FLOAT
,
false
,
0
,
0
);
}
// uvs
if
(
attributes
.
uv
>=
0
)
{
...
...
@@ -785,7 +785,6 @@ THREE.WebGLRenderer = function ( scene ) {
object
.
autoUpdateMatrix
&&
object
.
updateMatrix
();
_modelViewMatrix
.
multiply
(
camera
.
matrix
,
object
.
matrix
);
_modelViewMatrixArray
.
set
(
_modelViewMatrix
.
flatten
()
);
_normalMatrix
=
THREE
.
Matrix4
.
makeInvert3x3
(
_modelViewMatrix
).
transpose
();
...
...
@@ -878,18 +877,18 @@ THREE.WebGLRenderer = function ( scene ) {
};
this
.
supportsVertexTextures
=
function
()
{
return
maxVertexTextures
()
>
0
;
};
function
maxVertexTextures
()
{
return
_gl
.
getParameter
(
_gl
.
MAX_VERTEX_TEXTURE_IMAGE_UNITS
);
};
function
initGL
()
{
try
{
...
...
@@ -1247,7 +1246,7 @@ THREE.WebGLRenderer = function ( scene ) {
prefix_vertex
=
[
maxVertexTextures
()
>
0
?
"
#define VERTEX_TEXTURES
"
:
""
,
"
uniform mat4 objectMatrix;
"
,
"
uniform mat4 modelViewMatrix;
"
,
"
uniform mat4 projectionMatrix;
"
,
...
...
@@ -1296,11 +1295,11 @@ THREE.WebGLRenderer = function ( scene ) {
}
else
if
(
type
==
"
f
"
)
{
_gl
.
uniform1f
(
location
,
value
);
}
else
if
(
type
==
"
v3
"
)
{
_gl
.
uniform3f
(
location
,
value
.
x
,
value
.
y
,
value
.
z
);
}
else
if
(
type
==
"
c
"
)
{
_gl
.
uniform3f
(
location
,
value
.
r
,
value
.
g
,
value
.
b
);
...
...
src/renderers/WebGLRenderer2.js
0 → 100644
浏览文件 @
8e53294e
/**
* @author mrdoob / http://mrdoob.com/
*/
THREE
.
WebGLRenderer2
=
function
()
{
var
_canvas
=
document
.
createElement
(
'
canvas
'
),
_gl
,
_currentProgram
,
_modelViewMatrix
=
new
THREE
.
Matrix4
(),
_viewMatrixArray
=
new
Float32Array
(
16
),
_modelViewMatrixArray
=
new
Float32Array
(
16
),
_projectionMatrixArray
=
new
Float32Array
(
16
),
_normalMatrixArray
=
new
Float32Array
(
9
),
_objectMatrixArray
=
new
Float32Array
(
16
);
try
{
_gl
=
_canvas
.
getContext
(
'
experimental-webgl
'
,
{
antialias
:
true
}
);
}
catch
(
e
)
{
}
if
(
!
_gl
)
{
alert
(
"
WebGL not supported
"
);
throw
"
cannot create webgl context
"
;
}
_gl
.
clearColor
(
0
,
0
,
0
,
1
);
_gl
.
clearDepth
(
1
);
_gl
.
enable
(
_gl
.
DEPTH_TEST
);
_gl
.
depthFunc
(
_gl
.
LEQUAL
);
_gl
.
frontFace
(
_gl
.
CCW
);
_gl
.
cullFace
(
_gl
.
BACK
);
_gl
.
enable
(
_gl
.
CULL_FACE
);
_gl
.
enable
(
_gl
.
BLEND
);
_gl
.
blendFunc
(
_gl
.
ONE
,
_gl
.
ONE_MINUS_SRC_ALPHA
);
_gl
.
clearColor
(
0
,
0
,
0
,
0
);
this
.
domElement
=
_canvas
;
this
.
autoClear
=
true
;
this
.
setSize
=
function
(
width
,
height
)
{
_canvas
.
width
=
width
;
_canvas
.
height
=
height
;
_gl
.
viewport
(
0
,
0
,
_canvas
.
width
,
_canvas
.
height
);
};
this
.
clear
=
function
()
{
_gl
.
clear
(
_gl
.
COLOR_BUFFER_BIT
|
_gl
.
DEPTH_BUFFER_BIT
);
};
this
.
render
=
function
(
scene
,
camera
)
{
var
o
,
ol
;
this
.
autoClear
&&
this
.
clear
();
camera
.
autoUpdateMatrix
&&
camera
.
updateMatrix
();
// Setup camera matrices
_viewMatrixArray
.
set
(
camera
.
matrix
.
flatten
()
);
_projectionMatrixArray
.
set
(
camera
.
projectionMatrix
.
flatten
()
);
for
(
o
=
0
,
ol
=
scene
.
objects
.
length
;
o
<
ol
;
o
++
)
{
object
=
scene
.
objects
[
o
];
if
(
object
.
visible
)
{
renderObject
(
object
);
}
}
function
renderObject
(
object
)
{
var
geometry
,
material
,
m
,
nl
,
program
,
attributes
;
object
.
autoUpdateMatrix
&&
object
.
updateMatrix
();
// Setup object matrices
_objectMatrixArray
.
set
(
object
.
matrix
.
flatten
()
);
_modelViewMatrix
.
multiply
(
camera
.
matrix
,
object
.
matrix
);
_modelViewMatrixArray
.
set
(
_modelViewMatrix
.
flatten
()
);
_normalMatrix
=
THREE
.
Matrix4
.
makeInvert3x3
(
_modelViewMatrix
).
transpose
();
_normalMatrixArray
.
set
(
_normalMatrix
.
m
);
if
(
object
instanceof
THREE
.
Mesh
)
{
geometry
=
object
.
geometry
;
if
(
geometry
.
__webglBuffers
==
undefined
)
{
if
(
buildBuffers
(
geometry
)
==
false
)
return
;
}
for
(
m
=
0
,
ml
=
object
.
material
.
length
;
m
<
ml
;
m
++
)
{
material
=
object
.
material
[
m
];
if
(
material
.
__webglProgram
==
undefined
)
{
if
(
createProgram
(
material
)
==
false
)
continue
;
}
program
=
material
.
__webglProgram
;
attributes
=
program
.
attributes
;
if
(
program
!=
_currentProgram
)
{
_gl
.
useProgram
(
program
);
_currentProgram
=
program
;
}
if
(
material
instanceof
THREE
.
MeshBasicMaterial
||
material
instanceof
THREE
.
MeshLambertMaterial
||
material
instanceof
THREE
.
MeshPhongMaterial
)
{
_gl
.
uniform3f
(
program
.
uniforms
.
mColor
,
material
.
color
.
r
,
material
.
color
.
g
,
material
.
color
.
b
);
_gl
.
uniform1f
(
program
.
uniforms
.
mOpacity
,
material
.
opacity
);
if
(
material
.
map
)
{
setTexture
(
material
.
map
,
0
);
_gl
.
uniform1i
(
program
.
uniforms
.
tMap
,
0
);
}
}
else
if
(
material
instanceof
THREE
.
MeshNormalMaterial
)
{
_gl
.
uniform1f
(
program
.
uniforms
.
mOpacity
,
material
.
opacity
);
}
_gl
.
uniform3f
(
program
.
uniforms
.
cameraPosition
,
camera
.
position
.
x
,
camera
.
position
.
y
,
camera
.
position
.
z
);
_gl
.
uniformMatrix4fv
(
program
.
uniforms
.
viewMatrix
,
false
,
_viewMatrixArray
);
_gl
.
uniformMatrix4fv
(
program
.
uniforms
.
projectionMatrix
,
false
,
_projectionMatrixArray
);
_gl
.
uniformMatrix4fv
(
program
.
uniforms
.
objectMatrix
,
false
,
_objectMatrixArray
);
_gl
.
uniformMatrix4fv
(
program
.
uniforms
.
modelViewMatrix
,
false
,
_modelViewMatrixArray
);
_gl
.
uniformMatrix3fv
(
program
.
uniforms
.
normalMatrix
,
false
,
_normalMatrixArray
);
_gl
.
bindBuffer
(
_gl
.
ARRAY_BUFFER
,
geometry
.
__webglBuffers
.
vertexBuffer
);
_gl
.
vertexAttribPointer
(
attributes
.
position
,
3
,
_gl
.
FLOAT
,
false
,
0
,
0
);
if
(
attributes
.
normal
>=
0
)
{
_gl
.
bindBuffer
(
_gl
.
ARRAY_BUFFER
,
geometry
.
__webglBuffers
.
normalBuffer
);
_gl
.
vertexAttribPointer
(
attributes
.
normal
,
3
,
_gl
.
FLOAT
,
false
,
0
,
0
);
}
if
(
attributes
.
uv
>=
0
)
{
if
(
geometry
.
__webglBuffers
.
uvBuffer
)
{
_gl
.
bindBuffer
(
_gl
.
ARRAY_BUFFER
,
geometry
.
__webglBuffers
.
uvBuffer
);
_gl
.
enableVertexAttribArray
(
attributes
.
uv
);
_gl
.
vertexAttribPointer
(
attributes
.
uv
,
2
,
_gl
.
FLOAT
,
false
,
0
,
0
);
}
else
{
_gl
.
disableVertexAttribArray
(
attributes
.
uv
);
}
}
if
(
!
material
.
wireframe
)
{
_gl
.
bindBuffer
(
_gl
.
ELEMENT_ARRAY_BUFFER
,
geometry
.
__webglBuffers
.
faceBuffer
);
_gl
.
drawElements
(
_gl
.
TRIANGLES
,
geometry
.
__webglBuffers
.
faceCount
,
_gl
.
UNSIGNED_SHORT
,
0
);
}
else
{
_gl
.
lineWidth
(
material
.
wireframe_linewidth
);
_gl
.
bindBuffer
(
_gl
.
ELEMENT_ARRAY_BUFFER
,
geometry
.
__webglBuffers
.
lineBuffer
);
_gl
.
drawElements
(
_gl
.
LINES
,
geometry
.
__webglBuffers
.
lineCount
,
_gl
.
UNSIGNED_SHORT
,
0
);
}
}
}
}
// Buffers
function
buildBuffers
(
geometry
)
{
var
f
,
fl
,
face
,
v1
,
v2
,
v3
,
vertexNormals
,
normal
,
uv
,
vertexIndex
=
0
,
verticesArray
=
[],
facesArray
=
[],
linesArray
=
[],
normalsArray
=
[],
uvsArray
=
[],
buffers
=
{};
for
(
f
=
0
,
fl
=
geometry
.
faces
.
length
;
f
<
fl
;
f
++
)
{
face
=
geometry
.
faces
[
f
];
uv
=
geometry
.
uvs
[
f
];
vertexNormals
=
face
.
vertexNormals
;
faceNormal
=
face
.
normal
;
if
(
face
instanceof
THREE
.
Face3
)
{
v1
=
geometry
.
vertices
[
face
.
a
].
position
;
v2
=
geometry
.
vertices
[
face
.
b
].
position
;
v3
=
geometry
.
vertices
[
face
.
c
].
position
;
verticesArray
.
push
(
v1
.
x
,
v1
.
y
,
v1
.
z
);
verticesArray
.
push
(
v2
.
x
,
v2
.
y
,
v2
.
z
);
verticesArray
.
push
(
v3
.
x
,
v3
.
y
,
v3
.
z
);
if
(
vertexNormals
.
length
==
3
)
{
for
(
i
=
0
;
i
<
3
;
i
++
)
{
normalsArray
.
push
(
vertexNormals
[
i
].
x
,
vertexNormals
[
i
].
y
,
vertexNormals
[
i
].
z
);
}
}
else
{
for
(
i
=
0
;
i
<
3
;
i
++
)
{
normalsArray
.
push
(
faceNormal
.
x
,
faceNormal
.
y
,
faceNormal
.
z
);
}
}
if
(
uv
)
{
for
(
i
=
0
;
i
<
3
;
i
++
)
{
uvsArray
.
push
(
uv
[
i
].
u
,
uv
[
i
].
v
);
}
}
facesArray
.
push
(
vertexIndex
,
vertexIndex
+
1
,
vertexIndex
+
2
);
// TODO: don't add lines that already exist (faces sharing edge)
linesArray
.
push
(
vertexIndex
,
vertexIndex
+
1
);
linesArray
.
push
(
vertexIndex
,
vertexIndex
+
2
);
linesArray
.
push
(
vertexIndex
+
1
,
vertexIndex
+
2
);
vertexIndex
+=
3
;
}
else
if
(
face
instanceof
THREE
.
Face4
)
{
v1
=
geometry
.
vertices
[
face
.
a
].
position
;
v2
=
geometry
.
vertices
[
face
.
b
].
position
;
v3
=
geometry
.
vertices
[
face
.
c
].
position
;
v4
=
geometry
.
vertices
[
face
.
d
].
position
;
verticesArray
.
push
(
v1
.
x
,
v1
.
y
,
v1
.
z
);
verticesArray
.
push
(
v2
.
x
,
v2
.
y
,
v2
.
z
);
verticesArray
.
push
(
v3
.
x
,
v3
.
y
,
v3
.
z
);
verticesArray
.
push
(
v4
.
x
,
v4
.
y
,
v4
.
z
);
if
(
vertexNormals
.
length
==
4
)
{
for
(
i
=
0
;
i
<
4
;
i
++
)
{
normalsArray
.
push
(
vertexNormals
[
i
].
x
,
vertexNormals
[
i
].
y
,
vertexNormals
[
i
].
z
);
}
}
else
{
for
(
i
=
0
;
i
<
4
;
i
++
)
{
normalsArray
.
push
(
faceNormal
.
x
,
faceNormal
.
y
,
faceNormal
.
z
);
}
}
if
(
uv
)
{
for
(
i
=
0
;
i
<
4
;
i
++
)
{
uvsArray
.
push
(
uv
[
i
].
u
,
uv
[
i
].
v
);
}
}
facesArray
.
push
(
vertexIndex
,
vertexIndex
+
1
,
vertexIndex
+
2
);
facesArray
.
push
(
vertexIndex
,
vertexIndex
+
2
,
vertexIndex
+
3
);
// TODO: don't add lines that already exist (faces sharing edge)
linesArray
.
push
(
vertexIndex
,
vertexIndex
+
1
);
linesArray
.
push
(
vertexIndex
,
vertexIndex
+
2
);
linesArray
.
push
(
vertexIndex
,
vertexIndex
+
3
);
linesArray
.
push
(
vertexIndex
+
1
,
vertexIndex
+
2
);
linesArray
.
push
(
vertexIndex
+
2
,
vertexIndex
+
3
);
vertexIndex
+=
4
;
}
}
if
(
!
verticesArray
.
length
)
return
false
;
buffers
.
vertexBuffer
=
_gl
.
createBuffer
();
_gl
.
bindBuffer
(
_gl
.
ARRAY_BUFFER
,
buffers
.
vertexBuffer
);
_gl
.
bufferData
(
_gl
.
ARRAY_BUFFER
,
new
Float32Array
(
verticesArray
),
_gl
.
STATIC_DRAW
);
buffers
.
normalBuffer
=
_gl
.
createBuffer
();
_gl
.
bindBuffer
(
_gl
.
ARRAY_BUFFER
,
buffers
.
normalBuffer
);
_gl
.
bufferData
(
_gl
.
ARRAY_BUFFER
,
new
Float32Array
(
normalsArray
),
_gl
.
STATIC_DRAW
);
if
(
uvsArray
.
length
>
0
)
{
buffers
.
uvBuffer
=
_gl
.
createBuffer
();
_gl
.
bindBuffer
(
_gl
.
ARRAY_BUFFER
,
buffers
.
uvBuffer
);
_gl
.
bufferData
(
_gl
.
ARRAY_BUFFER
,
new
Float32Array
(
uvsArray
),
_gl
.
STATIC_DRAW
);
}
buffers
.
faceBuffer
=
_gl
.
createBuffer
();
_gl
.
bindBuffer
(
_gl
.
ELEMENT_ARRAY_BUFFER
,
buffers
.
faceBuffer
);
_gl
.
bufferData
(
_gl
.
ELEMENT_ARRAY_BUFFER
,
new
Uint16Array
(
facesArray
),
_gl
.
STATIC_DRAW
);
buffers
.
lineBuffer
=
_gl
.
createBuffer
();
_gl
.
bindBuffer
(
_gl
.
ELEMENT_ARRAY_BUFFER
,
buffers
.
lineBuffer
);
_gl
.
bufferData
(
_gl
.
ELEMENT_ARRAY_BUFFER
,
new
Uint16Array
(
linesArray
),
_gl
.
STATIC_DRAW
);
buffers
.
faceCount
=
facesArray
.
length
;
buffers
.
lineCount
=
linesArray
.
length
;
geometry
.
__webglBuffers
=
buffers
;
return
true
;
}
// Shaders
function
createProgram
(
material
)
{
var
pvs
=
''
,
vs
=
''
,
pfs
=
''
,
fs
=
''
,
identifiers
=
[
'
viewMatrix
'
,
'
modelViewMatrix
'
,
'
projectionMatrix
'
,
'
normalMatrix
'
,
'
objectMatrix
'
,
'
cameraPosition
'
];
if
(
material
instanceof
THREE
.
MeshBasicMaterial
||
material
instanceof
THREE
.
MeshLambertMaterial
||
material
instanceof
THREE
.
MeshPhongMaterial
)
{
vs
+=
'
void main() {
\n
'
;
fs
+=
'
void main() {
\n
'
;
vs
+=
'
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
\n
'
;
pfs
+=
'
uniform vec3 mColor;
\n
'
;
pfs
+=
'
uniform float mOpacity;
\n
'
;
fs
+=
'
gl_FragColor = vec4( mColor.xyz, mOpacity );
\n
'
;
if
(
material
.
map
)
{
pvs
+=
'
varying vec2 vUv;
\n
'
,
vs
+=
'
vUv = uv;
\n
'
,
pfs
+=
'
uniform sampler2D tMap;
\n
'
;
pfs
+=
'
varying vec2 vUv;
\n
'
;
fs
+=
'
gl_FragColor *= texture2D( tMap, vUv );
\n
'
;
identifiers
.
push
(
'
tMap
'
);
}
identifiers
.
push
(
'
mColor
'
);
identifiers
.
push
(
'
mOpacity
'
);
vs
+=
'
}
'
;
fs
+=
'
}
'
;
}
else
if
(
material
instanceof
THREE
.
MeshNormalMaterial
)
{
vs
+=
'
void main() {
\n
'
;
fs
+=
'
void main() {
\n
'
;
pvs
+=
'
varying vec3 vNormal;
\n
'
;
vs
+=
'
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
\n
'
;
vs
+=
'
vNormal = normalize( normalMatrix * normal );
\n
'
;
pfs
+=
'
uniform float mOpacity;
\n
'
;
pfs
+=
'
varying vec3 vNormal;
\n
'
;
fs
+=
'
gl_FragColor = vec4( ( normalize( vNormal ) + 1.0 ) * 0.5, mOpacity );
\n
'
;
identifiers
.
push
(
'
mOpacity
'
);
vs
+=
'
}
'
;
fs
+=
'
}
'
;
}
else
if
(
material
instanceof
THREE
.
MeshShaderMaterial
)
{
vs
=
material
.
vertex_shader
;
fs
=
material
.
fragment_shader
;
for
(
uniform
in
material
.
uniforms
)
{
identifiers
.
push
(
uniform
);
}
}
else
{
return
false
;
}
material
.
__webglProgram
=
compileProgram
(
pvs
+
vs
,
pfs
+
fs
);
cacheUniformLocations
(
material
.
__webglProgram
,
identifiers
);
cacheAttributeLocations
(
material
.
__webglProgram
,
[
"
position
"
,
"
normal
"
,
"
uv
"
/*, "tangent"*/
]
);
return
true
;
}
function
compileProgram
(
vertex_shader
,
fragment_shader
)
{
var
program
=
_gl
.
createProgram
(),
shader
prefix_vertex
=
[
maxVertexTextures
()
>
0
?
"
#define VERTEX_TEXTURES
"
:
""
,
"
uniform mat4 objectMatrix;
"
,
"
uniform mat4 modelViewMatrix;
"
,
"
uniform mat4 projectionMatrix;
"
,
//"uniform mat4 viewMatrix;",
"
uniform mat3 normalMatrix;
"
,
"
uniform vec3 cameraPosition;
"
,
"
attribute vec3 position;
"
,
"
attribute vec3 normal;
"
,
"
attribute vec2 uv;
"
,
""
].
join
(
"
\n
"
),
prefix_fragment
=
[
"
#ifdef GL_ES
"
,
"
precision highp float;
"
,
"
#endif
"
,
//"uniform mat4 viewMatrix;",
""
].
join
(
"
\n
"
);
// Vertex shader
shader
=
_gl
.
createShader
(
_gl
.
VERTEX_SHADER
);
_gl
.
shaderSource
(
shader
,
prefix_vertex
+
vertex_shader
);
_gl
.
compileShader
(
shader
);
_gl
.
attachShader
(
program
,
shader
);
if
(
!
_gl
.
getShaderParameter
(
shader
,
_gl
.
COMPILE_STATUS
)
)
{
alert
(
_gl
.
getShaderInfoLog
(
shader
)
);
return
null
;
}
// Fragment Shader
shader
=
_gl
.
createShader
(
_gl
.
FRAGMENT_SHADER
);
_gl
.
shaderSource
(
shader
,
prefix_fragment
+
fragment_shader
);
_gl
.
compileShader
(
shader
);
_gl
.
attachShader
(
program
,
shader
);
if
(
!
_gl
.
getShaderParameter
(
shader
,
_gl
.
COMPILE_STATUS
)
)
{
alert
(
_gl
.
getShaderInfoLog
(
shader
)
);
return
null
;
}
_gl
.
linkProgram
(
program
);
if
(
!
_gl
.
getProgramParameter
(
program
,
_gl
.
LINK_STATUS
)
)
{
alert
(
"
Could not initialise shaders.
\n
"
+
"
VALIDATE_STATUS:
"
+
_gl
.
getProgramParameter
(
program
,
_gl
.
VALIDATE_STATUS
)
+
"
\n
"
+
"
ERROR:
"
+
_gl
.
getError
()
+
"
\n\n
"
+
"
Vertex Shader:
\n
"
+
prefix_vertex
+
vertex_shader
+
"
\n\n
"
+
"
Fragment Shader:
\n
"
+
prefix_fragment
+
fragment_shader
);
}
program
.
uniforms
=
{};
program
.
attributes
=
{};
return
program
;
}
function
cacheUniformLocations
(
program
,
identifiers
)
{
var
i
,
l
,
id
;
for
(
i
=
0
,
l
=
identifiers
.
length
;
i
<
l
;
i
++
)
{
id
=
identifiers
[
i
];
program
.
uniforms
[
id
]
=
_gl
.
getUniformLocation
(
program
,
id
);
}
}
function
cacheAttributeLocations
(
program
,
identifiers
)
{
var
i
,
l
,
id
;
for
(
i
=
0
,
l
=
identifiers
.
length
;
i
<
l
;
i
++
)
{
id
=
identifiers
[
i
];
program
.
attributes
[
id
]
=
_gl
.
getAttribLocation
(
program
,
id
);
if
(
program
.
attributes
[
id
]
>=
0
)
{
_gl
.
enableVertexAttribArray
(
program
.
attributes
[
id
]
);
}
}
}
// Textures
function
setTexture
(
texture
,
slot
)
{
if
(
!
texture
.
__webglTexture
&&
texture
.
image
.
loaded
)
{
texture
.
__webglTexture
=
_gl
.
createTexture
();
_gl
.
bindTexture
(
_gl
.
TEXTURE_2D
,
texture
.
__webglTexture
);
_gl
.
texImage2D
(
_gl
.
TEXTURE_2D
,
0
,
_gl
.
RGBA
,
_gl
.
RGBA
,
_gl
.
UNSIGNED_BYTE
,
texture
.
image
);
_gl
.
texParameteri
(
_gl
.
TEXTURE_2D
,
_gl
.
TEXTURE_WRAP_S
,
paramThreeToGL
(
texture
.
wrap_s
)
);
_gl
.
texParameteri
(
_gl
.
TEXTURE_2D
,
_gl
.
TEXTURE_WRAP_T
,
paramThreeToGL
(
texture
.
wrap_t
)
);
_gl
.
texParameteri
(
_gl
.
TEXTURE_2D
,
_gl
.
TEXTURE_MAG_FILTER
,
paramThreeToGL
(
texture
.
mag_filter
)
);
_gl
.
texParameteri
(
_gl
.
TEXTURE_2D
,
_gl
.
TEXTURE_MIN_FILTER
,
paramThreeToGL
(
texture
.
min_filter
)
);
_gl
.
generateMipmap
(
_gl
.
TEXTURE_2D
);
_gl
.
bindTexture
(
_gl
.
TEXTURE_2D
,
null
);
}
_gl
.
activeTexture
(
_gl
.
TEXTURE0
+
slot
);
_gl
.
bindTexture
(
_gl
.
TEXTURE_2D
,
texture
.
__webglTexture
);
}
function
maxVertexTextures
()
{
return
_gl
.
getParameter
(
_gl
.
MAX_VERTEX_TEXTURE_IMAGE_UNITS
);
};
function
paramThreeToGL
(
p
)
{
switch
(
p
)
{
case
THREE
.
RepeatWrapping
:
return
_gl
.
REPEAT
;
break
;
case
THREE
.
ClampToEdgeWrapping
:
return
_gl
.
CLAMP_TO_EDGE
;
break
;
case
THREE
.
MirroredRepeatWrapping
:
return
_gl
.
MIRRORED_REPEAT
;
break
;
case
THREE
.
NearestFilter
:
return
_gl
.
NEAREST
;
break
;
case
THREE
.
NearestMipMapNearestFilter
:
return
_gl
.
NEAREST_MIPMAP_NEAREST
;
break
;
case
THREE
.
NearestMipMapLinearFilter
:
return
_gl
.
NEAREST_MIPMAP_LINEAR
;
break
;
case
THREE
.
LinearFilter
:
return
_gl
.
LINEAR
;
break
;
case
THREE
.
LinearMipMapNearestFilter
:
return
_gl
.
LINEAR_MIPMAP_NEAREST
;
break
;
case
THREE
.
LinearMipMapLinearFilter
:
return
_gl
.
LINEAR_MIPMAP_LINEAR
;
break
;
}
return
0
;
}
};
};
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录