Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Ablesons
three.js
提交
fc86899e
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,发现更多精彩内容 >>
提交
fc86899e
编写于
8月 15, 2017
作者:
M
Mr.doob
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Added Percent Closer Soft-Shadows example. See #8933
上级
1b30cda4
变更
2
显示空白变更内容
内联
并排
Showing
2 changed file
with
301 addition
and
1 deletion
+301
-1
examples/files.js
examples/files.js
+2
-1
examples/webgl_shadowmap_pcss.html
examples/webgl_shadowmap_pcss.html
+299
-0
未找到文件。
examples/files.js
浏览文件 @
fc86899e
...
@@ -279,7 +279,8 @@ var files = {
...
@@ -279,7 +279,8 @@ var files = {
"
webgl_custom_attributes_points2
"
,
"
webgl_custom_attributes_points2
"
,
"
webgl_custom_attributes_points3
"
,
"
webgl_custom_attributes_points3
"
,
"
webgl_materials_modified
"
,
"
webgl_materials_modified
"
,
"
webgl_raymarching_reflect
"
"
webgl_raymarching_reflect
"
,
"
webgl_shadowmap_pcss
"
],
],
"
webgl deferred
"
:
[
"
webgl deferred
"
:
[
"
webgldeferred_animation
"
"
webgldeferred_animation
"
...
...
examples/webgl_shadowmap_pcss.html
0 → 100644
浏览文件 @
fc86899e
<!DOCTYPE html>
<html
lang=
"en"
>
<head>
<title>
three.js webgl - percent closer soft-shadows
</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
{
font-family
:
Monospace
;
background-color
:
#000
;
color
:
#000
;
margin
:
0px
;
overflow
:
hidden
;
}
#info
{
position
:
absolute
;
padding
:
10px
;
width
:
100%
;
text-align
:
center
;
}
a
{
text-decoration
:
underline
;
cursor
:
pointer
;
}
</style>
</head>
<body>
<div
id=
"info"
>
Percent Closer Soft-Shadows (PCSS) by
<a
href=
"http://eduperiment.com"
>
spidersharma03
</a></div>
<script
src=
"../build/three.js"
></script>
<script
src=
"js/Detector.js"
></script>
<script
src=
"js/controls/OrbitControls.js"
></script>
<script
src=
"js/libs/stats.min.js"
></script>
<script
type=
"x-shader/x-fragment"
id=
"PCSS"
>
#
define
LIGHT_WORLD_SIZE
0.005
#
define
LIGHT_FRUSTUM_WIDTH
3.75
#
define
LIGHT_SIZE_UV
(
LIGHT_WORLD_SIZE
/
LIGHT_FRUSTUM_WIDTH
)
#
define
NEAR_PLANE
9.5
#
define
NUM_SAMPLES
17
#
define
NUM_RINGS
11
#
define
BLOCKER_SEARCH_NUM_SAMPLES
NUM_SAMPLES
#
define
PCF_NUM_SAMPLES
NUM_SAMPLES
vec2
poissonDisk
[
NUM_SAMPLES
];
void
initPoissonSamples
(
const
in
vec2
randomSeed
)
{
float
ANGLE_STEP
=
PI2
*
float
(
NUM_RINGS
)
/
float
(
NUM_SAMPLES
);
float
INV_NUM_SAMPLES
=
1.0
/
float
(
NUM_SAMPLES
);
// jsfiddle that shows sample pattern: https://jsfiddle.net/a16ff1p7/
float
angle
=
rand
(
randomSeed
)
*
PI2
;
float
radius
=
INV_NUM_SAMPLES
;
float
radiusStep
=
radius
;
for
(
int
i
=
0
;
i
<
NUM_SAMPLES
;
i
++
)
{
poissonDisk
[
i
]
=
vec2
(
cos
(
angle
),
sin
(
angle
)
)
*
pow
(
radius
,
0.75
);
radius
+=
radiusStep
;
angle
+=
ANGLE_STEP
;
}
}
float
penumbraSize
(
const
in
float
zReceiver
,
const
in
float
zBlocker
)
{
// Parallel plane estimation
return
(
zReceiver
-
zBlocker
)
/
zBlocker
;
}
float
findBlocker
(
sampler2D
shadowMap
,
const
in
vec2
uv
,
const
in
float
zReceiver
)
{
// This uses similar triangles to compute what
// area of the shadow map we should search
float
searchRadius
=
LIGHT_SIZE_UV
*
(
zReceiver
-
NEAR_PLANE
)
/
zReceiver
;
float
blockerDepthSum
=
0.0
;
int
numBlockers
=
0
;
for
(
int
i
=
0
;
i
<
BLOCKER_SEARCH_NUM_SAMPLES
;
i
++
)
{
float
shadowMapDepth
=
unpackRGBAToDepth
(
texture2D
(
shadowMap
,
uv
+
poissonDisk
[
i
]
*
searchRadius
));
if
(
shadowMapDepth
<
zReceiver
)
{
blockerDepthSum
+=
shadowMapDepth
;
numBlockers
++
;
}
}
if
(
numBlockers
==
0
)
return
-
1.0
;
return
blockerDepthSum
/
float
(
numBlockers
);
}
float
PCF_Filter
(
sampler2D
shadowMap
,
vec2
uv
,
float
zReceiver
,
float
filterRadius
)
{
float
sum
=
0.0
;
for
(
int
i
=
0
;
i
<
PCF_NUM_SAMPLES
;
i
++
)
{
float
depth
=
unpackRGBAToDepth
(
texture2D
(
shadowMap
,
uv
+
poissonDisk
[
i
]
*
filterRadius
)
);
if
(
zReceiver
<=
depth
)
sum
+=
1.0
;
}
for
(
int
i
=
0
;
i
<
PCF_NUM_SAMPLES
;
i
++
)
{
float
depth
=
unpackRGBAToDepth
(
texture2D
(
shadowMap
,
uv
+
-
poissonDisk
[
i
].
yx
*
filterRadius
)
);
if
(
zReceiver
<=
depth
)
sum
+=
1.0
;
}
return
sum
/
(
2.0
*
float
(
PCF_NUM_SAMPLES
)
);
}
float
PCSS
(
sampler2D
shadowMap
,
vec4
coords
)
{
vec2
uv
=
coords
.
xy
;
float
zReceiver
=
coords
.
z
;
// Assumed to be eye-space z in this code
initPoissonSamples
(
uv
);
// STEP 1: blocker search
float
avgBlockerDepth
=
findBlocker
(
shadowMap
,
uv
,
zReceiver
);
//There are no occluders so early out (this saves filtering)
if
(
avgBlockerDepth
==
-
1.0
)
return
1.0
;
// STEP 2: penumbra size
float
penumbraRatio
=
penumbraSize
(
zReceiver
,
avgBlockerDepth
);
float
filterRadius
=
penumbraRatio
*
LIGHT_SIZE_UV
*
NEAR_PLANE
/
zReceiver
;
// STEP 3: filtering
//return avgBlockerDepth;
return
PCF_Filter
(
shadowMap
,
uv
,
zReceiver
,
filterRadius
);
}
</script>
<script
type=
"x-shader/x-fragment"
id=
"PCSSGetShadow"
>
return
PCSS
(
shadowMap
,
shadowCoord
);
</script>
<script>
if
(
!
Detector
.
webgl
)
Detector
.
addGetWebGLMessage
();
var
container
,
stats
;
var
camera
,
scene
,
renderer
;
var
group
;
init
();
animate
();
function
init
()
{
container
=
document
.
createElement
(
'
div
'
);
document
.
body
.
appendChild
(
container
);
// scene
scene
=
new
THREE
.
Scene
();
scene
.
fog
=
new
THREE
.
Fog
(
0xcce0ff
,
5
,
100
);
// camera
camera
=
new
THREE
.
PerspectiveCamera
(
30
,
window
.
innerWidth
/
window
.
innerHeight
,
1
,
10000
);
camera
.
position
.
y
=
5
;
camera
.
position
.
z
=
15
;
scene
.
add
(
camera
);
// lights
scene
.
add
(
new
THREE
.
AmbientLight
(
0x666666
)
);
var
light
=
new
THREE
.
DirectionalLight
(
0xdfebff
,
1.75
);
light
.
position
.
set
(
2
,
8
,
4
);
light
.
castShadow
=
true
;
light
.
shadow
.
mapSize
.
width
=
1024
;
light
.
shadow
.
mapSize
.
height
=
1024
;
light
.
shadow
.
camera
.
far
=
20
;
scene
.
add
(
light
);
// scene.add( new THREE.DirectionalLightHelper( light ) );
scene
.
add
(
new
THREE
.
CameraHelper
(
light
.
shadow
.
camera
)
);
// group
group
=
new
THREE
.
Group
();
scene
.
add
(
group
);
var
geometry
=
new
THREE
.
SphereGeometry
(
0.3
,
20
,
20
);
for
(
var
i
=
0
;
i
<
20
;
i
++
)
{
var
material
=
new
THREE
.
MeshPhongMaterial
(
{
color
:
Math
.
random
()
*
0xffffff
}
);
var
sphere
=
new
THREE
.
Mesh
(
geometry
,
material
);
sphere
.
position
.
x
=
Math
.
random
()
*
6
-
3
;
sphere
.
position
.
z
=
Math
.
random
()
*
6
-
3
;
sphere
.
castShadow
=
true
;
sphere
.
receiveShadow
=
true
;
sphere
.
userData
.
phase
=
Math
.
random
()
*
Math
.
PI
;
group
.
add
(
sphere
);
}
// ground
var
groundMaterial
=
new
THREE
.
MeshPhongMaterial
(
{
color
:
0x404040
,
specular
:
0x111111
}
);
var
mesh
=
new
THREE
.
Mesh
(
new
THREE
.
PlaneBufferGeometry
(
20000
,
20000
),
groundMaterial
);
mesh
.
rotation
.
x
=
-
Math
.
PI
/
2
;
mesh
.
receiveShadow
=
true
;
scene
.
add
(
mesh
);
// overwrite shadowmap code
var
shader
=
THREE
.
ShaderChunk
.
shadowmap_pars_fragment
;
shader
=
shader
.
replace
(
'
#ifdef USE_SHADOWMAP
'
,
'
#ifdef USE_SHADOWMAP
'
+
document
.
getElementById
(
'
PCSS
'
).
textContent
);
shader
=
shader
.
replace
(
'
#if defined( SHADOWMAP_TYPE_PCF )
'
,
document
.
getElementById
(
'
PCSSGetShadow
'
).
textContent
+
'
#if defined( SHADOWMAP_TYPE_PCF )
'
);
THREE
.
ShaderChunk
.
shadowmap_pars_fragment
=
shader
;
// renderer
renderer
=
new
THREE
.
WebGLRenderer
(
{
antialias
:
true
}
);
renderer
.
setPixelRatio
(
window
.
devicePixelRatio
);
renderer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
renderer
.
setClearColor
(
scene
.
fog
.
color
);
container
.
appendChild
(
renderer
.
domElement
);
renderer
.
gammaInput
=
true
;
renderer
.
gammaOutput
=
true
;
renderer
.
shadowMap
.
enabled
=
true
;
// controls
var
controls
=
new
THREE
.
OrbitControls
(
camera
,
renderer
.
domElement
);
controls
.
maxPolarAngle
=
Math
.
PI
*
0.5
;
controls
.
minDistance
=
10
;
controls
.
maxDistance
=
75
;
controls
.
target
.
set
(
0
,
2.5
,
0
);
controls
.
update
();
// performance monitor
stats
=
new
Stats
();
container
.
appendChild
(
stats
.
dom
);
//
window
.
addEventListener
(
'
resize
'
,
onWindowResize
,
false
);
}
//
function
onWindowResize
()
{
camera
.
aspect
=
window
.
innerWidth
/
window
.
innerHeight
;
camera
.
updateProjectionMatrix
();
renderer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
}
//
function
animate
()
{
var
time
=
performance
.
now
()
/
1000
;
group
.
traverse
(
function
(
child
)
{
if
(
'
phase
'
in
child
.
userData
)
{
child
.
position
.
y
=
Math
.
abs
(
Math
.
sin
(
time
+
child
.
userData
.
phase
)
)
*
4
+
0.3
;
}
}
);
renderer
.
render
(
scene
,
camera
);
stats
.
update
();
requestAnimationFrame
(
animate
);
}
</script>
</body>
</html>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录