Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Ablesons
three.js
提交
444b4cd7
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,发现更多精彩内容 >>
提交
444b4cd7
编写于
3月 23, 2018
作者:
M
Mugen87
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Examples: Clean up
上级
683289bd
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
97 addition
and
126 deletion
+97
-126
examples/webgl_postprocessing_dof2.html
examples/webgl_postprocessing_dof2.html
+97
-126
未找到文件。
examples/webgl_postprocessing_dof2.html
浏览文件 @
444b4cd7
...
@@ -53,14 +53,11 @@ Use WEBGL Depth buffer support?
...
@@ -53,14 +53,11 @@ Use WEBGL Depth buffer support?
if
(
!
Detector
.
webgl
)
Detector
.
addGetWebGLMessage
();
if
(
!
Detector
.
webgl
)
Detector
.
addGetWebGLMessage
();
var
container
,
stats
;
var
container
,
stats
;
var
camera
,
scene
,
renderer
,
var
camera
,
scene
,
renderer
,
materialDepth
;
material_depth
;
var
windowHalfX
=
window
.
innerWidth
/
2
;
var
windowHalfX
=
window
.
innerWidth
/
2
;
var
windowHalfY
=
window
.
innerHeight
/
2
;
var
windowHalfY
=
window
.
innerHeight
/
2
;
var
height
=
window
.
innerHeight
;
var
postprocessing
=
{
enabled
:
true
};
var
postprocessing
=
{
enabled
:
true
};
var
shaderSettings
=
{
var
shaderSettings
=
{
...
@@ -72,7 +69,7 @@ Use WEBGL Depth buffer support?
...
@@ -72,7 +69,7 @@ Use WEBGL Depth buffer support?
var
mouse
=
new
THREE
.
Vector2
();
var
mouse
=
new
THREE
.
Vector2
();
var
raycaster
=
new
THREE
.
Raycaster
();
var
raycaster
=
new
THREE
.
Raycaster
();
var
distance
=
100
;
var
distance
=
100
;
var
target
=
new
THREE
.
Vector3
(
0
,
20
,
-
50
);
var
target
=
new
THREE
.
Vector3
(
0
,
20
,
-
50
);
var
effectController
;
var
effectController
;
var
planes
=
[];
var
planes
=
[];
var
leaves
=
100
;
var
leaves
=
100
;
...
@@ -85,7 +82,7 @@ Use WEBGL Depth buffer support?
...
@@ -85,7 +82,7 @@ Use WEBGL Depth buffer support?
container
=
document
.
createElement
(
'
div
'
);
container
=
document
.
createElement
(
'
div
'
);
document
.
body
.
appendChild
(
container
);
document
.
body
.
appendChild
(
container
);
camera
=
new
THREE
.
PerspectiveCamera
(
70
,
window
.
innerWidth
/
h
eight
,
1
,
3000
);
camera
=
new
THREE
.
PerspectiveCamera
(
70
,
window
.
innerWidth
/
window
.
innerH
eight
,
1
,
3000
);
camera
.
position
.
y
=
150
;
camera
.
position
.
y
=
150
;
camera
.
position
.
z
=
450
;
camera
.
position
.
z
=
450
;
...
@@ -95,56 +92,28 @@ Use WEBGL Depth buffer support?
...
@@ -95,56 +92,28 @@ Use WEBGL Depth buffer support?
renderer
=
new
THREE
.
WebGLRenderer
();
renderer
=
new
THREE
.
WebGLRenderer
();
renderer
.
setPixelRatio
(
window
.
devicePixelRatio
);
renderer
.
setPixelRatio
(
window
.
devicePixelRatio
);
renderer
.
setSize
(
window
.
innerWidth
,
height
);
renderer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
renderer
.
autoClear
=
false
;
container
.
appendChild
(
renderer
.
domElement
);
container
.
appendChild
(
renderer
.
domElement
);
material
_d
epth
=
new
THREE
.
MeshDepthMaterial
();
material
D
epth
=
new
THREE
.
MeshDepthMaterial
();
material
_d
epth
.
depthPacking
=
THREE
.
RGBADepthPacking
;
material
D
epth
.
depthPacking
=
THREE
.
RGBADepthPacking
;
material
_d
epth
.
blending
=
THREE
.
NoBlending
;
material
D
epth
.
blending
=
THREE
.
NoBlending
;
//
//
skybox
var
r
=
"
textures/cube/Bridge2/
"
;
var
r
=
'
textures/cube/Bridge2/
'
;
var
urls
=
[
r
+
"
posx.jpg
"
,
r
+
"
negx.jpg
"
,
var
urls
=
[
r
+
'
posx.jpg
'
,
r
+
'
negx.jpg
'
,
r
+
"
posy.jpg
"
,
r
+
"
negy.jpg
"
,
r
+
'
posy.jpg
'
,
r
+
'
negy.jpg
'
,
r
+
"
posz.jpg
"
,
r
+
"
negz.jpg
"
];
r
+
'
posz.jpg
'
,
r
+
'
negz.jpg
'
];
var
textureCube
=
new
THREE
.
CubeTextureLoader
().
load
(
urls
);
var
textureCube
=
new
THREE
.
CubeTextureLoader
().
load
(
urls
);
textureCube
.
format
=
THREE
.
RGBFormat
;
textureCube
.
format
=
THREE
.
RGBFormat
;
// Skybox
scene
.
background
=
textureCube
;
var
shader
=
THREE
.
ShaderLib
[
"
cube
"
];
shader
.
uniforms
[
"
tCube
"
].
value
=
textureCube
;
var
material
=
new
THREE
.
ShaderMaterial
(
{
fragmentShader
:
shader
.
fragmentShader
,
vertexShader
:
shader
.
vertexShader
,
uniforms
:
shader
.
uniforms
,
depthWrite
:
false
,
side
:
THREE
.
BackSide
}
);
var
mesh
=
new
THREE
.
Mesh
(
new
THREE
.
BoxGeometry
(
1000
,
1000
,
1000
),
material
);
camera
.
add
(
mesh
);
// Focusing Floor
//
var planeGeometry = new THREE.PlaneBufferGeometry( 500, 500, 1, 1 );
//
plane particles
// var planeMat = new THREE.MeshPhongMaterial(
// { map: texture }
// );
// var plane = new THREE.Mesh(planeGeometry, planeMat );
// plane.rotation.x = - Math.PI / 2;
// plane.position.y = - 5;
// scene.add(plane);
// Plane particles
var
planePiece
=
new
THREE
.
PlaneBufferGeometry
(
10
,
10
,
1
,
1
);
var
planePiece
=
new
THREE
.
PlaneBufferGeometry
(
10
,
10
,
1
,
1
);
var
planeMat
=
new
THREE
.
MeshPhongMaterial
(
{
var
planeMat
=
new
THREE
.
MeshPhongMaterial
(
{
...
@@ -157,21 +126,23 @@ Use WEBGL Depth buffer support?
...
@@ -157,21 +126,23 @@ Use WEBGL Depth buffer support?
var
rand
=
Math
.
random
;
var
rand
=
Math
.
random
;
for
(
var
i
=
0
;
i
<
leaves
;
i
++
)
{
for
(
var
i
=
0
;
i
<
leaves
;
i
++
)
{
var
plane
=
new
THREE
.
Mesh
(
planePiece
,
planeMat
);
plane
.
rotation
.
set
(
rand
(),
rand
(),
rand
());
var
plane
=
new
THREE
.
Mesh
(
planePiece
,
planeMat
);
plane
.
rotation
.
set
(
rand
(),
rand
(),
rand
()
);
plane
.
rotation
.
dx
=
rand
()
*
0.1
;
plane
.
rotation
.
dx
=
rand
()
*
0.1
;
plane
.
rotation
.
dy
=
rand
()
*
0.1
;
plane
.
rotation
.
dy
=
rand
()
*
0.1
;
plane
.
rotation
.
dz
=
rand
()
*
0.1
;
plane
.
rotation
.
dz
=
rand
()
*
0.1
;
plane
.
position
.
set
(
rand
()
*
150
,
0
+
rand
()
*
300
,
rand
()
*
150
);
plane
.
position
.
set
(
rand
()
*
150
,
0
+
rand
()
*
300
,
rand
()
*
150
);
plane
.
position
.
dx
=
(
rand
()
-
0.5
);
plane
.
position
.
dx
=
(
rand
()
-
0.5
);
plane
.
position
.
dz
=
(
rand
()
-
0.5
);
plane
.
position
.
dz
=
(
rand
()
-
0.5
);
scene
.
add
(
plane
);
scene
.
add
(
plane
);
planes
.
push
(
plane
);
planes
.
push
(
plane
);
}
}
//
A
dding Monkeys
//
a
dding Monkeys
var
loader2
=
new
THREE
.
BufferGeometryLoader
();
var
loader2
=
new
THREE
.
BufferGeometryLoader
();
loader2
.
load
(
'
models/json/suzanne_buffergeometry.json
'
,
function
(
geometry
)
{
loader2
.
load
(
'
models/json/suzanne_buffergeometry.json
'
,
function
(
geometry
)
{
...
@@ -194,12 +165,12 @@ Use WEBGL Depth buffer support?
...
@@ -194,12 +165,12 @@ Use WEBGL Depth buffer support?
var
mesh
=
new
THREE
.
Mesh
(
geometry
,
material
);
var
mesh
=
new
THREE
.
Mesh
(
geometry
,
material
);
mesh
.
scale
.
multiplyScalar
(
30
);
mesh
.
scale
.
multiplyScalar
(
30
);
mesh
.
position
.
z
=
Math
.
cos
(
i
/
monkeys
*
Math
.
PI
*
2
)
*
200
;
mesh
.
position
.
z
=
Math
.
cos
(
i
/
monkeys
*
Math
.
PI
*
2
)
*
200
;
mesh
.
position
.
y
=
Math
.
sin
(
i
/
monkeys
*
Math
.
PI
*
3
)
*
20
;
mesh
.
position
.
y
=
Math
.
sin
(
i
/
monkeys
*
Math
.
PI
*
3
)
*
20
;
mesh
.
position
.
x
=
Math
.
sin
(
i
/
monkeys
*
Math
.
PI
*
2
)
*
200
;
mesh
.
position
.
x
=
Math
.
sin
(
i
/
monkeys
*
Math
.
PI
*
2
)
*
200
;
mesh
.
rotation
.
y
=
-
Math
.
PI
/
2
;
mesh
.
rotation
.
y
=
-
Math
.
PI
/
2
;
mesh
.
rotation
.
z
=
-
i
/
monkeys
*
Math
.
PI
*
2
;
mesh
.
rotation
.
z
=
-
i
/
monkeys
*
Math
.
PI
*
2
;
scene
.
add
(
mesh
);
scene
.
add
(
mesh
);
...
@@ -207,13 +178,12 @@ Use WEBGL Depth buffer support?
...
@@ -207,13 +178,12 @@ Use WEBGL Depth buffer support?
}
);
}
);
// add balls
var
geometry
=
new
THREE
.
SphereBufferGeometry
(
1
,
20
,
20
);
// Add Balls
var
geometry
=
new
THREE
.
SphereGeometry
(
1
,
20
,
20
);
for
(
var
i
=
0
;
i
<
20
;
i
++
)
{
for
(
var
i
=
0
;
i
<
20
;
i
++
)
{
// MeshPhongMaterial
var
ballmaterial
=
new
THREE
.
MeshPhongMaterial
(
{
var
ballmaterial
=
new
THREE
.
MeshPhongMaterial
(
{
color
:
0xffffff
*
Math
.
random
(),
color
:
0xffffff
*
Math
.
random
(),
shininess
:
0.5
,
shininess
:
0.5
,
...
@@ -230,8 +200,7 @@ Use WEBGL Depth buffer support?
...
@@ -230,8 +200,7 @@ Use WEBGL Depth buffer support?
}
}
// lights
// Lights
scene
.
add
(
new
THREE
.
AmbientLight
(
0x222222
)
);
scene
.
add
(
new
THREE
.
AmbientLight
(
0x222222
)
);
...
@@ -240,17 +209,11 @@ Use WEBGL Depth buffer support?
...
@@ -240,17 +209,11 @@ Use WEBGL Depth buffer support?
scene
.
add
(
directionalLight
);
scene
.
add
(
directionalLight
);
var
directionalLight
=
new
THREE
.
DirectionalLight
(
0xffffff
,
1
);
var
directionalLight
=
new
THREE
.
DirectionalLight
(
0xffffff
,
1
);
directionalLight
.
position
.
set
(
-
2
,
1.2
,
-
10
).
normalize
();
directionalLight
.
position
.
set
(
-
2
,
1.2
,
-
10
).
normalize
();
scene
.
add
(
directionalLight
);
scene
.
add
(
directionalLight
);
initPostprocessing
();
initPostprocessing
();
renderer
.
autoClear
=
false
;
renderer
.
domElement
.
style
.
position
=
'
absolute
'
;
renderer
.
domElement
.
style
.
left
=
"
0px
"
;
stats
=
new
Stats
();
stats
=
new
Stats
();
container
.
appendChild
(
stats
.
dom
);
container
.
appendChild
(
stats
.
dom
);
...
@@ -286,11 +249,16 @@ Use WEBGL Depth buffer support?
...
@@ -286,11 +249,16 @@ Use WEBGL Depth buffer support?
};
};
var
matChanger
=
function
(
)
{
var
matChanger
=
function
()
{
for
(
var
e
in
effectController
)
{
if
(
e
in
postprocessing
.
bokeh_uniforms
)
{
postprocessing
.
bokeh_uniforms
[
e
].
value
=
effectController
[
e
];
}
for
(
var
e
in
effectController
)
{
if
(
e
in
postprocessing
.
bokeh_uniforms
)
postprocessing
.
bokeh_uniforms
[
e
].
value
=
effectController
[
e
];
}
}
postprocessing
.
enabled
=
effectController
.
enabled
;
postprocessing
.
enabled
=
effectController
.
enabled
;
...
@@ -302,35 +270,35 @@ Use WEBGL Depth buffer support?
...
@@ -302,35 +270,35 @@ Use WEBGL Depth buffer support?
var
gui
=
new
dat
.
GUI
();
var
gui
=
new
dat
.
GUI
();
gui
.
add
(
effectController
,
"
enabled
"
).
onChange
(
matChanger
);
gui
.
add
(
effectController
,
'
enabled
'
).
onChange
(
matChanger
);
gui
.
add
(
effectController
,
"
jsDepthCalculation
"
).
onChange
(
matChanger
);
gui
.
add
(
effectController
,
'
jsDepthCalculation
'
).
onChange
(
matChanger
);
gui
.
add
(
effectController
,
"
shaderFocus
"
).
onChange
(
matChanger
);
gui
.
add
(
effectController
,
'
shaderFocus
'
).
onChange
(
matChanger
);
gui
.
add
(
effectController
,
"
focalDepth
"
,
0.0
,
200.0
).
listen
().
onChange
(
matChanger
);
gui
.
add
(
effectController
,
'
focalDepth
'
,
0.0
,
200.0
).
listen
().
onChange
(
matChanger
);
gui
.
add
(
effectController
,
"
fstop
"
,
0.1
,
22
,
0.001
).
onChange
(
matChanger
);
gui
.
add
(
effectController
,
'
fstop
'
,
0.1
,
22
,
0.001
).
onChange
(
matChanger
);
gui
.
add
(
effectController
,
"
maxblur
"
,
0.0
,
5.0
,
0.025
).
onChange
(
matChanger
);
gui
.
add
(
effectController
,
'
maxblur
'
,
0.0
,
5.0
,
0.025
).
onChange
(
matChanger
);
gui
.
add
(
effectController
,
"
showFocus
"
).
onChange
(
matChanger
);
gui
.
add
(
effectController
,
'
showFocus
'
).
onChange
(
matChanger
);
gui
.
add
(
effectController
,
"
manualdof
"
).
onChange
(
matChanger
);
gui
.
add
(
effectController
,
'
manualdof
'
).
onChange
(
matChanger
);
gui
.
add
(
effectController
,
"
vignetting
"
).
onChange
(
matChanger
);
gui
.
add
(
effectController
,
'
vignetting
'
).
onChange
(
matChanger
);
gui
.
add
(
effectController
,
"
depthblur
"
).
onChange
(
matChanger
);
gui
.
add
(
effectController
,
'
depthblur
'
).
onChange
(
matChanger
);
gui
.
add
(
effectController
,
"
threshold
"
,
0
,
1
,
0.001
).
onChange
(
matChanger
);
gui
.
add
(
effectController
,
'
threshold
'
,
0
,
1
,
0.001
).
onChange
(
matChanger
);
gui
.
add
(
effectController
,
"
gain
"
,
0
,
100
,
0.001
).
onChange
(
matChanger
);
gui
.
add
(
effectController
,
'
gain
'
,
0
,
100
,
0.001
).
onChange
(
matChanger
);
gui
.
add
(
effectController
,
"
bias
"
,
0
,
3
,
0.001
).
onChange
(
matChanger
);
gui
.
add
(
effectController
,
'
bias
'
,
0
,
3
,
0.001
).
onChange
(
matChanger
);
gui
.
add
(
effectController
,
"
fringe
"
,
0
,
5
,
0.001
).
onChange
(
matChanger
);
gui
.
add
(
effectController
,
'
fringe
'
,
0
,
5
,
0.001
).
onChange
(
matChanger
);
gui
.
add
(
effectController
,
"
focalLength
"
,
16
,
80
,
0.001
).
onChange
(
matChanger
);
gui
.
add
(
effectController
,
'
focalLength
'
,
16
,
80
,
0.001
).
onChange
(
matChanger
);
gui
.
add
(
effectController
,
"
noise
"
).
onChange
(
matChanger
);
gui
.
add
(
effectController
,
'
noise
'
).
onChange
(
matChanger
);
gui
.
add
(
effectController
,
"
dithering
"
,
0
,
0.001
,
0.0001
).
onChange
(
matChanger
);
gui
.
add
(
effectController
,
'
dithering
'
,
0
,
0.001
,
0.0001
).
onChange
(
matChanger
);
gui
.
add
(
effectController
,
"
pentagon
"
).
onChange
(
matChanger
);
gui
.
add
(
effectController
,
'
pentagon
'
).
onChange
(
matChanger
);
gui
.
add
(
shaderSettings
,
"
rings
"
,
1
,
8
).
step
(
1
).
onChange
(
shaderUpdate
);
gui
.
add
(
shaderSettings
,
'
rings
'
,
1
,
8
).
step
(
1
).
onChange
(
shaderUpdate
);
gui
.
add
(
shaderSettings
,
"
samples
"
,
1
,
13
).
step
(
1
).
onChange
(
shaderUpdate
);
gui
.
add
(
shaderSettings
,
'
samples
'
,
1
,
13
).
step
(
1
).
onChange
(
shaderUpdate
);
matChanger
();
matChanger
();
...
@@ -352,7 +320,7 @@ Use WEBGL Depth buffer support?
...
@@ -352,7 +320,7 @@ Use WEBGL Depth buffer support?
mouse
.
x
=
(
event
.
clientX
-
windowHalfX
)
/
windowHalfX
;
mouse
.
x
=
(
event
.
clientX
-
windowHalfX
)
/
windowHalfX
;
mouse
.
y
=
-
(
event
.
clientY
-
windowHalfY
)
/
windowHalfY
;
mouse
.
y
=
-
(
event
.
clientY
-
windowHalfY
)
/
windowHalfY
;
postprocessing
.
bokeh_uniforms
[
'
focusCoords
'
].
value
.
set
(
event
.
clientX
/
window
.
innerWidth
,
1
-
(
event
.
clientY
/
window
.
innerHeight
)
);
postprocessing
.
bokeh_uniforms
[
'
focusCoords
'
].
value
.
set
(
event
.
clientX
/
window
.
innerWidth
,
1
-
(
event
.
clientY
/
window
.
innerHeight
)
);
}
}
...
@@ -391,21 +359,17 @@ Use WEBGL Depth buffer support?
...
@@ -391,21 +359,17 @@ Use WEBGL Depth buffer support?
postprocessing
.
scene
.
add
(
postprocessing
.
camera
);
postprocessing
.
scene
.
add
(
postprocessing
.
camera
);
var
pars
=
{
minFilter
:
THREE
.
LinearFilter
,
magFilter
:
THREE
.
LinearFilter
,
format
:
THREE
.
RGBFormat
};
var
pars
=
{
minFilter
:
THREE
.
LinearFilter
,
magFilter
:
THREE
.
LinearFilter
,
format
:
THREE
.
RGBFormat
};
postprocessing
.
rtTextureDepth
=
new
THREE
.
WebGLRenderTarget
(
window
.
innerWidth
,
height
,
pars
);
postprocessing
.
rtTextureDepth
=
new
THREE
.
WebGLRenderTarget
(
window
.
innerWidth
,
window
.
innerHeight
,
pars
);
postprocessing
.
rtTextureColor
=
new
THREE
.
WebGLRenderTarget
(
window
.
innerWidth
,
height
,
pars
);
postprocessing
.
rtTextureColor
=
new
THREE
.
WebGLRenderTarget
(
window
.
innerWidth
,
window
.
innerHeight
,
pars
);
var
bokeh_shader
=
THREE
.
BokehShader
;
var
bokeh_shader
=
THREE
.
BokehShader
;
postprocessing
.
bokeh_uniforms
=
THREE
.
UniformsUtils
.
clone
(
bokeh_shader
.
uniforms
);
postprocessing
.
bokeh_uniforms
=
THREE
.
UniformsUtils
.
clone
(
bokeh_shader
.
uniforms
);
postprocessing
.
bokeh_uniforms
[
"
tColor
"
].
value
=
postprocessing
.
rtTextureColor
.
texture
;
postprocessing
.
bokeh_uniforms
[
'
tColor
'
].
value
=
postprocessing
.
rtTextureColor
.
texture
;
postprocessing
.
bokeh_uniforms
[
"
tDepth
"
].
value
=
postprocessing
.
rtTextureDepth
.
texture
;
postprocessing
.
bokeh_uniforms
[
'
tDepth
'
].
value
=
postprocessing
.
rtTextureDepth
.
texture
;
postprocessing
.
bokeh_uniforms
[
'
textureWidth
'
].
value
=
window
.
innerWidth
;
postprocessing
.
bokeh_uniforms
[
"
textureWidth
"
].
value
=
window
.
innerWidth
;
postprocessing
.
bokeh_uniforms
[
'
textureHeight
'
].
value
=
window
.
innerHeight
;
postprocessing
.
bokeh_uniforms
[
"
textureHeight
"
].
value
=
height
;
postprocessing
.
materialBokeh
=
new
THREE
.
ShaderMaterial
(
{
postprocessing
.
materialBokeh
=
new
THREE
.
ShaderMaterial
(
{
...
@@ -427,9 +391,9 @@ Use WEBGL Depth buffer support?
...
@@ -427,9 +391,9 @@ Use WEBGL Depth buffer support?
}
}
function
shaderUpdate
()
{
function
shaderUpdate
()
{
postprocessing
.
materialBokeh
.
defines
.
RINGS
=
shaderSettings
.
rings
;
postprocessing
.
materialBokeh
.
defines
.
RINGS
=
shaderSettings
.
rings
;
postprocessing
.
materialBokeh
.
defines
.
SAMPLES
=
shaderSettings
.
samples
;
postprocessing
.
materialBokeh
.
defines
.
SAMPLES
=
shaderSettings
.
samples
;
postprocessing
.
materialBokeh
.
needsUpdate
=
true
;
postprocessing
.
materialBokeh
.
needsUpdate
=
true
;
}
}
...
@@ -443,29 +407,35 @@ Use WEBGL Depth buffer support?
...
@@ -443,29 +407,35 @@ Use WEBGL Depth buffer support?
}
}
function
linearize
(
depth
)
{
function
linearize
(
depth
)
{
var
zfar
=
camera
.
far
;
var
zfar
=
camera
.
far
;
var
znear
=
camera
.
near
;
var
znear
=
camera
.
near
;
return
-
zfar
*
znear
/
(
depth
*
(
zfar
-
znear
)
-
zfar
);
return
-
zfar
*
znear
/
(
depth
*
(
zfar
-
znear
)
-
zfar
);
}
}
function
smoothstep
(
near
,
far
,
depth
)
{
function
smoothstep
(
near
,
far
,
depth
)
{
var
x
=
saturate
(
(
depth
-
near
)
/
(
far
-
near
));
return
x
*
x
*
(
3
-
2
*
x
);
var
x
=
saturate
(
(
depth
-
near
)
/
(
far
-
near
)
);
return
x
*
x
*
(
3
-
2
*
x
);
}
}
function
saturate
(
x
)
{
function
saturate
(
x
)
{
return
Math
.
max
(
0
,
Math
.
min
(
1
,
x
));
return
Math
.
max
(
0
,
Math
.
min
(
1
,
x
)
);
}
}
function
render
()
{
function
render
()
{
var
time
=
Date
.
now
()
*
0.00015
;
var
time
=
Date
.
now
()
*
0.00015
;
camera
.
position
.
x
=
Math
.
cos
(
time
)
*
400
;
camera
.
position
.
x
=
Math
.
cos
(
time
)
*
400
;
camera
.
position
.
z
=
Math
.
sin
(
time
)
*
500
;
camera
.
position
.
z
=
Math
.
sin
(
time
)
*
500
;
camera
.
position
.
y
=
Math
.
sin
(
time
/
1.4
)
*
100
;
camera
.
position
.
y
=
Math
.
sin
(
time
/
1.4
)
*
100
;
camera
.
lookAt
(
target
);
camera
.
lookAt
(
target
);
...
@@ -488,8 +458,6 @@ Use WEBGL Depth buffer support?
...
@@ -488,8 +458,6 @@ Use WEBGL Depth buffer support?
var
ldistance
=
linearize
(
1
-
sdistance
);
var
ldistance
=
linearize
(
1
-
sdistance
);
// (Math.random()
<
0.1
)
&&
console
.
log
(
'
moo
'
,
targetDistance
,
distance
,
ldistance
);
postprocessing
.
bokeh_uniforms
[
'
focalDepth
'
].
value
=
ldistance
;
postprocessing
.
bokeh_uniforms
[
'
focalDepth
'
].
value
=
ldistance
;
effectController
[
'
focalDepth
'
]
=
ldistance
;
effectController
[
'
focalDepth
'
]
=
ldistance
;
...
@@ -498,15 +466,18 @@ Use WEBGL Depth buffer support?
...
@@ -498,15 +466,18 @@ Use WEBGL Depth buffer support?
}
}
for
(
var
i
=
0
;
i
<
leaves
;
i
++
)
{
for
(
var
i
=
0
;
i
<
leaves
;
i
++
)
{
var
plane
=
planes
[
i
];
var
plane
=
planes
[
i
];
plane
.
rotation
.
x
+=
plane
.
rotation
.
dx
;
plane
.
rotation
.
x
+=
plane
.
rotation
.
dx
;
plane
.
rotation
.
y
+=
plane
.
rotation
.
dy
;
plane
.
rotation
.
y
+=
plane
.
rotation
.
dy
;
plane
.
rotation
.
z
+=
plane
.
rotation
.
dz
;
plane
.
rotation
.
z
+=
plane
.
rotation
.
dz
;
plane
.
position
.
y
-=
2
;
plane
.
position
.
y
-=
2
;
plane
.
position
.
x
+=
plane
.
position
.
dx
;
plane
.
position
.
x
+=
plane
.
position
.
dx
;
plane
.
position
.
z
+=
plane
.
position
.
dz
;
plane
.
position
.
z
+=
plane
.
position
.
dz
;
if
(
plane
.
position
.
y
<
0
)
plane
.
position
.
y
+=
300
;
if
(
plane
.
position
.
y
<
0
)
plane
.
position
.
y
+=
300
;
}
}
...
@@ -514,17 +485,17 @@ Use WEBGL Depth buffer support?
...
@@ -514,17 +485,17 @@ Use WEBGL Depth buffer support?
renderer
.
clear
();
renderer
.
clear
();
//
R
ender scene into texture
//
r
ender scene into texture
renderer
.
render
(
scene
,
camera
,
postprocessing
.
rtTextureColor
,
true
);
renderer
.
render
(
scene
,
camera
,
postprocessing
.
rtTextureColor
,
true
);
//
R
ender depth into texture
//
r
ender depth into texture
scene
.
overrideMaterial
=
material
_d
epth
;
scene
.
overrideMaterial
=
material
D
epth
;
renderer
.
render
(
scene
,
camera
,
postprocessing
.
rtTextureDepth
,
true
);
renderer
.
render
(
scene
,
camera
,
postprocessing
.
rtTextureDepth
,
true
);
scene
.
overrideMaterial
=
null
;
scene
.
overrideMaterial
=
null
;
//
R
ender bokeh composite
//
r
ender bokeh composite
renderer
.
render
(
postprocessing
.
scene
,
postprocessing
.
camera
);
renderer
.
render
(
postprocessing
.
scene
,
postprocessing
.
camera
);
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录