Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Ablesons
three.js
提交
afb4b94b
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,发现更多精彩内容 >>
未验证
提交
afb4b94b
编写于
5月 26, 2018
作者:
M
Michael Herzog
提交者:
GitHub
5月 26, 2018
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Revert "DOF2: Fix broken example"
上级
9b09e0fa
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
93 addition
and
24 deletion
+93
-24
examples/js/shaders/BokehShader2.js
examples/js/shaders/BokehShader2.js
+47
-16
examples/webgl_postprocessing_dof2.html
examples/webgl_postprocessing_dof2.html
+46
-8
未找到文件。
examples/js/shaders/BokehShader2.js
浏览文件 @
afb4b94b
...
...
@@ -26,7 +26,9 @@ THREE.BokehShader = {
"
maxblur
"
:
{
value
:
1.0
},
"
showFocus
"
:
{
value
:
0
},
"
manualdof
"
:
{
value
:
0
},
"
vignetting
"
:
{
value
:
0
},
"
depthblur
"
:
{
value
:
0
},
"
threshold
"
:
{
value
:
0.5
},
...
...
@@ -75,6 +77,7 @@ THREE.BokehShader = {
"
uniform float focalDepth; //focal distance value in meters, but you may use autofocus option below
"
,
"
uniform float focalLength; //focal length in mm
"
,
"
uniform float fstop; //f-stop value
"
,
"
uniform bool showFocus; //show debug focus point and focal range (red = focal point, green = focal range)
"
,
"
/*
"
,
"
make sure that these two values are the same for your camera, otherwise distances will be wrong.
"
,
...
...
@@ -99,6 +102,12 @@ THREE.BokehShader = {
"
float CoC = 0.03; //circle of confusion size in mm (35mm film = 0.03mm)
"
,
"
uniform bool vignetting; // use optical lens vignetting
"
,
"
float vignout = 1.3; // vignetting outer border
"
,
"
float vignin = 0.0; // vignetting inner border
"
,
"
float vignfade = 22.0; // f-stops till vignete fades
"
,
"
uniform bool shaderFocus;
"
,
"
// disable if you use external focalDepth value
"
,
...
...
@@ -141,14 +150,6 @@ THREE.BokehShader = {
"
#endif
"
,
"
}
"
,
"
float getViewZ( const in float depth ) {
"
,
"
#if PERSPECTIVE_CAMERA == 1
"
,
"
return perspectiveDepthToViewZ( depth, znear, zfar );
"
,
"
#else
"
,
"
return orthographicDepthToViewZ( depth, znear, zfar );
"
,
"
#endif
"
,
"
}
"
,
"
float penta(vec2 coords) {
"
,
"
//pentagonal shape
"
,
"
float scale = float(rings) - 1.3;
"
,
...
...
@@ -234,6 +235,28 @@ THREE.BokehShader = {
"
return col+mix(vec3(0.0),col,thresh*blur);
"
,
"
}
"
,
"
vec3 debugFocus(vec3 col, float blur, float depth) {
"
,
"
float edge = 0.002*depth; //distance based edge smoothing
"
,
"
float m = clamp(smoothstep(0.0,edge,blur),0.0,1.0);
"
,
"
float e = clamp(smoothstep(1.0-edge,1.0,blur),0.0,1.0);
"
,
"
col = mix(col,vec3(1.0,0.5,0.0),(1.0-m)*0.6);
"
,
"
col = mix(col,vec3(0.0,0.5,1.0),((1.0-e)-(1.0-m))*0.2);
"
,
"
return col;
"
,
"
}
"
,
"
float linearize(float depth) {
"
,
"
return -zfar * znear / (depth * (zfar - znear) - zfar);
"
,
"
}
"
,
"
float vignette() {
"
,
"
float dist = distance(vUv.xy, vec2(0.5,0.5));
"
,
"
dist = smoothstep(vignout+(fstop/vignfade), vignin+(fstop/vignfade), dist);
"
,
"
return clamp(dist,0.0,1.0);
"
,
"
}
"
,
"
float gather(float i, float j, int ringsamples, inout vec3 col, float w, float h, float blur) {
"
,
"
float rings2 = float(rings);
"
,
"
float step = PI*2.0 / float(ringsamples);
"
,
...
...
@@ -250,20 +273,20 @@ THREE.BokehShader = {
"
void main() {
"
,
"
//scene depth calculation
"
,
"
float depth =
getViewZ
( getDepth( vUv.xy ) );
"
,
"
float depth =
linearize
( getDepth( vUv.xy ) );
"
,
"
// Blur depth?
"
,
"
if (depthblur) {
"
,
"
depth =
getViewZ
(bdepth(vUv.xy));
"
,
"
depth =
linearize
(bdepth(vUv.xy));
"
,
"
}
"
,
"
//focal plane calculation
"
,
"
float fDepth =
- focalDepth;
"
,
// viewZ is negative
"
float fDepth =
focalDepth;
"
,
"
if (shaderFocus) {
"
,
"
fDepth =
getViewZ
( getDepth( focusCoords ) );
"
,
"
fDepth =
linearize
( getDepth( focusCoords ) );
"
,
"
}
"
,
...
...
@@ -272,14 +295,14 @@ THREE.BokehShader = {
"
float blur = 0.0;
"
,
"
if (manualdof) {
"
,
"
float a = depth
-
fDepth; // Focal plane
"
,
"
float a = depth
-
fDepth; // Focal plane
"
,
"
float b = (a-fdofstart)/fdofdist; // Far DoF
"
,
"
float c = (-a-ndofstart)/ndofdist; // Near Dof
"
,
"
blur = (a>0.0) ? b : c;
"
,
"
} else {
"
,
"
float f = focalLength;
"
,
"
float d = fDepth
;
"
,
"
float o = depth
;
"
,
"
float f = focalLength;
// focal length in mm
"
,
"
float d = fDepth
*1000.0; // focal plane in mm
"
,
"
float o = depth
*1000.0; // depth in mm
"
,
"
float a = (o*f)/(o-f);
"
,
"
float b = (d*f)/(d-f);
"
,
...
...
@@ -325,6 +348,14 @@ THREE.BokehShader = {
"
col /= s; //divide by sample count
"
,
"
}
"
,
"
if (showFocus) {
"
,
"
col = debugFocus(col, blur, depth);
"
,
"
}
"
,
"
if (vignetting) {
"
,
"
col *= vignette();
"
,
"
}
"
,
"
gl_FragColor.rgb = col;
"
,
"
gl_FragColor.a = 1.0;
"
,
"
}
"
...
...
examples/webgl_postprocessing_dof2.html
浏览文件 @
afb4b94b
...
...
@@ -226,11 +226,13 @@ Use WEBGL Depth buffer support?
jsDepthCalculation
:
true
,
shaderFocus
:
false
,
fstop
:
10
,
fstop
:
2.2
,
maxblur
:
1.0
,
showFocus
:
false
,
focalDepth
:
2.8
,
manualdof
:
false
,
vignetting
:
false
,
depthblur
:
false
,
threshold
:
0.5
,
...
...
@@ -272,10 +274,13 @@ Use WEBGL Depth buffer support?
gui
.
add
(
effectController
,
'
shaderFocus
'
).
onChange
(
matChanger
);
gui
.
add
(
effectController
,
'
focalDepth
'
,
0.0
,
200.0
).
listen
().
onChange
(
matChanger
);
gui
.
add
(
effectController
,
'
fstop
'
,
1
,
50
,
0.
1
).
onChange
(
matChanger
);
gui
.
add
(
effectController
,
'
fstop
'
,
0.1
,
22
,
0.00
1
).
onChange
(
matChanger
);
gui
.
add
(
effectController
,
'
maxblur
'
,
0.0
,
5.0
,
0.025
).
onChange
(
matChanger
);
gui
.
add
(
effectController
,
'
showFocus
'
).
onChange
(
matChanger
);
gui
.
add
(
effectController
,
'
manualdof
'
).
onChange
(
matChanger
);
gui
.
add
(
effectController
,
'
vignetting
'
).
onChange
(
matChanger
);
gui
.
add
(
effectController
,
'
depthblur
'
).
onChange
(
matChanger
);
gui
.
add
(
effectController
,
'
threshold
'
,
0
,
1
,
0.001
).
onChange
(
matChanger
);
...
...
@@ -284,8 +289,11 @@ Use WEBGL Depth buffer support?
gui
.
add
(
effectController
,
'
fringe
'
,
0
,
5
,
0.001
).
onChange
(
matChanger
);
gui
.
add
(
effectController
,
'
focalLength
'
,
16
,
80
,
0.001
).
onChange
(
matChanger
);
gui
.
add
(
effectController
,
'
noise
'
).
onChange
(
matChanger
);
gui
.
add
(
effectController
,
'
dithering
'
,
0
,
0.001
,
0.0001
).
onChange
(
matChanger
);
gui
.
add
(
effectController
,
'
pentagon
'
).
onChange
(
matChanger
);
gui
.
add
(
shaderSettings
,
'
rings
'
,
1
,
8
).
step
(
1
).
onChange
(
shaderUpdate
);
...
...
@@ -370,8 +378,7 @@ Use WEBGL Depth buffer support?
defines
:
{
RINGS
:
shaderSettings
.
rings
,
SAMPLES
:
shaderSettings
.
samples
,
DEPTH_PACKING
:
1
,
// RGBADepth
PERSPECTIVE_CAMERA
:
1
DEPTH_PACKING
:
1
// RGBADepth
}
}
);
...
...
@@ -399,6 +406,28 @@ Use WEBGL Depth buffer support?
}
function
linearize
(
depth
)
{
var
zfar
=
camera
.
far
;
var
znear
=
camera
.
near
;
return
-
zfar
*
znear
/
(
depth
*
(
zfar
-
znear
)
-
zfar
);
}
function
smoothstep
(
near
,
far
,
depth
)
{
var
x
=
saturate
(
(
depth
-
near
)
/
(
far
-
near
)
);
return
x
*
x
*
(
3
-
2
*
x
);
}
function
saturate
(
x
)
{
return
Math
.
max
(
0
,
Math
.
min
(
1
,
x
)
);
}
function
render
()
{
var
time
=
Date
.
now
()
*
0.00015
;
...
...
@@ -417,13 +446,22 @@ Use WEBGL Depth buffer support?
var
intersects
=
raycaster
.
intersectObjects
(
scene
.
children
,
true
);
var
targetDistance
=
(
intersects
.
length
>
0
)
?
intersects
[
0
].
distance
:
1000
;
distance
+=
(
targetDistance
-
distance
)
*
0.05
;
if
(
intersects
.
length
>
0
)
{
var
targetDistance
=
intersects
[
0
].
distance
;
postprocessing
.
bokeh_uniforms
[
'
focalDepth
'
].
value
=
distance
;
distance
+=
(
targetDistance
-
distance
)
*
0.03
;
effectController
[
'
focalDepth
'
]
=
distance
;
var
sdistance
=
smoothstep
(
camera
.
near
,
camera
.
far
,
distance
);
var
ldistance
=
linearize
(
1
-
sdistance
);
postprocessing
.
bokeh_uniforms
[
'
focalDepth
'
].
value
=
ldistance
;
effectController
[
'
focalDepth
'
]
=
ldistance
;
}
}
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录