Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
车家大少爷
three.js
提交
68bdd05f
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,发现更多精彩内容 >>
提交
68bdd05f
编写于
9月 10, 2017
作者:
M
Mugen87
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Examples: Clean up basic shader examples
上级
733be119
变更
3
显示空白变更内容
内联
并排
Showing
3 changed file
with
87 addition
and
118 deletion
+87
-118
examples/webgl_shader.html
examples/webgl_shader.html
+32
-30
examples/webgl_shader2.html
examples/webgl_shader2.html
+36
-49
examples/webgl_shader_lava.html
examples/webgl_shader_lava.html
+19
-39
未找到文件。
examples/webgl_shader.html
浏览文件 @
68bdd05f
...
...
@@ -28,7 +28,6 @@
color
:
#ffffff
;
}
#oldie
a
{
color
:
#da0
}
</style>
</head>
<body>
...
...
@@ -42,8 +41,12 @@
<script
id=
"vertexShader"
type=
"x-shader/x-vertex"
>
varying
vec2
vUv
;
void
main
()
{
vUv
=
uv
;
gl_Position
=
vec4
(
position
,
1.0
);
}
...
...
@@ -52,34 +55,37 @@
<script
id=
"fragmentShader"
type=
"x-shader/x-fragment"
>
uniform
vec2
resolution
;
varying
vec2
vUv
;
uniform
float
time
;
void
main
()
{
vec2
p
=
-
1.0
+
2.0
*
gl_FragCoord
.
xy
/
resolution
.
xy
;
float
a
=
time
*
40.0
;
float
d
,
e
,
f
,
g
=
1.0
/
40.0
,
h
,
i
,
r
,
q
;
e
=
400.0
*
(
p
.
x
*
0.5
+
0.5
);
f
=
400.0
*
(
p
.
y
*
0.5
+
0.5
);
i
=
200.0
+
sin
(
e
*
g
+
a
/
150.0
)
*
20.0
;
d
=
200.0
+
cos
(
f
*
g
/
2.0
)
*
18.0
+
cos
(
e
*
g
)
*
7.0
;
r
=
sqrt
(
pow
(
abs
(
i
-
e
),
2.0
)
+
pow
(
abs
(
d
-
f
),
2.0
));
q
=
f
/
r
;
e
=
(
r
*
cos
(
q
))
-
a
/
2.0
;
f
=
(
r
*
sin
(
q
))
-
a
/
2.0
;
d
=
sin
(
e
*
g
)
*
176.0
+
sin
(
e
*
g
)
*
164.0
+
r
;
h
=
((
f
+
d
)
+
a
/
2.0
)
*
g
;
i
=
cos
(
h
+
r
*
p
.
x
/
1.3
)
*
(
e
+
e
+
a
)
+
cos
(
q
*
g
*
6.0
)
*
(
r
+
h
/
3.0
);
h
=
sin
(
f
*
g
)
*
144.0
-
sin
(
e
*
g
)
*
212.0
*
p
.
x
;
h
=
(
h
+
(
f
-
e
)
*
q
+
sin
(
r
-
(
a
+
h
)
/
7.0
)
*
10.0
+
i
/
4.0
)
*
g
;
i
+=
cos
(
h
*
2.3
*
sin
(
a
/
350.0
-
q
))
*
184.0
*
sin
(
q
-
(
r
*
4.3
+
a
/
12.0
)
*
g
)
+
tan
(
r
*
g
+
h
)
*
184.0
*
cos
(
r
*
g
+
h
);
i
=
mod
(
i
/
5.6
,
256.0
)
/
64.0
;
if
(
i
<
0.0
)
i
+=
4.0
;
if
(
i
>=
2.0
)
i
=
4.0
-
i
;
d
=
r
/
350.0
;
d
+=
sin
(
d
*
d
*
8.0
)
*
0.52
;
f
=
(
sin
(
a
*
g
)
+
1.0
)
/
2.0
;
gl_FragColor
=
vec4
(
vec3
(
f
*
i
/
1.6
,
i
/
2.0
+
d
/
13.0
,
i
)
*
d
*
p
.
x
+
vec3
(
i
/
1.3
+
d
/
8.0
,
i
/
2.0
+
d
/
18.0
,
i
)
*
d
*
(
1.0
-
p
.
x
),
1.0
);
vec2
p
=
-
1.0
+
2.0
*
vUv
;
float
a
=
time
*
40.0
;
float
d
,
e
,
f
,
g
=
1.0
/
40.0
,
h
,
i
,
r
,
q
;
e
=
400.0
*
(
p
.
x
*
0.5
+
0.5
);
f
=
400.0
*
(
p
.
y
*
0.5
+
0.5
);
i
=
200.0
+
sin
(
e
*
g
+
a
/
150.0
)
*
20.0
;
d
=
200.0
+
cos
(
f
*
g
/
2.0
)
*
18.0
+
cos
(
e
*
g
)
*
7.0
;
r
=
sqrt
(
pow
(
abs
(
i
-
e
),
2.0
)
+
pow
(
abs
(
d
-
f
),
2.0
)
);
q
=
f
/
r
;
e
=
(
r
*
cos
(
q
)
)
-
a
/
2.0
;
f
=
(
r
*
sin
(
q
)
)
-
a
/
2.0
;
d
=
sin
(
e
*
g
)
*
176.0
+
sin
(
e
*
g
)
*
164.0
+
r
;
h
=
(
(
f
+
d
)
+
a
/
2.0
)
*
g
;
i
=
cos
(
h
+
r
*
p
.
x
/
1.3
)
*
(
e
+
e
+
a
)
+
cos
(
q
*
g
*
6.0
)
*
(
r
+
h
/
3.0
);
h
=
sin
(
f
*
g
)
*
144.0
-
sin
(
e
*
g
)
*
212.0
*
p
.
x
;
h
=
(
h
+
(
f
-
e
)
*
q
+
sin
(
r
-
(
a
+
h
)
/
7.0
)
*
10.0
+
i
/
4.0
)
*
g
;
i
+=
cos
(
h
*
2.3
*
sin
(
a
/
350.0
-
q
)
)
*
184.0
*
sin
(
q
-
(
r
*
4.3
+
a
/
12.0
)
*
g
)
+
tan
(
r
*
g
+
h
)
*
184.0
*
cos
(
r
*
g
+
h
);
i
=
mod
(
i
/
5.6
,
256.0
)
/
64.0
;
if
(
i
<
0.0
)
i
+=
4.0
;
if
(
i
>=
2.0
)
i
=
4.0
-
i
;
d
=
r
/
350.0
;
d
+=
sin
(
d
*
d
*
8.0
)
*
0.52
;
f
=
(
sin
(
a
*
g
)
+
1.0
)
/
2.0
;
gl_FragColor
=
vec4
(
vec3
(
f
*
i
/
1.6
,
i
/
2.0
+
d
/
13.0
,
i
)
*
d
*
p
.
x
+
vec3
(
i
/
1.3
+
d
/
8.0
,
i
/
2.0
+
d
/
18.0
,
i
)
*
d
*
(
1.0
-
p
.
x
),
1.0
);
}
...
...
@@ -109,8 +115,7 @@
var
geometry
=
new
THREE
.
PlaneBufferGeometry
(
2
,
2
);
uniforms
=
{
time
:
{
value
:
1.0
},
resolution
:
{
value
:
new
THREE
.
Vector2
()
}
time
:
{
value
:
1.0
}
};
var
material
=
new
THREE
.
ShaderMaterial
(
{
...
...
@@ -138,9 +143,6 @@
renderer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
uniforms
.
resolution
.
value
.
x
=
renderer
.
domElement
.
width
;
uniforms
.
resolution
.
value
.
y
=
renderer
.
domElement
.
height
;
}
//
...
...
examples/webgl_shader2.html
浏览文件 @
68bdd05f
...
...
@@ -28,7 +28,6 @@
color
:
#ffffff
;
}
#oldie
a
{
color
:
#da0
}
</style>
</head>
<body>
...
...
@@ -44,13 +43,12 @@
<script
id=
"fragment_shader4"
type=
"x-shader/x-fragment"
>
uniform
float
time
;
uniform
vec2
resolution
;
varying
vec2
vUv
;
void
main
(
void
)
{
vec2
position
=
-
1.0
+
2.0
*
vUv
;
vec2
position
=
-
1.0
+
2.0
*
vUv
;
float
red
=
abs
(
sin
(
position
.
x
*
position
.
y
+
time
/
5.0
)
);
float
green
=
abs
(
sin
(
position
.
x
*
position
.
y
+
time
/
4.0
)
);
...
...
@@ -64,7 +62,6 @@
<script
id=
"fragment_shader3"
type=
"x-shader/x-fragment"
>
uniform
float
time
;
uniform
vec2
resolution
;
varying
vec2
vUv
;
...
...
@@ -87,7 +84,6 @@
<script
id=
"fragment_shader2"
type=
"x-shader/x-fragment"
>
uniform
float
time
;
uniform
vec2
resolution
;
uniform
sampler2D
texture
;
...
...
@@ -95,7 +91,7 @@
void
main
(
void
)
{
vec2
position
=
-
1.0
+
2.0
*
vUv
;
vec2
position
=
-
1.0
+
2.0
*
vUv
;
float
a
=
atan
(
position
.
y
,
position
.
x
);
float
r
=
sqrt
(
dot
(
position
,
position
)
);
...
...
@@ -115,38 +111,37 @@
<script
id=
"fragment_shader1"
type=
"x-shader/x-fragment"
>
uniform
vec2
resolution
;
uniform
float
time
;
varying
vec2
vUv
;
void
main
(
void
)
{
vec2
p
=
-
1.0
+
2.0
*
vUv
;
float
a
=
time
*
40.0
;
float
d
,
e
,
f
,
g
=
1.0
/
40.0
,
h
,
i
,
r
,
q
;
e
=
400.0
*
(
p
.
x
*
0.5
+
0.5
);
f
=
400.0
*
(
p
.
y
*
0.5
+
0.5
)
;
i
=
200.0
+
sin
(
e
*
g
+
a
/
150.0
)
*
20
.0
;
d
=
200.0
+
cos
(
f
*
g
/
2.0
)
*
18.0
+
cos
(
e
*
g
)
*
7.0
;
r
=
sqrt
(
pow
(
i
-
e
,
2.0
)
+
pow
(
d
-
f
,
2.0
))
;
q
=
f
/
r
;
e
=
(
r
*
cos
(
q
))
-
a
/
2.0
;
f
=
(
r
*
sin
(
q
))
-
a
/
2.0
;
d
=
sin
(
e
*
g
)
*
176.0
+
sin
(
e
*
g
)
*
164.0
+
r
;
h
=
((
f
+
d
)
+
a
/
2.0
)
*
g
;
i
=
cos
(
h
+
r
*
p
.
x
/
1.3
)
*
(
e
+
e
+
a
)
+
cos
(
q
*
g
*
6.0
)
*
(
r
+
h
/
3.0
);
h
=
sin
(
f
*
g
)
*
144.0
-
sin
(
e
*
g
)
*
212.0
*
p
.
x
;
h
=
(
h
+
(
f
-
e
)
*
q
+
sin
(
r
-
(
a
+
h
)
/
7.0
)
*
10.0
+
i
/
4.0
)
*
g
;
i
+=
cos
(
h
*
2.3
*
sin
(
a
/
350.0
-
q
))
*
184.0
*
sin
(
q
-
(
r
*
4.3
+
a
/
12.0
)
*
g
)
+
tan
(
r
*
g
+
h
)
*
184.0
*
cos
(
r
*
g
+
h
);
i
=
mod
(
i
/
5.6
,
256.0
)
/
64.0
;
if
(
i
<
0.0
)
i
+=
4.0
;
if
(
i
>=
2.0
)
i
=
4.0
-
i
;
d
=
r
/
350.0
;
d
+=
sin
(
d
*
d
*
8.0
)
*
0.52
;
f
=
(
sin
(
a
*
g
)
+
1.0
)
/
2.0
;
gl_FragColor
=
vec4
(
vec3
(
f
*
i
/
1.6
,
i
/
2.0
+
d
/
13.0
,
i
)
*
d
*
p
.
x
+
vec3
(
i
/
1.3
+
d
/
8.0
,
i
/
2.0
+
d
/
18.0
,
i
)
*
d
*
(
1.0
-
p
.
x
),
1.0
);
void
main
(
void
)
{
vec2
p
=
-
1.0
+
2.0
*
vUv
;
float
a
=
time
*
40.0
;
float
d
,
e
,
f
,
g
=
1.0
/
40.0
,
h
,
i
,
r
,
q
;
e
=
400.0
*
(
p
.
x
*
0.5
+
0.5
);
f
=
400.0
*
(
p
.
y
*
0.5
+
0.5
);
i
=
200.0
+
sin
(
e
*
g
+
a
/
150.0
)
*
20.0
;
d
=
200.0
+
cos
(
f
*
g
/
2.0
)
*
18.0
+
cos
(
e
*
g
)
*
7
.0
;
r
=
sqrt
(
pow
(
abs
(
i
-
e
),
2.0
)
+
pow
(
abs
(
d
-
f
),
2.0
)
)
;
q
=
f
/
r
;
e
=
(
r
*
cos
(
q
)
)
-
a
/
2.0
;
f
=
(
r
*
sin
(
q
)
)
-
a
/
2.0
;
d
=
sin
(
e
*
g
)
*
176.0
+
sin
(
e
*
g
)
*
164.0
+
r
;
h
=
(
(
f
+
d
)
+
a
/
2.0
)
*
g
;
i
=
cos
(
h
+
r
*
p
.
x
/
1.3
)
*
(
e
+
e
+
a
)
+
cos
(
q
*
g
*
6.0
)
*
(
r
+
h
/
3.0
);
h
=
sin
(
f
*
g
)
*
144.0
-
sin
(
e
*
g
)
*
212.0
*
p
.
x
;
h
=
(
h
+
(
f
-
e
)
*
q
+
sin
(
r
-
(
a
+
h
)
/
7.0
)
*
10.0
+
i
/
4.0
)
*
g
;
i
+=
cos
(
h
*
2.3
*
sin
(
a
/
350.0
-
q
)
)
*
184.0
*
sin
(
q
-
(
r
*
4.3
+
a
/
12.0
)
*
g
)
+
tan
(
r
*
g
+
h
)
*
184.0
*
cos
(
r
*
g
+
h
);
i
=
mod
(
i
/
5.6
,
256.0
)
/
64.0
;
if
(
i
<
0.0
)
i
+=
4.0
;
if
(
i
>=
2.0
)
i
=
4.0
-
i
;
d
=
r
/
350.0
;
d
+=
sin
(
d
*
d
*
8.0
)
*
0.52
;
f
=
(
sin
(
a
*
g
)
+
1.0
)
/
2.0
;
gl_FragColor
=
vec4
(
vec3
(
f
*
i
/
1.6
,
i
/
2.0
+
d
/
13.0
,
i
)
*
d
*
p
.
x
+
vec3
(
i
/
1.3
+
d
/
8.0
,
i
/
2.0
+
d
/
18.0
,
i
)
*
d
*
(
1.0
-
p
.
x
),
1.0
);
}
...
...
@@ -171,12 +166,10 @@
var
container
,
stats
;
var
camera
,
scene
,
renderer
;
var
camera
,
scene
,
renderer
,
clock
;
var
uniforms1
,
uniforms2
;
var
clock
=
new
THREE
.
Clock
();
init
();
animate
();
...
...
@@ -189,17 +182,17 @@
scene
=
new
THREE
.
Scene
();
var
geometry
=
new
THREE
.
BoxGeometry
(
0.75
,
0.75
,
0.75
);
clock
=
new
THREE
.
Clock
();
var
geometry
=
new
THREE
.
BoxBufferGeometry
(
0.75
,
0.75
,
0.75
);
uniforms1
=
{
time
:
{
value
:
1.0
},
resolution
:
{
value
:
new
THREE
.
Vector2
()
}
time
:
{
value
:
1.0
}
};
uniforms2
=
{
time
:
{
value
:
1.0
},
resolution
:
{
value
:
new
THREE
.
Vector2
()
},
texture
:
{
value
:
new
THREE
.
TextureLoader
().
load
(
"
textures/disturb.jpg
"
)
}
texture
:
{
value
:
new
THREE
.
TextureLoader
().
load
(
'
textures/disturb.jpg
'
)
}
};
uniforms2
.
texture
.
value
.
wrapS
=
uniforms2
.
texture
.
value
.
wrapT
=
THREE
.
RepeatWrapping
;
...
...
@@ -243,12 +236,6 @@
function
onWindowResize
(
event
)
{
uniforms1
.
resolution
.
value
.
x
=
window
.
innerWidth
;
uniforms1
.
resolution
.
value
.
y
=
window
.
innerHeight
;
uniforms2
.
resolution
.
value
.
x
=
window
.
innerWidth
;
uniforms2
.
resolution
.
value
.
y
=
window
.
innerHeight
;
camera
.
aspect
=
window
.
innerWidth
/
window
.
innerHeight
;
camera
.
updateProjectionMatrix
();
...
...
examples/webgl_shader_lava.html
浏览文件 @
68bdd05f
...
...
@@ -50,12 +50,10 @@
<script
src=
"js/postprocessing/FilmPass.js"
></script>
<script
src=
"js/Detector.js"
></script>
<script
src=
"js/libs/stats.min.js"
></script>
<script
id=
"fragmentShader"
type=
"x-shader/x-fragment"
>
uniform
float
time
;
uniform
vec2
resolution
;
uniform
float
fogDensity
;
uniform
vec3
fogColor
;
...
...
@@ -67,11 +65,11 @@
void
main
(
void
)
{
vec2
position
=
-
1.0
+
2.0
*
vUv
;
vec2
position
=
-
1.0
+
2.0
*
vUv
;
vec4
noise
=
texture2D
(
texture1
,
vUv
);
vec2
T1
=
vUv
+
vec2
(
1.5
,
-
1.5
)
*
time
*
0.02
;
vec2
T2
=
vUv
+
vec2
(
-
0.5
,
2.0
)
*
time
*
0.01
;
vec2
T1
=
vUv
+
vec2
(
1.5
,
-
1.5
)
*
time
*
0.02
;
vec2
T2
=
vUv
+
vec2
(
-
0.5
,
2.0
)
*
time
*
0.01
;
T1
.
x
+=
noise
.
x
*
2.0
;
T1
.
y
+=
noise
.
y
*
2.0
;
...
...
@@ -83,9 +81,9 @@
vec4
color
=
texture2D
(
texture2
,
T2
*
2.0
);
vec4
temp
=
color
*
(
vec4
(
p
,
p
,
p
,
p
)
*
2.0
)
+
(
color
*
color
-
0.1
);
if
(
temp
.
r
>
1.0
){
temp
.
bg
+=
clamp
(
temp
.
r
-
2.0
,
0.0
,
100.0
);
}
if
(
temp
.
g
>
1.0
){
temp
.
rb
+=
temp
.
g
-
1.0
;
}
if
(
temp
.
b
>
1.0
){
temp
.
rg
+=
temp
.
b
-
1.0
;
}
if
(
temp
.
r
>
1.0
)
{
temp
.
bg
+=
clamp
(
temp
.
r
-
2.0
,
0.0
,
100.0
);
}
if
(
temp
.
g
>
1.0
)
{
temp
.
rb
+=
temp
.
g
-
1.0
;
}
if
(
temp
.
b
>
1.0
)
{
temp
.
rg
+=
temp
.
b
-
1.0
;
}
gl_FragColor
=
temp
;
...
...
@@ -120,22 +118,11 @@
if
(
!
Detector
.
webgl
)
Detector
.
addGetWebGLMessage
();
var
container
,
stats
;
var
container
;
var
c
lock
=
new
THREE
.
Clock
()
;
var
c
amera
,
scene
,
renderer
,
composer
,
clock
;
var
camera
,
scene
,
renderer
,
composer
;
var
uniforms
,
material
,
mesh
;
var
mouseX
=
0
,
mouseY
=
0
,
lat
=
0
,
lon
=
0
,
phy
=
0
,
theta
=
0
;
var
width
=
window
.
innerWidth
||
2
;
var
height
=
window
.
innerHeight
||
2
;
var
windowHalfX
=
width
/
2
;
var
windowHalfY
=
height
/
2
;
var
uniforms
,
mesh
;
init
();
animate
();
...
...
@@ -144,11 +131,13 @@
container
=
document
.
getElementById
(
'
container
'
);
camera
=
new
THREE
.
PerspectiveCamera
(
35
,
window
HalfX
/
windowHalfY
,
1
,
3000
);
camera
=
new
THREE
.
PerspectiveCamera
(
35
,
window
.
innerWidth
/
window
.
innerHeight
,
1
,
3000
);
camera
.
position
.
z
=
4
;
scene
=
new
THREE
.
Scene
();
clock
=
new
THREE
.
Clock
();
var
textureLoader
=
new
THREE
.
TextureLoader
();
uniforms
=
{
...
...
@@ -156,10 +145,9 @@
fogDensity
:
{
value
:
0.45
},
fogColor
:
{
value
:
new
THREE
.
Vector3
(
0
,
0
,
0
)
},
time
:
{
value
:
1.0
},
resolution
:
{
value
:
new
THREE
.
Vector2
()
},
uvScale
:
{
value
:
new
THREE
.
Vector2
(
3.0
,
1.0
)
},
texture1
:
{
value
:
textureLoader
.
load
(
"
textures/lava/cloud.png
"
)
},
texture2
:
{
value
:
textureLoader
.
load
(
"
textures/lava/lavatile.jpg
"
)
}
texture1
:
{
value
:
textureLoader
.
load
(
'
textures/lava/cloud.png
'
)
},
texture2
:
{
value
:
textureLoader
.
load
(
'
textures/lava/lavatile.jpg
'
)
}
};
...
...
@@ -168,7 +156,7 @@
var
size
=
0.65
;
material
=
new
THREE
.
ShaderMaterial
(
{
var
material
=
new
THREE
.
ShaderMaterial
(
{
uniforms
:
uniforms
,
vertexShader
:
document
.
getElementById
(
'
vertexShader
'
).
textContent
,
...
...
@@ -176,7 +164,7 @@
}
);
mesh
=
new
THREE
.
Mesh
(
new
THREE
.
TorusGeometry
(
size
,
0.3
,
30
,
30
),
material
);
mesh
=
new
THREE
.
Mesh
(
new
THREE
.
Torus
Buffer
Geometry
(
size
,
0.3
,
30
,
30
),
material
);
mesh
.
rotation
.
x
=
0.3
;
scene
.
add
(
mesh
);
...
...
@@ -187,10 +175,6 @@
container
.
appendChild
(
renderer
.
domElement
);
renderer
.
autoClear
=
false
;
//
stats
=
new
Stats
();
//container.appendChild( stats.dom );
//
...
...
@@ -216,9 +200,6 @@
function
onWindowResize
(
event
)
{
uniforms
.
resolution
.
value
.
x
=
window
.
innerWidth
;
uniforms
.
resolution
.
value
.
y
=
window
.
innerHeight
;
renderer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
camera
.
aspect
=
window
.
innerWidth
/
window
.
innerHeight
;
...
...
@@ -235,7 +216,6 @@
requestAnimationFrame
(
animate
);
render
();
stats
.
update
();
}
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录