Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
车家大少爷
three.js
提交
80d3799c
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,发现更多精彩内容 >>
提交
80d3799c
编写于
5月 27, 2018
作者:
M
Mugen87
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
BokehShader2: Fix Depth Sampling
上级
cce7e317
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
91 addition
and
24 deletion
+91
-24
examples/js/cameras/CinematicCamera.js
examples/js/cameras/CinematicCamera.js
+14
-6
examples/js/shaders/BokehShader2.js
examples/js/shaders/BokehShader2.js
+51
-12
examples/webgl_postprocessing_dof2.html
examples/webgl_postprocessing_dof2.html
+26
-6
未找到文件。
examples/js/cameras/CinematicCamera.js
浏览文件 @
80d3799c
...
@@ -5,20 +5,28 @@
...
@@ -5,20 +5,28 @@
* @author kaypiKun
* @author kaypiKun
*/
*/
THREE
.
CinematicCamera
=
function
(
fov
,
aspect
,
near
,
far
)
{
THREE
.
CinematicCamera
=
function
(
fov
,
aspect
,
near
,
far
)
{
THREE
.
PerspectiveCamera
.
call
(
this
,
fov
,
aspect
,
near
,
far
);
THREE
.
PerspectiveCamera
.
call
(
this
,
fov
,
aspect
,
near
,
far
);
this
.
type
=
"
CinematicCamera
"
;
this
.
type
=
'
CinematicCamera
'
;
this
.
postprocessing
=
{
enabled
:
true
};
this
.
postprocessing
=
{
enabled
:
true
};
this
.
shaderSettings
=
{
this
.
shaderSettings
=
{
rings
:
3
,
rings
:
3
,
samples
:
4
samples
:
4
};
};
this
.
material_depth
=
new
THREE
.
MeshDepthMaterial
();
var
depthShader
=
THREE
.
BokehDepthShader
;
this
.
material_depth
.
depthPacking
=
THREE
.
RGBADepthPacking
;
this
.
materialDepth
=
new
THREE
.
ShaderMaterial
(
{
uniforms
:
depthShader
.
uniforms
,
vertexShader
:
depthShader
.
vertexShader
,
fragmentShader
:
depthShader
.
fragmentShader
}
);
this
.
materialDepth
.
uniforms
[
'
mNear
'
].
value
=
near
;
this
.
materialDepth
.
uniforms
[
'
mFar
'
].
value
=
far
;
// In case of cinematicCamera, having a default lens set is important
// In case of cinematicCamera, having a default lens set is important
this
.
setLens
();
this
.
setLens
();
...
@@ -178,7 +186,7 @@ THREE.CinematicCamera.prototype.renderCinematic = function ( scene, renderer ) {
...
@@ -178,7 +186,7 @@ THREE.CinematicCamera.prototype.renderCinematic = function ( scene, renderer ) {
// Render depth into texture
// Render depth into texture
scene
.
overrideMaterial
=
this
.
material
_d
epth
;
scene
.
overrideMaterial
=
this
.
material
D
epth
;
renderer
.
render
(
scene
,
camera
,
this
.
postprocessing
.
rtTextureDepth
,
true
);
renderer
.
render
(
scene
,
camera
,
this
.
postprocessing
.
rtTextureDepth
,
true
);
// Render bokeh composite
// Render bokeh composite
...
...
examples/js/shaders/BokehShader2.js
浏览文件 @
80d3799c
...
@@ -142,14 +142,6 @@ THREE.BokehShader = {
...
@@ -142,14 +142,6 @@ THREE.BokehShader = {
"
//------------------------------------------
"
,
"
//------------------------------------------
"
,
"
float getDepth( const in vec2 screenPosition ) {
"
,
"
#if DEPTH_PACKING == 1
"
,
"
return unpackRGBAToDepth( texture2D( tDepth, screenPosition ) );
"
,
"
#else
"
,
"
return texture2D( tDepth, screenPosition ).x;
"
,
"
#endif
"
,
"
}
"
,
"
float penta(vec2 coords) {
"
,
"
float penta(vec2 coords) {
"
,
"
//pentagonal shape
"
,
"
//pentagonal shape
"
,
"
float scale = float(rings) - 1.3;
"
,
"
float scale = float(rings) - 1.3;
"
,
...
@@ -211,7 +203,7 @@ THREE.BokehShader = {
...
@@ -211,7 +203,7 @@ THREE.BokehShader = {
"
for( int i=0; i<9; i++ ) {
"
,
"
for( int i=0; i<9; i++ ) {
"
,
"
float tmp =
getDepth( coords + offset[ i ] )
;
"
,
"
float tmp =
texture2D(tDepth, coords + offset[i]).r
;
"
,
"
d += tmp * kernel[i];
"
,
"
d += tmp * kernel[i];
"
,
"
}
"
,
"
}
"
,
...
@@ -273,10 +265,10 @@ THREE.BokehShader = {
...
@@ -273,10 +265,10 @@ THREE.BokehShader = {
"
void main() {
"
,
"
void main() {
"
,
"
//scene depth calculation
"
,
"
//scene depth calculation
"
,
"
float depth = linearize(
getDepth( vUv.xy )
);
"
,
"
float depth = linearize(
texture2D(tDepth,vUv.xy).x
);
"
,
"
// Blur depth?
"
,
"
// Blur depth?
"
,
"
if (
depthblur
) {
"
,
"
if (
depthblur
) {
"
,
"
depth = linearize(bdepth(vUv.xy));
"
,
"
depth = linearize(bdepth(vUv.xy));
"
,
"
}
"
,
"
}
"
,
...
@@ -286,7 +278,7 @@ THREE.BokehShader = {
...
@@ -286,7 +278,7 @@ THREE.BokehShader = {
"
if (shaderFocus) {
"
,
"
if (shaderFocus) {
"
,
"
fDepth = linearize(
getDepth( focusCoords )
);
"
,
"
fDepth = linearize(
texture2D(tDepth,focusCoords).x
);
"
,
"
}
"
,
"
}
"
,
...
@@ -363,3 +355,50 @@ THREE.BokehShader = {
...
@@ -363,3 +355,50 @@ THREE.BokehShader = {
].
join
(
"
\n
"
)
].
join
(
"
\n
"
)
};
};
THREE
.
BokehDepthShader
=
{
uniforms
:
{
"
mNear
"
:
{
value
:
1.0
},
"
mFar
"
:
{
value
:
1000.0
},
},
vertexShader
:
[
"
#include <common>
"
,
"
varying float vViewZDepth;
"
,
"
void main() {
"
,
"
#include <begin_vertex>
"
,
"
#include <project_vertex>
"
,
"
vViewZDepth = - mvPosition.z;
"
,
"
}
"
].
join
(
"
\n
"
),
fragmentShader
:
[
"
uniform float mNear;
"
,
"
uniform float mFar;
"
,
"
varying float vViewZDepth;
"
,
"
#include <common>
"
,
"
#include <packing>
"
,
"
void main() {
"
,
"
float color = 1.0 - smoothstep( mNear, mFar, vViewZDepth );
"
,
"
gl_FragColor = vec4( vec3( color ), 1.0 );
"
,
"
}
"
].
join
(
"
\n
"
)
};
examples/webgl_postprocessing_dof2.html
浏览文件 @
80d3799c
...
@@ -96,9 +96,16 @@ Use WEBGL Depth buffer support?
...
@@ -96,9 +96,16 @@ Use WEBGL Depth buffer support?
renderer
.
autoClear
=
false
;
renderer
.
autoClear
=
false
;
container
.
appendChild
(
renderer
.
domElement
);
container
.
appendChild
(
renderer
.
domElement
);
materialDepth
=
new
THREE
.
MeshDepthMaterial
();
var
depthShader
=
THREE
.
BokehDepthShader
;
materialDepth
.
depthPacking
=
THREE
.
RGBADepthPacking
;
materialDepth
.
blending
=
THREE
.
NoBlending
;
materialDepth
=
new
THREE
.
ShaderMaterial
(
{
uniforms
:
depthShader
.
uniforms
,
vertexShader
:
depthShader
.
vertexShader
,
fragmentShader
:
depthShader
.
fragmentShader
}
);
materialDepth
.
uniforms
[
'
mNear
'
].
value
=
camera
.
near
;
materialDepth
.
uniforms
[
'
mFar
'
].
value
=
camera
.
far
;
// skybox
// skybox
...
@@ -110,7 +117,21 @@ Use WEBGL Depth buffer support?
...
@@ -110,7 +117,21 @@ Use WEBGL Depth buffer support?
var
textureCube
=
new
THREE
.
CubeTextureLoader
().
load
(
urls
);
var
textureCube
=
new
THREE
.
CubeTextureLoader
().
load
(
urls
);
textureCube
.
format
=
THREE
.
RGBFormat
;
textureCube
.
format
=
THREE
.
RGBFormat
;
scene
.
background
=
textureCube
;
var
shader
=
THREE
.
ShaderLib
[
'
cube
'
];
shader
.
uniforms
[
'
tCube
'
].
value
=
textureCube
;
material
=
new
THREE
.
ShaderMaterial
(
{
fragmentShader
:
shader
.
fragmentShader
,
vertexShader
:
shader
.
vertexShader
,
uniforms
:
shader
.
uniforms
,
depthWrite
:
false
,
side
:
THREE
.
BackSide
}
);
mesh
=
new
THREE
.
Mesh
(
new
THREE
.
BoxBufferGeometry
(
1000
,
1000
,
1000
),
material
);
scene
.
add
(
mesh
);
// plane particles
// plane particles
...
@@ -377,8 +398,7 @@ Use WEBGL Depth buffer support?
...
@@ -377,8 +398,7 @@ Use WEBGL Depth buffer support?
fragmentShader
:
bokeh_shader
.
fragmentShader
,
fragmentShader
:
bokeh_shader
.
fragmentShader
,
defines
:
{
defines
:
{
RINGS
:
shaderSettings
.
rings
,
RINGS
:
shaderSettings
.
rings
,
SAMPLES
:
shaderSettings
.
samples
,
SAMPLES
:
shaderSettings
.
samples
DEPTH_PACKING
:
1
// RGBADepth
}
}
}
);
}
);
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录