Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Ablesons
three.js
提交
68d3b523
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,发现更多精彩内容 >>
提交
68d3b523
编写于
5月 23, 2019
作者:
M
Mugen87
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
JSM: Added module and TS file for UnrealBloomPass.
上级
9e6f4306
变更
5
隐藏空白更改
内联
并排
Showing
5 changed file
with
452 addition
and
1 deletion
+452
-1
docs/manual/en/introduction/Import-via-modules.html
docs/manual/en/introduction/Import-via-modules.html
+1
-0
examples/js/postprocessing/UnrealBloomPass.js
examples/js/postprocessing/UnrealBloomPass.js
+2
-1
examples/jsm/postprocessing/UnrealBloomPass.d.ts
examples/jsm/postprocessing/UnrealBloomPass.d.ts
+38
-0
examples/jsm/postprocessing/UnrealBloomPass.js
examples/jsm/postprocessing/UnrealBloomPass.js
+410
-0
utils/modularize.js
utils/modularize.js
+1
-0
未找到文件。
docs/manual/en/introduction/Import-via-modules.html
浏览文件 @
68d3b523
...
...
@@ -175,6 +175,7 @@
<li>
SavePass
</li>
<li>
ShaderPass
</li>
<li>
TexturePass
</li>
<li>
UnrealBloomPass
</li>
</ul>
</li>
<li>
renderers
...
...
examples/js/postprocessing/UnrealBloomPass.js
浏览文件 @
68d3b523
...
...
@@ -4,6 +4,7 @@
* Inspired from Unreal Engine
* https://docs.unrealengine.com/latest/INT/Engine/Rendering/PostProcessEffects/Bloom/
*/
THREE
.
UnrealBloomPass
=
function
(
resolution
,
strength
,
radius
,
threshold
)
{
THREE
.
Pass
.
call
(
this
);
...
...
@@ -106,7 +107,7 @@ THREE.UnrealBloomPass = function ( resolution, strength, radius, threshold ) {
// copy material
if
(
THREE
.
CopyShader
===
undefined
)
{
console
.
error
(
"
THREE.BloomPass relies on THREE.CopyShader
"
);
console
.
error
(
"
THREE.
Unreal
BloomPass relies on THREE.CopyShader
"
);
}
...
...
examples/jsm/postprocessing/UnrealBloomPass.d.ts
0 → 100644
浏览文件 @
68d3b523
import
{
Color
,
MeshBasicMaterial
,
ShaderMaterial
,
Vector2
,
Vector3
,
WebGLRenderTarget
}
from
'
../../../src/Three
'
;
import
{
Pass
}
from
'
./Pass
'
;
export
class
UnrealBloomPass
extends
Pass
{
constructor
(
resolution
:
Vector2
,
strength
:
number
,
radius
:
number
,
threshold
:
number
);
resolution
:
Vector2
;
strength
:
number
;
radius
:
number
;
threshold
:
number
;
clearColor
:
Color
;
renderTargetsHorizontal
:
WebGLRenderTarget
[];
renderTargetsVertical
:
WebGLRenderTarget
[];
nMips
:
number
;
renderTargetBright
:
WebGLRenderTarget
;
highPassUniforms
:
object
;
materialHighPassFilter
:
ShaderMaterial
;
separableBlurMaterials
:
ShaderMaterial
[];
compositeMaterial
:
ShaderMaterial
;
bloomTintColors
:
Vector3
[];
copyUniforms
:
object
;
materialCopy
:
ShaderMaterial
;
oldClearColor
:
Color
;
oldClearAlpha
:
number
;
basic
:
MeshBasicMaterial
;
fsQuad
:
object
;
dispose
():
void
;
getSeperableBlurMaterial
():
ShaderMaterial
;
getCompositeMaterial
():
ShaderMaterial
;
}
examples/jsm/postprocessing/UnrealBloomPass.js
0 → 100644
浏览文件 @
68d3b523
/**
* @author spidersharma / http://eduperiment.com/
*
* Inspired from Unreal Engine
* https://docs.unrealengine.com/latest/INT/Engine/Rendering/PostProcessEffects/Bloom/
*/
import
{
AdditiveBlending
,
Color
,
LinearFilter
,
MeshBasicMaterial
,
RGBAFormat
,
ShaderMaterial
,
UniformsUtils
,
Vector2
,
Vector3
,
WebGLRenderTarget
}
from
"
../../../build/three.module.js
"
;
import
{
Pass
}
from
"
../postprocessing/Pass.js
"
;
import
{
CopyShader
}
from
"
../shaders/CopyShader.js
"
;
import
{
LuminosityHighPassShader
}
from
"
../shaders/LuminosityHighPassShader.js
"
;
var
UnrealBloomPass
=
function
(
resolution
,
strength
,
radius
,
threshold
)
{
Pass
.
call
(
this
);
this
.
strength
=
(
strength
!==
undefined
)
?
strength
:
1
;
this
.
radius
=
radius
;
this
.
threshold
=
threshold
;
this
.
resolution
=
(
resolution
!==
undefined
)
?
new
Vector2
(
resolution
.
x
,
resolution
.
y
)
:
new
Vector2
(
256
,
256
);
// create color only once here, reuse it later inside the render function
this
.
clearColor
=
new
Color
(
0
,
0
,
0
);
// render targets
var
pars
=
{
minFilter
:
LinearFilter
,
magFilter
:
LinearFilter
,
format
:
RGBAFormat
};
this
.
renderTargetsHorizontal
=
[];
this
.
renderTargetsVertical
=
[];
this
.
nMips
=
5
;
var
resx
=
Math
.
round
(
this
.
resolution
.
x
/
2
);
var
resy
=
Math
.
round
(
this
.
resolution
.
y
/
2
);
this
.
renderTargetBright
=
new
WebGLRenderTarget
(
resx
,
resy
,
pars
);
this
.
renderTargetBright
.
texture
.
name
=
"
UnrealBloomPass.bright
"
;
this
.
renderTargetBright
.
texture
.
generateMipmaps
=
false
;
for
(
var
i
=
0
;
i
<
this
.
nMips
;
i
++
)
{
var
renderTargetHorizonal
=
new
WebGLRenderTarget
(
resx
,
resy
,
pars
);
renderTargetHorizonal
.
texture
.
name
=
"
UnrealBloomPass.h
"
+
i
;
renderTargetHorizonal
.
texture
.
generateMipmaps
=
false
;
this
.
renderTargetsHorizontal
.
push
(
renderTargetHorizonal
);
var
renderTargetVertical
=
new
WebGLRenderTarget
(
resx
,
resy
,
pars
);
renderTargetVertical
.
texture
.
name
=
"
UnrealBloomPass.v
"
+
i
;
renderTargetVertical
.
texture
.
generateMipmaps
=
false
;
this
.
renderTargetsVertical
.
push
(
renderTargetVertical
);
resx
=
Math
.
round
(
resx
/
2
);
resy
=
Math
.
round
(
resy
/
2
);
}
// luminosity high pass material
if
(
LuminosityHighPassShader
===
undefined
)
console
.
error
(
"
UnrealBloomPass relies on LuminosityHighPassShader
"
);
var
highPassShader
=
LuminosityHighPassShader
;
this
.
highPassUniforms
=
UniformsUtils
.
clone
(
highPassShader
.
uniforms
);
this
.
highPassUniforms
[
"
luminosityThreshold
"
].
value
=
threshold
;
this
.
highPassUniforms
[
"
smoothWidth
"
].
value
=
0.01
;
this
.
materialHighPassFilter
=
new
ShaderMaterial
(
{
uniforms
:
this
.
highPassUniforms
,
vertexShader
:
highPassShader
.
vertexShader
,
fragmentShader
:
highPassShader
.
fragmentShader
,
defines
:
{}
}
);
// Gaussian Blur Materials
this
.
separableBlurMaterials
=
[];
var
kernelSizeArray
=
[
3
,
5
,
7
,
9
,
11
];
var
resx
=
Math
.
round
(
this
.
resolution
.
x
/
2
);
var
resy
=
Math
.
round
(
this
.
resolution
.
y
/
2
);
for
(
var
i
=
0
;
i
<
this
.
nMips
;
i
++
)
{
this
.
separableBlurMaterials
.
push
(
this
.
getSeperableBlurMaterial
(
kernelSizeArray
[
i
]
)
);
this
.
separableBlurMaterials
[
i
].
uniforms
[
"
texSize
"
].
value
=
new
Vector2
(
resx
,
resy
);
resx
=
Math
.
round
(
resx
/
2
);
resy
=
Math
.
round
(
resy
/
2
);
}
// Composite material
this
.
compositeMaterial
=
this
.
getCompositeMaterial
(
this
.
nMips
);
this
.
compositeMaterial
.
uniforms
[
"
blurTexture1
"
].
value
=
this
.
renderTargetsVertical
[
0
].
texture
;
this
.
compositeMaterial
.
uniforms
[
"
blurTexture2
"
].
value
=
this
.
renderTargetsVertical
[
1
].
texture
;
this
.
compositeMaterial
.
uniforms
[
"
blurTexture3
"
].
value
=
this
.
renderTargetsVertical
[
2
].
texture
;
this
.
compositeMaterial
.
uniforms
[
"
blurTexture4
"
].
value
=
this
.
renderTargetsVertical
[
3
].
texture
;
this
.
compositeMaterial
.
uniforms
[
"
blurTexture5
"
].
value
=
this
.
renderTargetsVertical
[
4
].
texture
;
this
.
compositeMaterial
.
uniforms
[
"
bloomStrength
"
].
value
=
strength
;
this
.
compositeMaterial
.
uniforms
[
"
bloomRadius
"
].
value
=
0.1
;
this
.
compositeMaterial
.
needsUpdate
=
true
;
var
bloomFactors
=
[
1.0
,
0.8
,
0.6
,
0.4
,
0.2
];
this
.
compositeMaterial
.
uniforms
[
"
bloomFactors
"
].
value
=
bloomFactors
;
this
.
bloomTintColors
=
[
new
Vector3
(
1
,
1
,
1
),
new
Vector3
(
1
,
1
,
1
),
new
Vector3
(
1
,
1
,
1
),
new
Vector3
(
1
,
1
,
1
),
new
Vector3
(
1
,
1
,
1
)
];
this
.
compositeMaterial
.
uniforms
[
"
bloomTintColors
"
].
value
=
this
.
bloomTintColors
;
// copy material
if
(
CopyShader
===
undefined
)
{
console
.
error
(
"
UnrealBloomPass relies on CopyShader
"
);
}
var
copyShader
=
CopyShader
;
this
.
copyUniforms
=
UniformsUtils
.
clone
(
copyShader
.
uniforms
);
this
.
copyUniforms
[
"
opacity
"
].
value
=
1.0
;
this
.
materialCopy
=
new
ShaderMaterial
(
{
uniforms
:
this
.
copyUniforms
,
vertexShader
:
copyShader
.
vertexShader
,
fragmentShader
:
copyShader
.
fragmentShader
,
blending
:
AdditiveBlending
,
depthTest
:
false
,
depthWrite
:
false
,
transparent
:
true
}
);
this
.
enabled
=
true
;
this
.
needsSwap
=
false
;
this
.
oldClearColor
=
new
Color
();
this
.
oldClearAlpha
=
1
;
this
.
basic
=
new
MeshBasicMaterial
();
this
.
fsQuad
=
new
Pass
.
FullScreenQuad
(
null
);
};
UnrealBloomPass
.
prototype
=
Object
.
assign
(
Object
.
create
(
Pass
.
prototype
),
{
constructor
:
UnrealBloomPass
,
dispose
:
function
()
{
for
(
var
i
=
0
;
i
<
this
.
renderTargetsHorizontal
.
length
;
i
++
)
{
this
.
renderTargetsHorizontal
[
i
].
dispose
();
}
for
(
var
i
=
0
;
i
<
this
.
renderTargetsVertical
.
length
;
i
++
)
{
this
.
renderTargetsVertical
[
i
].
dispose
();
}
this
.
renderTargetBright
.
dispose
();
},
setSize
:
function
(
width
,
height
)
{
var
resx
=
Math
.
round
(
width
/
2
);
var
resy
=
Math
.
round
(
height
/
2
);
this
.
renderTargetBright
.
setSize
(
resx
,
resy
);
for
(
var
i
=
0
;
i
<
this
.
nMips
;
i
++
)
{
this
.
renderTargetsHorizontal
[
i
].
setSize
(
resx
,
resy
);
this
.
renderTargetsVertical
[
i
].
setSize
(
resx
,
resy
);
this
.
separableBlurMaterials
[
i
].
uniforms
[
"
texSize
"
].
value
=
new
Vector2
(
resx
,
resy
);
resx
=
Math
.
round
(
resx
/
2
);
resy
=
Math
.
round
(
resy
/
2
);
}
},
render
:
function
(
renderer
,
writeBuffer
,
readBuffer
,
deltaTime
,
maskActive
)
{
this
.
oldClearColor
.
copy
(
renderer
.
getClearColor
()
);
this
.
oldClearAlpha
=
renderer
.
getClearAlpha
();
var
oldAutoClear
=
renderer
.
autoClear
;
renderer
.
autoClear
=
false
;
renderer
.
setClearColor
(
this
.
clearColor
,
0
);
if
(
maskActive
)
renderer
.
context
.
disable
(
renderer
.
context
.
STENCIL_TEST
);
// Render input to screen
if
(
this
.
renderToScreen
)
{
this
.
fsQuad
.
material
=
this
.
basic
;
this
.
basic
.
map
=
readBuffer
.
texture
;
renderer
.
setRenderTarget
(
null
);
renderer
.
clear
();
this
.
fsQuad
.
render
(
renderer
);
}
// 1. Extract Bright Areas
this
.
highPassUniforms
[
"
tDiffuse
"
].
value
=
readBuffer
.
texture
;
this
.
highPassUniforms
[
"
luminosityThreshold
"
].
value
=
this
.
threshold
;
this
.
fsQuad
.
material
=
this
.
materialHighPassFilter
;
renderer
.
setRenderTarget
(
this
.
renderTargetBright
);
renderer
.
clear
();
this
.
fsQuad
.
render
(
renderer
);
// 2. Blur All the mips progressively
var
inputRenderTarget
=
this
.
renderTargetBright
;
for
(
var
i
=
0
;
i
<
this
.
nMips
;
i
++
)
{
this
.
fsQuad
.
material
=
this
.
separableBlurMaterials
[
i
];
this
.
separableBlurMaterials
[
i
].
uniforms
[
"
colorTexture
"
].
value
=
inputRenderTarget
.
texture
;
this
.
separableBlurMaterials
[
i
].
uniforms
[
"
direction
"
].
value
=
UnrealBloomPass
.
BlurDirectionX
;
renderer
.
setRenderTarget
(
this
.
renderTargetsHorizontal
[
i
]
);
renderer
.
clear
();
this
.
fsQuad
.
render
(
renderer
);
this
.
separableBlurMaterials
[
i
].
uniforms
[
"
colorTexture
"
].
value
=
this
.
renderTargetsHorizontal
[
i
].
texture
;
this
.
separableBlurMaterials
[
i
].
uniforms
[
"
direction
"
].
value
=
UnrealBloomPass
.
BlurDirectionY
;
renderer
.
setRenderTarget
(
this
.
renderTargetsVertical
[
i
]
);
renderer
.
clear
();
this
.
fsQuad
.
render
(
renderer
);
inputRenderTarget
=
this
.
renderTargetsVertical
[
i
];
}
// Composite All the mips
this
.
fsQuad
.
material
=
this
.
compositeMaterial
;
this
.
compositeMaterial
.
uniforms
[
"
bloomStrength
"
].
value
=
this
.
strength
;
this
.
compositeMaterial
.
uniforms
[
"
bloomRadius
"
].
value
=
this
.
radius
;
this
.
compositeMaterial
.
uniforms
[
"
bloomTintColors
"
].
value
=
this
.
bloomTintColors
;
renderer
.
setRenderTarget
(
this
.
renderTargetsHorizontal
[
0
]
);
renderer
.
clear
();
this
.
fsQuad
.
render
(
renderer
);
// Blend it additively over the input texture
this
.
fsQuad
.
material
=
this
.
materialCopy
;
this
.
copyUniforms
[
"
tDiffuse
"
].
value
=
this
.
renderTargetsHorizontal
[
0
].
texture
;
if
(
maskActive
)
renderer
.
context
.
enable
(
renderer
.
context
.
STENCIL_TEST
);
if
(
this
.
renderToScreen
)
{
renderer
.
setRenderTarget
(
null
);
this
.
fsQuad
.
render
(
renderer
);
}
else
{
renderer
.
setRenderTarget
(
readBuffer
);
this
.
fsQuad
.
render
(
renderer
);
}
// Restore renderer settings
renderer
.
setClearColor
(
this
.
oldClearColor
,
this
.
oldClearAlpha
);
renderer
.
autoClear
=
oldAutoClear
;
},
getSeperableBlurMaterial
:
function
(
kernelRadius
)
{
return
new
ShaderMaterial
(
{
defines
:
{
"
KERNEL_RADIUS
"
:
kernelRadius
,
"
SIGMA
"
:
kernelRadius
},
uniforms
:
{
"
colorTexture
"
:
{
value
:
null
},
"
texSize
"
:
{
value
:
new
Vector2
(
0.5
,
0.5
)
},
"
direction
"
:
{
value
:
new
Vector2
(
0.5
,
0.5
)
}
},
vertexShader
:
"
varying vec2 vUv;
\n\
void main() {
\n\
vUv = uv;
\n\
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
\n\
}
"
,
fragmentShader
:
"
#include <common>
\
varying vec2 vUv;
\n\
uniform sampler2D colorTexture;
\n\
uniform vec2 texSize;
\
uniform vec2 direction;
\
\
float gaussianPdf(in float x, in float sigma) {
\
return 0.39894 * exp( -0.5 * x * x/( sigma * sigma))/sigma;
\
}
\
void main() {
\n\
vec2 invSize = 1.0 / texSize;
\
float fSigma = float(SIGMA);
\
float weightSum = gaussianPdf(0.0, fSigma);
\
vec3 diffuseSum = texture2D( colorTexture, vUv).rgb * weightSum;
\
for( int i = 1; i < KERNEL_RADIUS; i ++ ) {
\
float x = float(i);
\
float w = gaussianPdf(x, fSigma);
\
vec2 uvOffset = direction * invSize * x;
\
vec3 sample1 = texture2D( colorTexture, vUv + uvOffset).rgb;
\
vec3 sample2 = texture2D( colorTexture, vUv - uvOffset).rgb;
\
diffuseSum += (sample1 + sample2) * w;
\
weightSum += 2.0 * w;
\
}
\
gl_FragColor = vec4(diffuseSum/weightSum, 1.0);
\n\
}
"
}
);
},
getCompositeMaterial
:
function
(
nMips
)
{
return
new
ShaderMaterial
(
{
defines
:
{
"
NUM_MIPS
"
:
nMips
},
uniforms
:
{
"
blurTexture1
"
:
{
value
:
null
},
"
blurTexture2
"
:
{
value
:
null
},
"
blurTexture3
"
:
{
value
:
null
},
"
blurTexture4
"
:
{
value
:
null
},
"
blurTexture5
"
:
{
value
:
null
},
"
dirtTexture
"
:
{
value
:
null
},
"
bloomStrength
"
:
{
value
:
1.0
},
"
bloomFactors
"
:
{
value
:
null
},
"
bloomTintColors
"
:
{
value
:
null
},
"
bloomRadius
"
:
{
value
:
0.0
}
},
vertexShader
:
"
varying vec2 vUv;
\n\
void main() {
\n\
vUv = uv;
\n\
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
\n\
}
"
,
fragmentShader
:
"
varying vec2 vUv;
\
uniform sampler2D blurTexture1;
\
uniform sampler2D blurTexture2;
\
uniform sampler2D blurTexture3;
\
uniform sampler2D blurTexture4;
\
uniform sampler2D blurTexture5;
\
uniform sampler2D dirtTexture;
\
uniform float bloomStrength;
\
uniform float bloomRadius;
\
uniform float bloomFactors[NUM_MIPS];
\
uniform vec3 bloomTintColors[NUM_MIPS];
\
\
float lerpBloomFactor(const in float factor) {
\
float mirrorFactor = 1.2 - factor;
\
return mix(factor, mirrorFactor, bloomRadius);
\
}
\
\
void main() {
\
gl_FragColor = bloomStrength * ( lerpBloomFactor(bloomFactors[0]) * vec4(bloomTintColors[0], 1.0) * texture2D(blurTexture1, vUv) +
\
lerpBloomFactor(bloomFactors[1]) * vec4(bloomTintColors[1], 1.0) * texture2D(blurTexture2, vUv) +
\
lerpBloomFactor(bloomFactors[2]) * vec4(bloomTintColors[2], 1.0) * texture2D(blurTexture3, vUv) +
\
lerpBloomFactor(bloomFactors[3]) * vec4(bloomTintColors[3], 1.0) * texture2D(blurTexture4, vUv) +
\
lerpBloomFactor(bloomFactors[4]) * vec4(bloomTintColors[4], 1.0) * texture2D(blurTexture5, vUv) );
\
}
"
}
);
}
}
);
UnrealBloomPass
.
BlurDirectionX
=
new
Vector2
(
1.0
,
0.0
);
UnrealBloomPass
.
BlurDirectionY
=
new
Vector2
(
0.0
,
1.0
);
export
{
UnrealBloomPass
};
utils/modularize.js
浏览文件 @
68d3b523
...
...
@@ -85,6 +85,7 @@ var files = [
{
path
:
'
postprocessing/SavePass.js
'
,
dependencies
:
[
{
name
:
'
Pass
'
,
path
:
'
postprocessing/Pass.js
'
},
{
name
:
'
CopyShader
'
,
path
:
'
shaders/CopyShader.js
'
}
],
ignoreList
:
[]
},
{
path
:
'
postprocessing/ShaderPass.js
'
,
dependencies
:
[
{
name
:
'
Pass
'
,
path
:
'
postprocessing/Pass.js
'
}
],
ignoreList
:
[]
},
{
path
:
'
postprocessing/TexturePass.js
'
,
dependencies
:
[
{
name
:
'
Pass
'
,
path
:
'
postprocessing/Pass.js
'
},
{
name
:
'
CopyShader
'
,
path
:
'
shaders/CopyShader.js
'
}
],
ignoreList
:
[]
},
{
path
:
'
postprocessing/UnrealBloomPass.js
'
,
dependencies
:
[
{
name
:
'
Pass
'
,
path
:
'
postprocessing/Pass.js
'
},
{
name
:
'
CopyShader
'
,
path
:
'
shaders/CopyShader.js
'
},
{
name
:
'
LuminosityHighPassShader
'
,
path
:
'
shaders/LuminosityHighPassShader.js
'
}
],
ignoreList
:
[]
},
{
path
:
'
renderers/CSS2DRenderer.js
'
,
dependencies
:
[],
ignoreList
:
[]
},
{
path
:
'
renderers/CSS3DRenderer.js
'
,
dependencies
:
[],
ignoreList
:
[]
},
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录