Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
车家大少爷
three.js
提交
44844c77
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,发现更多精彩内容 >>
提交
44844c77
编写于
5月 24, 2016
作者:
M
Mr.doob
浏览文件
操作
浏览文件
下载
差异文件
Merge branch 'master' into dev
上级
0307e346
4d0e1db0
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
27 addition
and
55 deletion
+27
-55
examples/webgl_buffergeometry_instancing_billboards.html
examples/webgl_buffergeometry_instancing_billboards.html
+27
-55
未找到文件。
examples/webgl_buffergeometry_instancing_billboards.html
浏览文件 @
44844c77
...
...
@@ -55,31 +55,27 @@
precision
highp
float
;
uniform
mat4
modelViewMatrix
;
uniform
mat4
projectionMatrix
;
uniform
float
time
;
attribute
vec3
position
;
attribute
vec2
uv
;
attribute
vec3
normal
;
attribute
vec3
translate
;
attribute
float
scale
;
attribute
vec3
color
;
varying
vec2
vUv
;
varying
vec3
vColor
;
varying
float
vScale
;
void
main
()
{
vec4
mvPosition
=
modelViewMatrix
*
vec4
(
translate
,
1.0
);
vec3
trTime
=
vec3
(
translate
.
x
+
time
,
translate
.
y
+
time
,
translate
.
z
+
time
);
float
scale
=
sin
(
trTime
.
x
*
2.1
)
+
sin
(
trTime
.
y
*
3.2
)
+
sin
(
trTime
.
z
*
4.3
);
vScale
=
scale
;
scale
=
scale
*
10.0
+
10.0
;
mvPosition
.
xyz
+=
position
*
scale
;
vUv
=
uv
;
vColor
=
color
;
gl_Position
=
projectionMatrix
*
mvPosition
;
}
</script>
<script
id=
"fshader"
type=
"x-shader/x-fragment"
>
precision
highp
float
;
...
...
@@ -87,20 +83,32 @@
uniform
sampler2D
map
;
varying
vec2
vUv
;
varying
vec3
vColor
;
varying
float
vScale
;
// HSL to RGB Convertion helpers
vec3
HUEtoRGB
(
float
H
){
H
=
mod
(
H
,
1.0
);
float
R
=
abs
(
H
*
6.0
-
3.0
)
-
1.0
;
float
G
=
2.0
-
abs
(
H
*
6.0
-
2.0
);
float
B
=
2.0
-
abs
(
H
*
6.0
-
4.0
);
return
clamp
(
vec3
(
R
,
G
,
B
),
0.0
,
1.0
);
}
void
main
()
{
vec3
HSLtoRGB
(
vec3
HSL
){
vec3
RGB
=
HUEtoRGB
(
HSL
.
x
);
float
C
=
(
1.0
-
abs
(
2.0
*
HSL
.
z
-
1.0
))
*
HSL
.
y
;
return
(
RGB
-
0.5
)
*
C
+
HSL
.
z
;
}
void
main
()
{
vec4
diffuseColor
=
texture2D
(
map
,
vUv
);
gl_FragColor
=
vec4
(
diffuseColor
.
xyz
*
vColor
,
diffuseColor
.
w
);
gl_FragColor
=
vec4
(
diffuseColor
.
xyz
*
HSLtoRGB
(
vec3
(
vScale
/
5.0
,
1.0
,
0.5
))
,
diffuseColor
.
w
);
if
(
diffuseColor
.
w
<
0.5
)
discard
;
}
</script>
<script>
var
container
,
stats
;
var
camera
,
scene
,
renderer
;
...
...
@@ -136,8 +144,6 @@
var
particleCount
=
75000
;
var
translateArray
=
new
Float32Array
(
particleCount
*
3
);
var
scaleArray
=
new
Float32Array
(
particleCount
);
var
colorsArray
=
new
Float32Array
(
particleCount
*
3
);
for
(
var
i
=
0
,
i3
=
0
,
l
=
particleCount
;
i
<
l
;
i
++
,
i3
+=
3
)
{
...
...
@@ -148,12 +154,11 @@
}
geometry
.
addAttribute
(
"
translate
"
,
new
THREE
.
InstancedBufferAttribute
(
translateArray
,
3
,
1
)
);
geometry
.
addAttribute
(
"
scale
"
,
new
THREE
.
InstancedBufferAttribute
(
scaleArray
,
1
,
1
).
setDynamic
(
true
)
);
geometry
.
addAttribute
(
"
color
"
,
new
THREE
.
InstancedBufferAttribute
(
colorsArray
,
3
,
1
).
setDynamic
(
true
)
);
material
=
new
THREE
.
RawShaderMaterial
(
{
uniforms
:
{
map
:
{
type
:
"
t
"
,
value
:
new
THREE
.
TextureLoader
().
load
(
"
textures/sprites/circle.png
"
)
}
map
:
{
type
:
"
t
"
,
value
:
new
THREE
.
TextureLoader
().
load
(
"
textures/sprites/circle.png
"
)
},
time
:
{
type
:
"
f
"
,
value
:
0.0
}
},
vertexShader
:
document
.
getElementById
(
'
vshader
'
).
textContent
,
fragmentShader
:
document
.
getElementById
(
'
fshader
'
).
textContent
,
...
...
@@ -169,8 +174,6 @@
renderer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
container
.
appendChild
(
renderer
.
domElement
);
//
stats
=
new
Stats
();
container
.
appendChild
(
stats
.
dom
);
...
...
@@ -189,8 +192,6 @@
}
//
function
animate
()
{
requestAnimationFrame
(
animate
);
...
...
@@ -204,40 +205,11 @@
var
time
=
performance
.
now
()
*
0.0005
;
material
.
uniforms
.
time
.
value
=
time
;
mesh
.
rotation
.
x
=
time
*
0.2
;
mesh
.
rotation
.
y
=
time
*
0.4
;
var
translates
=
geometry
.
getAttribute
(
'
translate
'
);
var
translatesArray
=
translates
.
array
;
var
scales
=
geometry
.
getAttribute
(
'
scale
'
);
var
scalesArray
=
scales
.
array
;
var
colors
=
geometry
.
getAttribute
(
'
color
'
);
var
colorsArray
=
colors
.
array
;
var
color
=
new
THREE
.
Color
(
0xffffff
);
for
(
var
i
=
0
,
i3
=
0
,
l
=
scalesArray
.
length
;
i
<
l
;
i
++
,
i3
+=
3
)
{
var
x
=
translatesArray
[
i3
+
0
]
+
time
;
var
y
=
translatesArray
[
i3
+
1
]
+
time
;
var
z
=
translatesArray
[
i3
+
2
]
+
time
;
var
scale
=
Math
.
sin
(
x
*
2.1
)
+
Math
.
sin
(
y
*
3.2
)
+
Math
.
sin
(
z
*
4.3
);
scalesArray
[
i
]
=
scale
*
10
+
10
;
color
.
setHSL
(
scale
/
5
,
1
,
0.5
);
colorsArray
[
i3
+
0
]
=
color
.
r
;
colorsArray
[
i3
+
1
]
=
color
.
g
;
colorsArray
[
i3
+
2
]
=
color
.
b
;
}
scales
.
needsUpdate
=
true
;
colors
.
needsUpdate
=
true
;
renderer
.
render
(
scene
,
camera
);
}
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录