Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
车家大少爷
three.js
提交
d21e2691
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,发现更多精彩内容 >>
提交
d21e2691
编写于
3月 31, 2019
作者:
T
Temdog007
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Add selective bloom example
上级
067a9301
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
314 addition
and
0 deletion
+314
-0
examples/webgl_postprocessing_unreal_bloom_selective.html
examples/webgl_postprocessing_unreal_bloom_selective.html
+314
-0
未找到文件。
examples/webgl_postprocessing_unreal_bloom_selective.html
0 → 100644
浏览文件 @
d21e2691
<!DOCTYPE html>
<html
lang=
"en"
>
<head>
<title>
three.js webgl - postprocessing - unreal bloom selective
</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
{
color
:
#fff
;
font-family
:
Monospace
;
font-size
:
13px
;
text-align
:
center
;
background-color
:
#fff
;
margin
:
0px
;
overflow
:
hidden
;
}
#info
{
position
:
absolute
;
top
:
0px
;
width
:
100%
;
padding
:
5px
;
}
#info
p
{
max-width
:
600px
;
margin-left
:
auto
;
margin-right
:
auto
;
padding
:
0
2em
;
}
a
{
color
:
#2983ff
;
}
</style>
</head>
<body>
<div
id=
"container"
></div>
<div
id=
"info"
>
<a
href=
"http://threejs.org"
target=
"_blank"
rel=
"noopener"
>
three.js
</a>
Click on a box to toggle bloom
</div>
<script
src=
"../build/three.js"
></script>
<script
src=
"js/libs/stats.min.js"
></script>
<script
src=
"js/libs/dat.gui.min.js"
></script>
<script
src=
"js/postprocessing/EffectComposer.js"
></script>
<script
src=
"js/postprocessing/RenderPass.js"
></script>
<script
src=
"js/postprocessing/ShaderPass.js"
></script>
<script
src=
"js/shaders/CopyShader.js"
></script>
<script
src=
"js/shaders/LuminosityHighPassShader.js"
></script>
<script
src=
"js/postprocessing/UnrealBloomPass.js"
></script>
<script
type=
"x-shader/x-vertex"
id=
"vertexshader"
>
varying
vec2
vUv
;
void
main
()
{
vUv
=
uv
;
gl_Position
=
projectionMatrix
*
modelViewMatrix
*
vec4
(
position
,
1.0
);
}
</script>
<script
type=
"x-shader/x-fragment"
id=
"fragmentshader"
>
uniform
sampler2D
baseTexture
;
uniform
sampler2D
glowTexture
;
uniform
sampler2D
shadowTexture
;
uniform
vec3
color
;
uniform
float
intensity
;
varying
vec2
vUv
;
void
main
()
{
//vec4 shadow = texture2D(shadowTexture, vUv);
//if(shadow.a > 0.0) {discard;}
gl_FragColor
=
texture2D
(
baseTexture
,
vUv
)
+
vec4
(
color
,
1.0
)
*
texture2D
(
glowTexture
,
vUv
)
*
intensity
;
}
</script>
<script>
var
scene
,
camera
,
stats
;
var
renderer
;
var
ENTIRE_SCENE
=
0
,
BLOOM_SCENE
=
1
,
SHADOW_SCENE
=
2
;
var
params
=
{
exposure
:
1
,
bloomStrength
:
1.5
,
bloomThreshold
:
0
,
bloomRadius
:
0
,
showBloom
:
true
,
rows
:
6
,
columns
:
6
,
size
:
2
,
cameraAngle
:
Math
.
PI
*
0.5
};
var
container
=
document
.
getElementById
(
'
container
'
);
stats
=
new
Stats
();
container
.
appendChild
(
stats
.
dom
);
renderer
=
new
THREE
.
WebGLRenderer
(
{
antialias
:
true
}
);
renderer
.
setPixelRatio
(
window
.
devicePixelRatio
);
renderer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
renderer
.
toneMapping
=
THREE
.
ReinhardToneMapping
;
document
.
body
.
appendChild
(
renderer
.
domElement
);
scene
=
new
THREE
.
Scene
();
camera
=
new
THREE
.
PerspectiveCamera
(
40
,
window
.
innerWidth
/
window
.
innerHeight
,
1
,
100
);
camera
.
position
.
set
(
0
,
0
,
30
);
camera
.
lookAt
(
0
,
0
,
0
);
camera
.
updateProjectionMatrix
();
scene
.
add
(
new
THREE
.
AmbientLight
(
0x404040
)
);
var
renderScene
=
new
THREE
.
RenderPass
(
scene
,
camera
);
var
shadowComposer
=
new
THREE
.
EffectComposer
(
renderer
);
shadowComposer
.
renderToScreen
=
false
;
shadowComposer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
shadowComposer
.
addPass
(
renderScene
);
var
bloomPass
=
new
THREE
.
UnrealBloomPass
(
new
THREE
.
Vector2
(
window
.
innerWidth
,
window
.
innerHeight
),
1.5
,
0.4
,
0.85
);
bloomPass
.
threshold
=
params
.
bloomThreshold
;
bloomPass
.
strength
=
params
.
bloomStrength
;
bloomPass
.
radius
=
params
.
bloomRadius
;
var
bloomComposer
=
new
THREE
.
EffectComposer
(
renderer
);
bloomComposer
.
renderToScreen
=
false
;
bloomComposer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
bloomComposer
.
addPass
(
renderScene
);
bloomComposer
.
addPass
(
bloomPass
);
var
finalPass
=
new
THREE
.
ShaderPass
(
new
THREE
.
ShaderMaterial
({
uniforms
:
{
baseTexture
:
{
value
:
null
},
glowTexture
:
{
value
:
bloomComposer
.
renderTarget2
.
texture
},
// shadowTexture: {value : shadowComposer.renderTarget2.texture},
intensity
:
{
value
:
1.0
},
color
:
{
value
:
new
THREE
.
Color
(
1.0
,
1.0
,
1.0
)}
},
vertexShader
:
document
.
getElementById
(
'
vertexshader
'
).
textContent
,
fragmentShader
:
document
.
getElementById
(
'
fragmentshader
'
).
textContent
,
defines
:
{}
}),
"
baseTexture
"
);
finalPass
.
needsSwap
=
true
;
var
finalComposer
=
new
THREE
.
EffectComposer
(
renderer
);
finalComposer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
finalComposer
.
addPass
(
renderScene
);
finalComposer
.
addPass
(
finalPass
);
setupBoxes
();
var
raycaster
=
new
THREE
.
Raycaster
();
var
mouse
=
new
THREE
.
Vector2
();
window
.
addEventListener
(
'
click
'
,
onDocumentMouseClick
,
false
);
var
gui
=
new
dat
.
GUI
();
var
folder
=
gui
.
addFolder
(
'
Bloom Parameters
'
)
folder
.
add
(
params
,
'
exposure
'
,
0.1
,
2
).
onChange
(
function
(
value
)
{
renderer
.
toneMappingExposure
=
Math
.
pow
(
value
,
4.0
);
}
);
folder
.
add
(
params
,
'
bloomThreshold
'
,
0.0
,
1.0
).
onChange
(
function
(
value
)
{
bloomPass
.
threshold
=
Number
(
value
);
}
);
folder
.
add
(
params
,
'
bloomStrength
'
,
0.0
,
3.0
).
onChange
(
function
(
value
)
{
bloomPass
.
strength
=
Number
(
value
);
}
);
folder
.
add
(
params
,
'
bloomRadius
'
,
0.0
,
1.0
).
step
(
0.01
).
onChange
(
function
(
value
)
{
bloomPass
.
radius
=
Number
(
value
);
}
);
folder
.
add
(
params
,
'
showBloom
'
).
onChange
(
function
(
value
)
{
finalPass
.
enabled
=
value
;
});
folder
.
open
();
folder
=
gui
.
addFolder
(
'
Object parameters
'
);
folder
.
add
(
params
,
'
rows
'
,
1
,
20
).
step
(
1
).
onChange
(
setupBoxes
);
folder
.
add
(
params
,
'
columns
'
,
1
,
20
).
step
(
1
).
onChange
(
setupBoxes
);
folder
.
add
(
params
,
'
size
'
,
0.1
,
3
).
onChange
(
setupBoxes
);
folder
=
gui
.
addFolder
(
'
Camera Position
'
);
folder
.
add
(
params
,
'
cameraAngle
'
,
0
,
Math
.
PI
*
2
).
step
(
0.001
).
onChange
(
function
(
value
)
{
camera
.
position
.
x
=
Math
.
cos
(
value
)
*
30
;
camera
.
position
.
z
=
Math
.
sin
(
value
)
*
30
;
camera
.
lookAt
(
0
,
0
,
0
);
camera
.
updateProjectionMatrix
();
})
animate
();
function
onDocumentMouseClick
(
event
)
{
event
.
preventDefault
();
mouse
.
x
=
(
event
.
clientX
/
window
.
innerWidth
)
*
2
-
1
;
mouse
.
y
=
-
(
event
.
clientY
/
window
.
innerHeight
)
*
2
+
1
;
raycaster
.
setFromCamera
(
mouse
,
camera
);
var
intersects
=
raycaster
.
intersectObjects
(
scene
.
children
);
if
(
intersects
.
length
>
0
)
{
var
object
=
intersects
[
0
].
object
;
object
.
layers
.
toggle
(
BLOOM_SCENE
);
if
(
object
.
layers
.
test
(
BLOOM_SCENE
))
{
object
.
layers
.
disable
(
SHADOW_SCENE
);
}
else
{
object
.
layers
.
enable
(
SHADOW_SCENE
);
}
}
}
window
.
onresize
=
function
()
{
var
width
=
window
.
innerWidth
;
var
height
=
window
.
innerHeight
;
camera
.
aspect
=
width
/
height
;
camera
.
updateProjectionMatrix
();
renderer
.
setSize
(
width
,
height
);
// render targets are resized by respective composers
bloomComposer
.
setSize
(
width
,
height
);
finalComposer
.
setSize
(
width
,
height
);
};
function
setupBoxes
()
{
var
columns
=
params
.
columns
;
var
rows
=
params
.
rows
;
var
size
=
params
.
size
;
scene
.
children
.
length
=
0
;
for
(
var
x
=
-
columns
*
size
/
2
;
x
<
columns
*
size
/
2
;
x
+=
size
)
{
for
(
var
y
=
-
rows
*
size
/
2
;
y
<
rows
*
size
/
2
;
y
+=
size
)
{
var
box
=
new
THREE
.
Mesh
(
new
THREE
.
BoxBufferGeometry
(
size
,
size
,
size
),
new
THREE
.
MeshBasicMaterial
({
color
:
Math
.
floor
(
Math
.
random
()
*
0xffffff
)
}));
box
.
layers
.
enable
(
SHADOW_SCENE
);
box
.
position
.
set
(
x
,
y
,
0
);
scene
.
add
(
box
);
}
}
}
function
animate
()
{
requestAnimationFrame
(
animate
);
stats
.
update
();
// render scene with shadows
camera
.
layers
.
set
(
SHADOW_SCENE
);
shadowComposer
.
render
();
// render scene with bloom
camera
.
layers
.
set
(
BLOOM_SCENE
);
bloomComposer
.
render
();
// render scene the entire scene
// render bloom on top of scene but discard pixels where the shadows are present
camera
.
layers
.
set
(
ENTIRE_SCENE
);
finalComposer
.
render
();
}
</script>
</body>
</html>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录