Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Ablesons
three.js
提交
743363b5
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,发现更多精彩内容 >>
提交
743363b5
编写于
8月 31, 2011
作者:
A
alteredq
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Updated video and dynamic particles examples to use new postprocessing system.
上级
797530e4
变更
2
显示空白变更内容
内联
并排
Showing
2 changed file
with
99 addition
and
265 deletion
+99
-265
examples/webgl_materials_video.html
examples/webgl_materials_video.html
+23
-97
examples/webgl_particles_dynamic.html
examples/webgl_particles_dynamic.html
+76
-168
未找到文件。
examples/webgl_materials_video.html
浏览文件 @
743363b5
...
...
@@ -40,6 +40,11 @@
<script
type=
"text/javascript"
src=
"js/ShaderExtras.js"
></script>
<script
type=
"text/javascript"
src=
"js/postprocessing/EffectComposer.js"
></script>
<script
type=
"text/javascript"
src=
"js/postprocessing/RenderPass.js"
></script>
<script
type=
"text/javascript"
src=
"js/postprocessing/BloomPass.js"
></script>
<script
type=
"text/javascript"
src=
"js/postprocessing/ShaderPass.js"
></script>
<script
type=
"text/javascript"
src=
"js/Detector.js"
></script>
<script
type=
"text/javascript"
src=
"js/RequestAnimationFrame.js"
></script>
<script
type=
"text/javascript"
src=
"js/Stats.js"
></script>
...
...
@@ -59,14 +64,14 @@
var
video
,
texture
,
material
,
mesh
;
var
composer
;
var
mouseX
=
0
;
var
mouseY
=
0
;
var
windowHalfX
=
window
.
innerWidth
/
2
;
var
windowHalfY
=
window
.
innerHeight
/
2
;
var
postprocessing
=
{
enabled
:
true
};
var
cube_count
,
meshes
=
[],
...
...
@@ -165,7 +170,6 @@
}
initPostprocessing
();
renderer
.
autoClear
=
false
;
stats
=
new
Stats
();
...
...
@@ -175,6 +179,20 @@
document
.
addEventListener
(
'
mousemove
'
,
onDocumentMouseMove
,
false
);
// postprocessing
var
renderModel
=
new
THREE
.
RenderPass
(
scene
,
camera
);
var
effectBloom
=
new
THREE
.
BloomPass
(
1.3
);
var
effectScreen
=
new
THREE
.
ShaderPass
(
THREE
.
ShaderExtras
[
"
screen
"
]
);
effectScreen
.
renderToScreen
=
true
;
composer
=
new
THREE
.
EffectComposer
(
renderer
);
composer
.
addPass
(
renderModel
);
composer
.
addPass
(
effectBloom
);
composer
.
addPass
(
effectScreen
);
}
function
change_uvs
(
geometry
,
unitx
,
unity
,
offsetx
,
offsety
)
{
...
...
@@ -197,58 +215,6 @@
}
function
initPostprocessing
()
{
postprocessing
.
scene
=
new
THREE
.
Scene
();
postprocessing
.
camera
=
new
THREE
.
OrthoCamera
(
window
.
innerWidth
/
-
2
,
window
.
innerWidth
/
2
,
window
.
innerHeight
/
2
,
window
.
innerHeight
/
-
2
,
-
10000
,
10000
);
postprocessing
.
camera
.
position
.
z
=
100
;
var
pars
=
{
minFilter
:
THREE
.
LinearFilter
,
magFilter
:
THREE
.
LinearFilter
,
format
:
THREE
.
RGBFormat
};
postprocessing
.
rtTexture1
=
new
THREE
.
WebGLRenderTarget
(
window
.
innerWidth
,
window
.
innerHeight
,
pars
);
postprocessing
.
rtTexture2
=
new
THREE
.
WebGLRenderTarget
(
512
,
512
,
pars
);
postprocessing
.
rtTexture3
=
new
THREE
.
WebGLRenderTarget
(
512
,
512
,
pars
);
var
screen_shader
=
THREE
.
ShaderExtras
[
"
screen
"
];
var
screen_uniforms
=
THREE
.
UniformsUtils
.
clone
(
screen_shader
.
uniforms
);
screen_uniforms
[
"
tDiffuse
"
].
texture
=
postprocessing
.
rtTexture1
;
screen_uniforms
[
"
opacity
"
].
value
=
1.0
;
postprocessing
.
materialScreen
=
new
THREE
.
MeshShaderMaterial
(
{
uniforms
:
screen_uniforms
,
vertexShader
:
screen_shader
.
vertexShader
,
fragmentShader
:
screen_shader
.
fragmentShader
,
blending
:
THREE
.
AdditiveBlending
,
transparent
:
true
}
);
var
convolution_shader
=
THREE
.
ShaderExtras
[
"
convolution
"
];
var
convolution_uniforms
=
THREE
.
UniformsUtils
.
clone
(
convolution_shader
.
uniforms
);
postprocessing
.
blurx
=
new
THREE
.
Vector2
(
0.001953125
,
0.0
),
postprocessing
.
blury
=
new
THREE
.
Vector2
(
0.0
,
0.001953125
);
convolution_uniforms
[
"
tDiffuse
"
].
texture
=
postprocessing
.
rtTexture1
;
convolution_uniforms
[
"
uImageIncrement
"
].
value
=
postprocessing
.
blurx
;
convolution_uniforms
[
"
cKernel
"
].
value
=
THREE
.
ShaderExtras
.
buildKernel
(
4.0
);
postprocessing
.
materialConvolution
=
new
THREE
.
MeshShaderMaterial
(
{
uniforms
:
convolution_uniforms
,
vertexShader
:
"
#define KERNEL_SIZE 25.0
\n
"
+
convolution_shader
.
vertexShader
,
fragmentShader
:
"
#define KERNEL_SIZE 25
\n
"
+
convolution_shader
.
fragmentShader
}
);
postprocessing
.
quad
=
new
THREE
.
Mesh
(
new
THREE
.
PlaneGeometry
(
window
.
innerWidth
,
window
.
innerHeight
),
postprocessing
.
materialConvolution
);
postprocessing
.
quad
.
position
.
z
=
-
500
;
postprocessing
.
scene
.
addObject
(
postprocessing
.
quad
);
}
function
onDocumentMouseMove
(
event
)
{
mouseX
=
(
event
.
clientX
-
windowHalfX
);
...
...
@@ -321,51 +287,11 @@
}
counter
++
;
counter
++
;
renderer
.
clear
();
composer
.
render
();
if
(
postprocessing
.
enabled
)
{
// Render scene into texture
renderer
.
render
(
scene
,
camera
,
postprocessing
.
rtTexture1
,
true
);
// Render quad with blured scene into texture (convolution pass 1)
postprocessing
.
quad
.
materials
=
[
postprocessing
.
materialConvolution
];
postprocessing
.
materialConvolution
.
uniforms
.
tDiffuse
.
texture
=
postprocessing
.
rtTexture1
;
postprocessing
.
materialConvolution
.
uniforms
.
uImageIncrement
.
value
=
postprocessing
.
blurx
;
renderer
.
render
(
postprocessing
.
scene
,
postprocessing
.
camera
,
postprocessing
.
rtTexture2
,
true
);
// Render quad with blured scene into texture (convolution pass 2)
postprocessing
.
materialConvolution
.
uniforms
.
tDiffuse
.
texture
=
postprocessing
.
rtTexture2
;
postprocessing
.
materialConvolution
.
uniforms
.
uImageIncrement
.
value
=
postprocessing
.
blury
;
renderer
.
render
(
postprocessing
.
scene
,
postprocessing
.
camera
,
postprocessing
.
rtTexture3
,
true
);
// Render original scene with superimposed blur to texture
postprocessing
.
quad
.
materials
=
[
postprocessing
.
materialScreen
];
postprocessing
.
materialScreen
.
uniforms
.
tDiffuse
.
texture
=
postprocessing
.
rtTexture3
;
postprocessing
.
materialScreen
.
uniforms
.
opacity
.
value
=
1.3
;
renderer
.
render
(
postprocessing
.
scene
,
postprocessing
.
camera
,
postprocessing
.
rtTexture1
,
false
);
// Render to screen
postprocessing
.
materialScreen
.
uniforms
.
tDiffuse
.
texture
=
postprocessing
.
rtTexture1
;
renderer
.
render
(
postprocessing
.
scene
,
postprocessing
.
camera
);
}
else
{
renderer
.
render
(
scene
,
camera
);
}
}
...
...
examples/webgl_particles_dynamic.html
浏览文件 @
743363b5
...
...
@@ -43,6 +43,12 @@
<script
type=
"text/javascript"
src=
"js/ShaderExtras.js"
></script>
<script
type=
"text/javascript"
src=
"js/postprocessing/EffectComposer.js"
></script>
<script
type=
"text/javascript"
src=
"js/postprocessing/RenderPass.js"
></script>
<script
type=
"text/javascript"
src=
"js/postprocessing/BloomPass.js"
></script>
<script
type=
"text/javascript"
src=
"js/postprocessing/ShaderPass.js"
></script>
<script
type=
"text/javascript"
src=
"js/postprocessing/FilmPass.js"
></script>
<script
type=
"text/javascript"
src=
"js/Stats.js"
></script>
<script
type=
"text/javascript"
src=
"js/Detector.js"
></script>
<script
type=
"text/javascript"
src=
"js/RequestAnimationFrame.js"
></script>
...
...
@@ -67,8 +73,7 @@
var
total
=
0
,
totaln
=
0
;
var
postprocessing1
=
{};
var
postprocessing2
=
{};
var
composer
;
init
();
animate
();
...
...
@@ -90,9 +95,6 @@
directionalLight
.
position
.
normalize
();
scene
.
addLight
(
directionalLight
);
initPostprocessingBloom
(
postprocessing1
);
initPostprocessingFocus
(
postprocessing2
);
aloader
=
new
THREE
.
JSONLoader
(
);
bloader
=
new
THREE
.
BinaryLoader
(
true
);
...
...
@@ -132,6 +134,8 @@
}
}
);
//
renderer
=
new
THREE
.
WebGLRenderer
(
{
clearColor
:
0x000000
,
clearAlpha
:
1
,
antialias
:
false
}
);
renderer
.
setSize
(
SCREEN_WIDTH
,
SCREEN_HEIGHT
);
renderer
.
autoClear
=
false
;
...
...
@@ -140,11 +144,15 @@
renderer
.
setClearColor
(
scene
.
fog
.
color
,
1
);
//
stats
=
new
Stats
();
stats
.
domElement
.
style
.
position
=
'
absolute
'
;
stats
.
domElement
.
style
.
top
=
'
0px
'
;
//container.appendChild( stats.domElement );
//
parent
=
new
THREE
.
Object3D
();
scene
.
addObject
(
parent
);
...
...
@@ -156,6 +164,22 @@
totaln
+=
1
;
total
+=
grid
.
geometry
.
vertices
.
length
;
// postprocessing
var
renderModel
=
new
THREE
.
RenderPass
(
scene
,
camera
);
var
effectBloom
=
new
THREE
.
BloomPass
(
0.75
);
var
effectFilm
=
new
THREE
.
FilmPass
(
0.5
,
0.5
,
1448
,
false
);
var
effectFocus
=
new
THREE
.
ShaderPass
(
generateFocusShader
(),
"
map
"
);
effectFocus
.
renderToScreen
=
true
;
composer
=
new
THREE
.
EffectComposer
(
renderer
);
composer
.
addPass
(
renderModel
);
composer
.
addPass
(
effectBloom
);
composer
.
addPass
(
effectFilm
);
composer
.
addPass
(
effectFocus
);
}
function
createMesh
(
originalGeometry
,
scene
,
scale
,
x
,
y
,
z
,
color
,
dynamic
)
{
...
...
@@ -240,30 +264,20 @@
}
function
initPostprocessingFocus
(
effect
)
{
effect
.
type
=
"
focus
"
;
effect
.
scene
=
new
THREE
.
Scene
();
function
generateFocusShader
()
{
effect
.
camera
=
new
THREE
.
OrthoCamera
(
SCREEN_WIDTH
/
-
2
,
SCREEN_WIDTH
/
2
,
SCREEN_HEIGHT
/
2
,
SCREEN_HEIGHT
/
-
2
,
-
10000
,
10000
);
effect
.
camera
.
position
.
z
=
100
;
var
shader
=
{
effect
.
texture
=
new
THREE
.
WebGLRenderTarget
(
SCREEN_WIDTH
,
SCREEN_HEIGHT
,
{
minFilter
:
THREE
.
LinearFilter
,
magFilter
:
THREE
.
NearestFilter
,
format
:
THREE
.
RGBFormat
}
);
uniforms
:
{
var
heatUniforms
=
{
"
map
"
:
{
type
:
"
t
"
,
value
:
0
,
texture
:
effect
.
texture
},
"
map
"
:
{
type
:
"
t
"
,
value
:
0
,
texture
:
null
},
"
screenWidth
"
:
{
type
:
"
f
"
,
value
:
SCREEN_WIDTH
},
"
screenHeight
"
:
{
type
:
"
f
"
,
value
:
SCREEN_HEIGHT
},
"
sampleDistance
"
:
{
type
:
"
f
"
,
value
:
0.94
},
"
waveFactor
"
:
{
type
:
"
f
"
,
value
:
0.00125
}
};
effect
.
materialHeat
=
new
THREE
.
MeshShaderMaterial
(
{
},
uniforms
:
heatUniforms
,
vertexShader
:
[
"
varying vec2 vUv;
"
,
...
...
@@ -334,79 +348,12 @@
].
join
(
"
\n
"
)
}
)
;
};
effect
.
quad
=
new
THREE
.
Mesh
(
new
THREE
.
PlaneGeometry
(
SCREEN_WIDTH
,
SCREEN_HEIGHT
),
effect
.
materialHeat
);
effect
.
quad
.
position
.
z
=
-
500
;
effect
.
scene
.
addObject
(
effect
.
quad
);
return
shader
;
}
function
initPostprocessingBloom
(
effect
)
{
effect
.
type
=
"
bloomnoise
"
;
effect
.
scene
=
new
THREE
.
Scene
();
effect
.
camera
=
new
THREE
.
OrthoCamera
(
SCREEN_WIDTH
/
-
2
,
SCREEN_WIDTH
/
2
,
SCREEN_HEIGHT
/
2
,
SCREEN_HEIGHT
/
-
2
,
-
10000
,
10000
);
effect
.
camera
.
position
.
z
=
100
;
var
pars
=
{
minFilter
:
THREE
.
LinearFilter
,
magFilter
:
THREE
.
LinearFilter
,
format
:
THREE
.
RGBFormat
};
effect
.
rtTexture1
=
new
THREE
.
WebGLRenderTarget
(
SCREEN_WIDTH
,
SCREEN_HEIGHT
,
pars
);
effect
.
rtTexture2
=
new
THREE
.
WebGLRenderTarget
(
256
,
512
,
pars
);
effect
.
rtTexture3
=
new
THREE
.
WebGLRenderTarget
(
512
,
256
,
pars
);
var
screen_shader
=
THREE
.
ShaderExtras
[
"
screen
"
];
var
screen_uniforms
=
THREE
.
UniformsUtils
.
clone
(
screen_shader
.
uniforms
);
screen_uniforms
[
"
tDiffuse
"
].
texture
=
effect
.
rtTexture3
;
screen_uniforms
[
"
opacity
"
].
value
=
0.75
;
effect
.
materialScreen
=
new
THREE
.
MeshShaderMaterial
(
{
uniforms
:
screen_uniforms
,
vertexShader
:
screen_shader
.
vertexShader
,
fragmentShader
:
screen_shader
.
fragmentShader
,
blending
:
THREE
.
AdditiveBlending
,
transparent
:
true
}
);
var
convolution_shader
=
THREE
.
ShaderExtras
[
"
convolution
"
];
var
convolution_uniforms
=
THREE
.
UniformsUtils
.
clone
(
convolution_shader
.
uniforms
);
effect
.
blurx
=
new
THREE
.
Vector2
(
0.001953125
,
0.0
),
effect
.
blury
=
new
THREE
.
Vector2
(
0.0
,
0.001953125
);
convolution_uniforms
[
"
tDiffuse
"
].
texture
=
effect
.
rtTexture1
;
convolution_uniforms
[
"
uImageIncrement
"
].
value
=
effect
.
blurx
;
convolution_uniforms
[
"
cKernel
"
].
value
=
THREE
.
ShaderExtras
.
buildKernel
(
4.0
);
effect
.
materialConvolution
=
new
THREE
.
MeshShaderMaterial
(
{
uniforms
:
convolution_uniforms
,
vertexShader
:
"
#define KERNEL_SIZE 25.0
\n
"
+
convolution_shader
.
vertexShader
,
fragmentShader
:
"
#define KERNEL_SIZE 25
\n
"
+
convolution_shader
.
fragmentShader
}
);
var
film_shader
=
THREE
.
ShaderExtras
[
"
film
"
];
var
film_uniforms
=
THREE
.
UniformsUtils
.
clone
(
film_shader
.
uniforms
);
film_uniforms
[
"
tDiffuse
"
].
texture
=
effect
.
rtTexture1
;
effect
.
materialFilm
=
new
THREE
.
MeshShaderMaterial
(
{
uniforms
:
film_uniforms
,
vertexShader
:
film_shader
.
vertexShader
,
fragmentShader
:
film_shader
.
fragmentShader
}
);
effect
.
materialFilm
.
uniforms
.
grayscale
.
value
=
0
;
effect
.
materialFilm
.
uniforms
.
nIntensity
.
value
=
0.5
;
effect
.
materialFilm
.
uniforms
.
sIntensity
.
value
=
0.5
;
effect
.
materialFilm
.
uniforms
.
sCount
.
value
=
1448
;
effect
.
quad
=
new
THREE
.
Mesh
(
new
THREE
.
PlaneGeometry
(
SCREEN_WIDTH
,
SCREEN_HEIGHT
),
effect
.
materialConvolution
);
effect
.
quad
.
position
.
z
=
-
500
;
effect
.
scene
.
addObject
(
effect
.
quad
);
}
var
j
,
jl
,
cm
,
data
,
vertices
,
vertices_tmp
,
vl
,
d
,
vt
,
time
,
oldTime
,
delta
;
...
...
@@ -591,46 +538,7 @@
}
renderer
.
clear
();
// BLOOM
// Render scene into texture
renderer
.
render
(
scene
,
camera
,
postprocessing1
.
rtTexture1
,
true
);
// Render quad with blured scene into texture (convolution pass 1)
postprocessing1
.
quad
.
materials
[
0
]
=
postprocessing1
.
materialConvolution
;
postprocessing1
.
materialConvolution
.
uniforms
.
tDiffuse
.
texture
=
postprocessing1
.
rtTexture1
;
postprocessing1
.
materialConvolution
.
uniforms
.
uImageIncrement
.
value
=
postprocessing1
.
blurx
;
renderer
.
render
(
postprocessing1
.
scene
,
postprocessing1
.
camera
,
postprocessing1
.
rtTexture2
,
true
);
// Render quad with blured scene into texture (convolution pass 2)
postprocessing1
.
materialConvolution
.
uniforms
.
tDiffuse
.
texture
=
postprocessing1
.
rtTexture2
;
postprocessing1
.
materialConvolution
.
uniforms
.
uImageIncrement
.
value
=
postprocessing1
.
blury
;
renderer
.
render
(
postprocessing1
.
scene
,
postprocessing1
.
camera
,
postprocessing1
.
rtTexture3
,
true
);
// Render original scene with superimposed blur to texture
postprocessing1
.
quad
.
materials
[
0
]
=
postprocessing1
.
materialScreen
;
renderer
.
render
(
postprocessing1
.
scene
,
postprocessing1
.
camera
,
postprocessing1
.
rtTexture1
,
false
);
// NOISE + SCANLINES
postprocessing1
.
materialFilm
.
uniforms
.
time
.
value
+=
0.01
;
postprocessing1
.
quad
.
materials
[
0
]
=
postprocessing1
.
materialFilm
;
renderer
.
render
(
postprocessing1
.
scene
,
postprocessing1
.
camera
,
postprocessing2
.
texture
,
true
);
// FOCUS
renderer
.
render
(
postprocessing2
.
scene
,
postprocessing2
.
camera
);
composer
.
render
(
0.01
);
}
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录