Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Ablesons
three.js
提交
797530e4
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,发现更多精彩内容 >>
提交
797530e4
编写于
8月 31, 2011
作者:
A
alteredq
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Moved 2d filter shaders from ShaderUtils to ShaderExtras.
上级
10e12a83
变更
20
展开全部
隐藏空白更改
内联
并排
Showing
20 changed file
with
693 addition
and
770 deletion
+693
-770
build/Three.js
build/Three.js
+56
-64
build/custom/ThreeExtras.js
build/custom/ThreeExtras.js
+1
-9
examples/js/ShaderExtras.js
examples/js/ShaderExtras.js
+576
-36
examples/js/postprocessing/BloomPass.js
examples/js/postprocessing/BloomPass.js
+3
-3
examples/js/postprocessing/DotScreenPass.js
examples/js/postprocessing/DotScreenPass.js
+1
-1
examples/js/postprocessing/FilmPass.js
examples/js/postprocessing/FilmPass.js
+1
-1
examples/js/postprocessing/TexturePass.js
examples/js/postprocessing/TexturePass.js
+1
-1
examples/webgl_flycamera_earth.html
examples/webgl_flycamera_earth.html
+2
-0
examples/webgl_geometry_text.html
examples/webgl_geometry_text.html
+2
-0
examples/webgl_lines_colors.html
examples/webgl_lines_colors.html
+3
-1
examples/webgl_lines_splines.html
examples/webgl_lines_splines.html
+13
-110
examples/webgl_materials_video.html
examples/webgl_materials_video.html
+5
-3
examples/webgl_particles_dynamic.html
examples/webgl_particles_dynamic.html
+6
-4
examples/webgl_postprocessing.html
examples/webgl_postprocessing.html
+6
-4
examples/webgl_postprocessing_dof.html
examples/webgl_postprocessing_dof.html
+1
-1
examples/webgl_ribbons.html
examples/webgl_ribbons.html
+3
-1
examples/webgl_sandbox.html
examples/webgl_sandbox.html
+5
-3
examples/webgl_shader_lava.html
examples/webgl_shader_lava.html
+2
-0
examples/webgl_shadowmap.html
examples/webgl_shadowmap.html
+3
-1
src/extras/ShaderUtils.js
src/extras/ShaderUtils.js
+3
-527
未找到文件。
build/Three.js
浏览文件 @
797530e4
此差异已折叠。
点击以展开。
build/custom/ThreeExtras.js
浏览文件 @
797530e4
...
...
@@ -19,15 +19,7 @@ normal:{uniforms:THREE.UniformsUtils.merge([THREE.UniformsLib.fog,THREE.Uniforms
value
:
new
THREE
.
Color
(
15658734
)},
uSpecularColor
:{
type
:
"
c
"
,
value
:
new
THREE
.
Color
(
1118481
)},
uAmbientColor
:{
type
:
"
c
"
,
value
:
new
THREE
.
Color
(
328965
)},
uShininess
:{
type
:
"
f
"
,
value
:
30
},
uOpacity
:{
type
:
"
f
"
,
value
:
1
}}]),
fragmentShader
:[
"
uniform vec3 uAmbientColor;
\n
uniform vec3 uDiffuseColor;
\n
uniform vec3 uSpecularColor;
\n
uniform float uShininess;
\n
uniform float uOpacity;
\n
uniform bool enableDiffuse;
\n
uniform bool enableSpecular;
\n
uniform bool enableAO;
\n
uniform sampler2D tDiffuse;
\n
uniform sampler2D tNormal;
\n
uniform sampler2D tSpecular;
\n
uniform sampler2D tAO;
\n
uniform float uNormalScale;
\n
varying vec3 vTangent;
\n
varying vec3 vBinormal;
\n
varying vec3 vNormal;
\n
varying vec2 vUv;
\n
uniform vec3 ambientLightColor;
\n
#if MAX_DIR_LIGHTS > 0
\n
uniform vec3 directionalLightColor[ MAX_DIR_LIGHTS ];
\n
uniform vec3 directionalLightDirection[ MAX_DIR_LIGHTS ];
\n
#endif
\n
#if MAX_POINT_LIGHTS > 0
\n
uniform vec3 pointLightColor[ MAX_POINT_LIGHTS ];
\n
varying vec4 vPointLight[ MAX_POINT_LIGHTS ];
\n
#endif
\n
varying vec3 vViewPosition;
"
,
THREE
.
ShaderChunk
.
fog_pars_fragment
,
"
void main() {
\n
gl_FragColor = vec4( 1.0 );
\n
vec4 mColor = vec4( uDiffuseColor, uOpacity );
\n
vec4 mSpecular = vec4( uSpecularColor, uOpacity );
\n
vec3 specularTex = vec3( 1.0 );
\n
vec3 normalTex = texture2D( tNormal, vUv ).xyz * 2.0 - 1.0;
\n
normalTex.xy *= uNormalScale;
\n
normalTex = normalize( normalTex );
\n
if( enableDiffuse )
\n
gl_FragColor = gl_FragColor * texture2D( tDiffuse, vUv );
\n
if( enableAO )
\n
gl_FragColor = gl_FragColor * texture2D( tAO, vUv );
\n
if( enableSpecular )
\n
specularTex = texture2D( tSpecular, vUv ).xyz;
\n
mat3 tsb = mat3( vTangent, vBinormal, vNormal );
\n
vec3 finalNormal = tsb * normalTex;
\n
vec3 normal = normalize( finalNormal );
\n
vec3 viewPosition = normalize( vViewPosition );
\n
#if MAX_POINT_LIGHTS > 0
\n
vec4 pointTotal = vec4( vec3( 0.0 ), 1.0 );
\n
for ( int i = 0; i < MAX_POINT_LIGHTS; i ++ ) {
\n
vec3 pointVector = normalize( vPointLight[ i ].xyz );
\n
vec3 pointHalfVector = normalize( vPointLight[ i ].xyz + viewPosition );
\n
float pointDistance = vPointLight[ i ].w;
\n
float pointDotNormalHalf = dot( normal, pointHalfVector );
\n
float pointDiffuseWeight = max( dot( normal, pointVector ), 0.0 );
\n
float pointSpecularWeight = 0.0;
\n
if ( pointDotNormalHalf >= 0.0 )
\n
pointSpecularWeight = specularTex.r * pow( pointDotNormalHalf, uShininess );
\n
pointTotal += pointDistance * vec4( pointLightColor[ i ], 1.0 ) * ( mColor * pointDiffuseWeight + mSpecular * pointSpecularWeight * pointDiffuseWeight );
\n
}
\n
#endif
\n
#if MAX_DIR_LIGHTS > 0
\n
vec4 dirTotal = vec4( vec3( 0.0 ), 1.0 );
\n
for( int i = 0; i < MAX_DIR_LIGHTS; i++ ) {
\n
vec4 lDirection = viewMatrix * vec4( directionalLightDirection[ i ], 0.0 );
\n
vec3 dirVector = normalize( lDirection.xyz );
\n
vec3 dirHalfVector = normalize( lDirection.xyz + viewPosition );
\n
float dirDotNormalHalf = dot( normal, dirHalfVector );
\n
float dirDiffuseWeight = max( dot( normal, dirVector ), 0.0 );
\n
float dirSpecularWeight = 0.0;
\n
if ( dirDotNormalHalf >= 0.0 )
\n
dirSpecularWeight = specularTex.r * pow( dirDotNormalHalf, uShininess );
\n
dirTotal += vec4( directionalLightColor[ i ], 1.0 ) * ( mColor * dirDiffuseWeight + mSpecular * dirSpecularWeight * dirDiffuseWeight );
\n
}
\n
#endif
\n
vec4 totalLight = vec4( ambientLightColor * uAmbientColor, uOpacity );
\n
#if MAX_DIR_LIGHTS > 0
\n
totalLight += dirTotal;
\n
#endif
\n
#if MAX_POINT_LIGHTS > 0
\n
totalLight += pointTotal;
\n
#endif
\n
gl_FragColor = gl_FragColor * totalLight;
"
,
THREE
.
ShaderChunk
.
fog_fragment
,
"
}
"
].
join
(
"
\n
"
),
vertexShader
:
"
attribute vec4 tangent;
\n
#ifdef VERTEX_TEXTURES
\n
uniform sampler2D tDisplacement;
\n
uniform float uDisplacementScale;
\n
uniform float uDisplacementBias;
\n
#endif
\n
varying vec3 vTangent;
\n
varying vec3 vBinormal;
\n
varying vec3 vNormal;
\n
varying vec2 vUv;
\n
#if MAX_POINT_LIGHTS > 0
\n
uniform vec3 pointLightPosition[ MAX_POINT_LIGHTS ];
\n
uniform float pointLightDistance[ MAX_POINT_LIGHTS ];
\n
varying vec4 vPointLight[ MAX_POINT_LIGHTS ];
\n
#endif
\n
varying vec3 vViewPosition;
\n
void main() {
\n
vec4 mPosition = objectMatrix * vec4( position, 1.0 );
\n
vViewPosition = cameraPosition - mPosition.xyz;
\n
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
\n
vNormal = normalize( normalMatrix * normal );
\n
vTangent = normalize( normalMatrix * tangent.xyz );
\n
vBinormal = cross( vNormal, vTangent ) * tangent.w;
\n
vBinormal = normalize( vBinormal );
\n
vUv = uv;
\n
#if MAX_POINT_LIGHTS > 0
\n
for( int i = 0; i < MAX_POINT_LIGHTS; i++ ) {
\n
vec4 lPosition = viewMatrix * vec4( pointLightPosition[ i ], 1.0 );
\n
vec3 lVector = lPosition.xyz - mvPosition.xyz;
\n
float lDistance = 1.0;
\n
if ( pointLightDistance[ i ] > 0.0 )
\n
lDistance = 1.0 - min( ( length( lVector ) / pointLightDistance[ i ] ), 1.0 );
\n
lVector = normalize( lVector );
\n
vPointLight[ i ] = vec4( lVector, lDistance );
\n
}
\n
#endif
\n
#ifdef VERTEX_TEXTURES
\n
vec3 dv = texture2D( tDisplacement, uv ).xyz;
\n
float df = uDisplacementScale * dv.x + uDisplacementBias;
\n
vec4 displacedPosition = vec4( vNormal.xyz * df, 0.0 ) + mvPosition;
\n
gl_Position = projectionMatrix * displacedPosition;
\n
#else
\n
gl_Position = projectionMatrix * mvPosition;
\n
#endif
\n
}
"
},
cube
:{
uniforms
:{
tCube
:{
type
:
"
t
"
,
value
:
1
,
texture
:
null
}},
vertexShader
:
"
varying vec3 vViewPosition;
\n
void main() {
\n
vec4 mPosition = objectMatrix * vec4( position, 1.0 );
\n
vViewPosition = cameraPosition - mPosition.xyz;
\n
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
\n
}
"
,
fragmentShader
:
"
uniform samplerCube tCube;
\n
varying vec3 vViewPosition;
\n
void main() {
\n
vec3 wPos = cameraPosition - vViewPosition;
\n
gl_FragColor = textureCube( tCube, vec3( - wPos.x, wPos.yz ) );
\n
}
"
},
convolution
:{
uniforms
:{
tDiffuse
:{
type
:
"
t
"
,
value
:
0
,
texture
:
null
},
uImageIncrement
:{
type
:
"
v2
"
,
value
:
new
THREE
.
Vector2
(
0.001953125
,
0
)},
cKernel
:{
type
:
"
fv1
"
,
value
:[]}},
vertexShader
:
"
uniform vec2 uImageIncrement;
\n
varying vec2 vUv;
\n
void main() {
\n
vUv = uv - ( ( KERNEL_SIZE - 1.0 ) / 2.0 ) * uImageIncrement;
\n
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
\n
}
"
,
fragmentShader
:
"
uniform float cKernel[ KERNEL_SIZE ];
\n
uniform sampler2D tDiffuse;
\n
uniform vec2 uImageIncrement;
\n
varying vec2 vUv;
\n
void main() {
\n
vec2 imageCoord = vUv;
\n
vec4 sum = vec4( 0.0, 0.0, 0.0, 0.0 );
\n
for( int i = 0; i < KERNEL_SIZE; i ++ ) {
\n
sum += texture2D( tDiffuse, imageCoord ) * cKernel[ i ];
\n
imageCoord += uImageIncrement;
\n
}
\n
gl_FragColor = sum;
\n
}
"
},
film
:{
uniforms
:{
tDiffuse
:{
type
:
"
t
"
,
value
:
0
,
texture
:
null
},
time
:{
type
:
"
f
"
,
value
:
0
},
nIntensity
:{
type
:
"
f
"
,
value
:
0.5
},
sIntensity
:{
type
:
"
f
"
,
value
:
0.05
},
sCount
:{
type
:
"
f
"
,
value
:
4096
},
grayscale
:{
type
:
"
i
"
,
value
:
1
}},
vertexShader
:
"
varying vec2 vUv;
\n
void main() {
\n
vUv = vec2( uv.x, 1.0 - uv.y );
\n
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
\n
}
"
,
fragmentShader
:
"
uniform float time;
\n
uniform bool grayscale;
\n
uniform float nIntensity;
\n
uniform float sIntensity;
\n
uniform float sCount;
\n
uniform sampler2D tDiffuse;
\n
varying vec2 vUv;
\n
void main() {
\n
vec4 cTextureScreen = texture2D( tDiffuse, vUv );
\n
float x = vUv.x * vUv.y * time * 1000.0;
\n
x = mod( x, 13.0 ) * mod( x, 123.0 );
\n
float dx = mod( x, 0.01 );
\n
vec3 cResult = cTextureScreen.rgb + cTextureScreen.rgb * clamp( 0.1 + dx * 100.0, 0.0, 1.0 );
\n
vec2 sc = vec2( sin( vUv.y * sCount ), cos( vUv.y * sCount ) );
\n
cResult += cTextureScreen.rgb * vec3( sc.x, sc.y, sc.x ) * sIntensity;
\n
cResult = cTextureScreen.rgb + clamp( nIntensity, 0.0,1.0 ) * ( cResult - cTextureScreen.rgb );
\n
if( grayscale ) {
\n
cResult = vec3( cResult.r * 0.3 + cResult.g * 0.59 + cResult.b * 0.11 );
\n
}
\n
gl_FragColor = vec4( cResult, cTextureScreen.a );
\n
}
"
},
sepia
:{
uniforms
:{
tDiffuse
:{
type
:
"
t
"
,
value
:
0
,
texture
:
null
},
amount
:{
type
:
"
f
"
,
value
:
1
}},
vertexShader
:
"
varying vec2 vUv;
\n
void main() {
\n
vUv = vec2( uv.x, 1.0 - uv.y );
\n
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
\n
}
"
,
fragmentShader
:
"
uniform float amount;
\n
uniform sampler2D tDiffuse;
\n
varying vec2 vUv;
\n
void main() {
\n
vec4 color = texture2D( tDiffuse, vUv );
\n
vec3 c = color.rgb;
\n
color.r = dot( c, vec3( 1.0 - 0.607 * amount, 0.769 * amount, 0.189 * amount ) );
\n
color.g = dot( c, vec3( 0.349 * amount, 1.0 - 0.314 * amount, 0.168 * amount ) );
\n
color.b = dot( c, vec3( 0.272 * amount, 0.534 * amount, 1.0 - 0.869 * amount ) );
\n
gl_FragColor = vec4( min( vec3( 1.0 ), color.rgb ), color.a );
\n
}
"
},
dotscreen
:{
uniforms
:{
tDiffuse
:{
type
:
"
t
"
,
value
:
0
,
texture
:
null
},
tSize
:{
type
:
"
v2
"
,
value
:
new
THREE
.
Vector2
(
256
,
256
)},
center
:{
type
:
"
v2
"
,
value
:
new
THREE
.
Vector2
(
0.5
,
0.5
)},
angle
:{
type
:
"
f
"
,
value
:
1.57
},
scale
:{
type
:
"
f
"
,
value
:
1
}},
vertexShader
:
"
varying vec2 vUv;
\n
void main() {
\n
vUv = vec2( uv.x, 1.0 - uv.y );
\n
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
\n
}
"
,
fragmentShader
:
"
uniform vec2 center;
\n
uniform float angle;
\n
uniform float scale;
\n
uniform vec2 tSize;
\n
uniform sampler2D tDiffuse;
\n
varying vec2 vUv;
\n
float pattern() {
\n
float s = sin( angle ), c = cos( angle );
\n
vec2 tex = vUv * tSize - center;
\n
vec2 point = vec2( c * tex.x - s * tex.y, s * tex.x + c * tex.y ) * scale;
\n
return ( sin( point.x ) * sin( point.y ) ) * 4.0;
\n
}
\n
void main() {
\n
vec4 color = texture2D( tDiffuse, vUv );
\n
float average = ( color.r + color.g + color.b ) / 3.0;
\n
gl_FragColor = vec4( vec3( average * 10.0 - 5.0 + pattern() ), color.a );
\n
}
"
},
vignette
:{
uniforms
:{
tDiffuse
:{
type
:
"
t
"
,
value
:
0
,
texture
:
null
},
offset
:{
type
:
"
f
"
,
value
:
1
},
darkness
:{
type
:
"
f
"
,
value
:
1
}},
vertexShader
:
"
varying vec2 vUv;
\n
void main() {
\n
vUv = vec2( uv.x, 1.0 - uv.y );
\n
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
\n
}
"
,
fragmentShader
:
"
uniform float offset;
\n
uniform float darkness;
\n
uniform sampler2D tDiffuse;
\n
varying vec2 vUv;
\n
void main() {
\n
vec4 texel = texture2D( tDiffuse, vUv );
\n
vec2 uv = ( vUv - vec2( 0.5 ) ) * vec2( offset );
\n
gl_FragColor = vec4( mix( texel.rgb, vec3( 1.0 - darkness ), dot( uv, uv ) ), texel.a );
\n
}
"
},
bleachbypass
:{
uniforms
:{
tDiffuse
:{
type
:
"
t
"
,
value
:
0
,
texture
:
null
},
opacity
:{
type
:
"
f
"
,
value
:
1
}},
vertexShader
:
"
varying vec2 vUv;
\n
void main() {
\n
vUv = vec2( uv.x, 1.0 - uv.y );
\n
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
\n
}
"
,
fragmentShader
:
"
uniform float opacity;
\n
uniform sampler2D tDiffuse;
\n
varying vec2 vUv;
\n
void main() {
\n
vec4 base = texture2D( tDiffuse, vUv );
\n
vec3 lumCoeff = vec3( 0.25, 0.65, 0.1 );
\n
float lum = dot( lumCoeff, base.rgb );
\n
vec3 blend = vec3( lum );
\n
float L = min( 1.0, max( 0.0, 10.0 * ( lum - 0.45 ) ) );
\n
vec3 result1 = 2.0 * base.rgb * blend;
\n
vec3 result2 = 1.0 - 2.0 * ( 1.0 - blend ) * ( 1.0 - base.rgb );
\n
vec3 newColor = mix( result1, result2, L );
\n
float A2 = opacity * base.a;
\n
vec3 mixRGB = A2 * newColor.rgb;
\n
mixRGB += ( ( 1.0 - A2 ) * base.rgb );
\n
gl_FragColor = vec4( mixRGB, base.a );
\n
}
"
},
screen
:{
uniforms
:{
tDiffuse
:{
type
:
"
t
"
,
value
:
0
,
texture
:
null
},
opacity
:{
type
:
"
f
"
,
value
:
1
}},
vertexShader
:
"
varying vec2 vUv;
\n
void main() {
\n
vUv = vec2( uv.x, 1.0 - uv.y );
\n
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
\n
}
"
,
fragmentShader
:
"
uniform float opacity;
\n
uniform sampler2D tDiffuse;
\n
varying vec2 vUv;
\n
void main() {
\n
vec4 texel = texture2D( tDiffuse, vUv );
\n
gl_FragColor = opacity * texel;
\n
}
"
},
basic
:{
uniforms
:{},
vertexShader
:
"
void main() {
\n
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
\n
}
"
,
fragmentShader
:
"
void main() {
\n
gl_FragColor = vec4( 1.0, 0.0, 0.0, 0.5 );
\n
}
"
}},
buildKernel
:
function
(
a
){
var
b
,
c
,
e
,
f
,
h
=
2
*
Math
.
ceil
(
a
*
3
)
+
1
;
h
>
25
&&
(
h
=
25
);
f
=
(
h
-
1
)
*
0.5
;
c
=
Array
(
h
);
for
(
b
=
e
=
0
;
b
<
h
;
++
b
)
c
[
b
]
=
Math
.
exp
(
-
((
b
-
f
)
*
(
b
-
f
))
/
(
2
*
a
*
a
)),
e
+=
c
[
b
];
for
(
b
=
0
;
b
<
h
;
++
b
)
c
[
b
]
/=
e
;
return
c
}};
cube
:{
uniforms
:{
tCube
:{
type
:
"
t
"
,
value
:
1
,
texture
:
null
}},
vertexShader
:
"
varying vec3 vViewPosition;
\n
void main() {
\n
vec4 mPosition = objectMatrix * vec4( position, 1.0 );
\n
vViewPosition = cameraPosition - mPosition.xyz;
\n
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
\n
}
"
,
fragmentShader
:
"
uniform samplerCube tCube;
\n
varying vec3 vViewPosition;
\n
void main() {
\n
vec3 wPos = cameraPosition - vViewPosition;
\n
gl_FragColor = textureCube( tCube, vec3( - wPos.x, wPos.yz ) );
\n
}
"
}}};
THREE
.
AnimationHandler
=
function
(){
var
a
=
[],
b
=
{},
c
=
{
update
:
function
(
c
){
for
(
var
b
=
0
;
b
<
a
.
length
;
b
++
)
a
[
b
].
update
(
c
)},
addToUpdate
:
function
(
c
){
a
.
indexOf
(
c
)
===-
1
&&
a
.
push
(
c
)},
removeFromUpdate
:
function
(
c
){
c
=
a
.
indexOf
(
c
);
c
!==-
1
&&
a
.
splice
(
c
,
1
)},
add
:
function
(
a
){
b
[
a
.
name
]
!==
void
0
&&
console
.
log
(
"
THREE.AnimationHandler.add: Warning!
"
+
a
.
name
+
"
already exists in library. Overwriting.
"
);
b
[
a
.
name
]
=
a
;
if
(
a
.
initialized
!==!
0
){
for
(
var
c
=
0
;
c
<
a
.
hierarchy
.
length
;
c
++
){
for
(
var
e
=
0
;
e
<
a
.
hierarchy
[
c
].
keys
.
length
;
e
++
){
if
(
a
.
hierarchy
[
c
].
keys
[
e
].
time
<
0
)
a
.
hierarchy
[
c
].
keys
[
e
].
time
=
0
;
if
(
a
.
hierarchy
[
c
].
keys
[
e
].
rot
!==
void
0
&&!
(
a
.
hierarchy
[
c
].
keys
[
e
].
rot
instanceof
THREE
.
Quaternion
)){
var
j
=
a
.
hierarchy
[
c
].
keys
[
e
].
rot
;
a
.
hierarchy
[
c
].
keys
[
e
].
rot
=
new
THREE
.
Quaternion
(
j
[
0
],
j
[
1
],
j
[
2
],
j
[
3
])}}
if
(
a
.
hierarchy
[
c
].
keys
[
0
].
morphTargets
!==
void
0
){
j
=
{};
for
(
e
=
0
;
e
<
a
.
hierarchy
[
c
].
keys
.
length
;
e
++
)
for
(
var
k
=
0
;
k
<
a
.
hierarchy
[
c
].
keys
[
e
].
morphTargets
.
length
;
k
++
){
var
l
=
a
.
hierarchy
[
c
].
keys
[
e
].
morphTargets
[
k
];
j
[
l
]
=-
1
}
a
.
hierarchy
[
c
].
usedMorphTargets
=
j
;
for
(
e
=
0
;
e
<
a
.
hierarchy
[
c
].
keys
.
length
;
e
++
){
var
m
=
{};
for
(
l
in
j
){
for
(
k
=
0
;
k
<
a
.
hierarchy
[
c
].
keys
[
e
].
morphTargets
.
length
;
k
++
)
if
(
a
.
hierarchy
[
c
].
keys
[
e
].
morphTargets
[
k
]
===
l
){
m
[
l
]
=
a
.
hierarchy
[
c
].
keys
[
e
].
morphTargetsInfluences
[
k
];
break
}
k
===
a
.
hierarchy
[
c
].
keys
[
e
].
morphTargets
.
length
&&
(
m
[
l
]
=
0
)}
a
.
hierarchy
[
c
].
keys
[
e
].
morphTargetsInfluences
=
m
}}
for
(
e
=
1
;
e
<
a
.
hierarchy
[
c
].
keys
.
length
;
e
++
)
a
.
hierarchy
[
c
].
keys
[
e
].
time
===
a
.
hierarchy
[
c
].
keys
[
e
-
1
].
time
&&
(
a
.
hierarchy
[
c
].
keys
.
splice
(
e
,
1
),
e
--
);
for
(
e
=
1
;
e
<
a
.
hierarchy
[
c
].
keys
.
length
;
e
++
)
a
.
hierarchy
[
c
].
keys
[
e
].
index
=
e
}
e
=
parseInt
(
a
.
length
*
...
...
examples/js/ShaderExtras.js
浏览文件 @
797530e4
var
ShaderExtras
=
{
/**
* @author alteredq / http://alteredqualia.com/
*
* ShaderExtras currently contains:
*
* screen
* convolution
* film
* bokeh
* sepia
* dotscreen
* vignette
* bleachbypass
* basic
*
*/
THREE
.
ShaderExtras
=
{
/* -------------------------------------------------------------------------
// Full-screen textured quad shader
------------------------------------------------------------------------- */
'
screen
'
:
{
uniforms
:
{
tDiffuse
:
{
type
:
"
t
"
,
value
:
0
,
texture
:
null
},
opacity
:
{
type
:
"
f
"
,
value
:
1.0
}
},
vertexShader
:
[
"
varying vec2 vUv;
"
,
"
void main() {
"
,
"
vUv = vec2( uv.x, 1.0 - uv.y );
"
,
"
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
"
,
"
}
"
].
join
(
"
\n
"
),
fragmentShader
:
[
"
uniform float opacity;
"
,
"
uniform sampler2D tDiffuse;
"
,
"
varying vec2 vUv;
"
,
"
void main() {
"
,
"
vec4 texel = texture2D( tDiffuse, vUv );
"
,
"
gl_FragColor = opacity * texel;
"
,
"
}
"
].
join
(
"
\n
"
)
},
/* ------------------------------------------------------------------------
// Convolution shader
// - ported from o3d sample to WebGL / GLSL
// http://o3d.googlecode.com/svn/trunk/samples/convolution.html
------------------------------------------------------------------------ */
'
convolution
'
:
{
uniforms
:
{
"
tDiffuse
"
:
{
type
:
"
t
"
,
value
:
0
,
texture
:
null
},
"
uImageIncrement
"
:
{
type
:
"
v2
"
,
value
:
new
THREE
.
Vector2
(
0.001953125
,
0.0
)
},
"
cKernel
"
:
{
type
:
"
fv1
"
,
value
:
[]
}
},
vertexShader
:
[
//"#define KERNEL_SIZE 25.0",
"
uniform vec2 uImageIncrement;
"
,
"
varying vec2 vUv;
"
,
"
void main() {
"
,
"
vUv = uv - ( ( KERNEL_SIZE - 1.0 ) / 2.0 ) * uImageIncrement;
"
,
"
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
"
,
"
}
"
].
join
(
"
\n
"
),
fragmentShader
:
[
//"#define KERNEL_SIZE 25",
"
uniform float cKernel[ KERNEL_SIZE ];
"
,
"
uniform sampler2D tDiffuse;
"
,
"
uniform vec2 uImageIncrement;
"
,
"
varying vec2 vUv;
"
,
"
void main() {
"
,
"
vec2 imageCoord = vUv;
"
,
"
vec4 sum = vec4( 0.0, 0.0, 0.0, 0.0 );
"
,
"
for( int i = 0; i < KERNEL_SIZE; i ++ ) {
"
,
"
sum += texture2D( tDiffuse, imageCoord ) * cKernel[ i ];
"
,
"
imageCoord += uImageIncrement;
"
,
"
}
"
,
"
gl_FragColor = sum;
"
,
"
}
"
].
join
(
"
\n
"
)
},
/* -------------------------------------------------------------------------
// Film grain & scanlines shader
// - ported from HLSL to WebGL / GLSL
// http://www.truevision3d.com/forums/showcase/staticnoise_colorblackwhite_scanline_shaders-t18698.0.html
// Screen Space Static Postprocessor
//
// Produces an analogue noise overlay similar to a film grain / TV static
//
// Original implementation and noise algorithm
// Pat 'Hawthorne' Shearon
//
// Optimized scanlines + noise version with intensity scaling
// Georg 'Leviathan' Steinrohder
// This version is provided under a Creative Commons Attribution 3.0 License
// http://creativecommons.org/licenses/by/3.0/
------------------------------------------------------------------------- */
'
film
'
:
{
uniforms
:
{
tDiffuse
:
{
type
:
"
t
"
,
value
:
0
,
texture
:
null
},
time
:
{
type
:
"
f
"
,
value
:
0.0
},
nIntensity
:
{
type
:
"
f
"
,
value
:
0.5
},
sIntensity
:
{
type
:
"
f
"
,
value
:
0.05
},
sCount
:
{
type
:
"
f
"
,
value
:
4096
},
grayscale
:
{
type
:
"
i
"
,
value
:
1
}
},
vertexShader
:
[
"
varying vec2 vUv;
"
,
"
void main() {
"
,
"
vUv = vec2( uv.x, 1.0 - uv.y );
"
,
"
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
"
,
"
}
"
].
join
(
"
\n
"
),
fragmentShader
:
[
// control parameter
"
uniform float time;
"
,
"
uniform bool grayscale;
"
,
// noise effect intensity value (0 = no effect, 1 = full effect)
"
uniform float nIntensity;
"
,
// scanlines effect intensity value (0 = no effect, 1 = full effect)
"
uniform float sIntensity;
"
,
// scanlines effect count value (0 = no effect, 4096 = full effect)
"
uniform float sCount;
"
,
"
uniform sampler2D tDiffuse;
"
,
"
varying vec2 vUv;
"
,
"
void main() {
"
,
// sample the source
"
vec4 cTextureScreen = texture2D( tDiffuse, vUv );
"
,
// make some noise
"
float x = vUv.x * vUv.y * time * 1000.0;
"
,
"
x = mod( x, 13.0 ) * mod( x, 123.0 );
"
,
"
float dx = mod( x, 0.01 );
"
,
// add noise
"
vec3 cResult = cTextureScreen.rgb + cTextureScreen.rgb * clamp( 0.1 + dx * 100.0, 0.0, 1.0 );
"
,
// get us a sine and cosine
"
vec2 sc = vec2( sin( vUv.y * sCount ), cos( vUv.y * sCount ) );
"
,
// add scanlines
"
cResult += cTextureScreen.rgb * vec3( sc.x, sc.y, sc.x ) * sIntensity;
"
,
// interpolate between source and result by intensity
"
cResult = cTextureScreen.rgb + clamp( nIntensity, 0.0,1.0 ) * ( cResult - cTextureScreen.rgb );
"
,
// convert to grayscale if desired
"
if( grayscale ) {
"
,
"
cResult = vec3( cResult.r * 0.3 + cResult.g * 0.59 + cResult.b * 0.11 );
"
,
"
}
"
,
"
gl_FragColor = vec4( cResult, cTextureScreen.a );
"
,
"
}
"
].
join
(
"
\n
"
)
},
/* -------------------------------------------------------------------------
// Depth-of-field shader with bokeh
// ported from GLSL shader by Martins Upitis
// ported from GLSL shader by Martins Upitis
// http://artmartinsh.blogspot.com/2010/02/glsl-lens-blur-filter-with-bokeh.html
------------------------------------------------------------------------- */
'
bokeh
'
:
{
uniforms
:
{
tColor
:
{
type
:
"
t
"
,
value
:
0
,
texture
:
null
},
...
...
@@ -21,10 +252,10 @@ var ShaderExtras = {
"
varying vec2 vUv;
"
,
"
void main() {
"
,
"
vUv = vec2( uv.x, 1.0 - uv.y );
"
,
"
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
"
,
"
}
"
].
join
(
"
\n
"
),
...
...
@@ -32,16 +263,16 @@ var ShaderExtras = {
fragmentShader
:
[
"
varying vec2 vUv;
"
,
"
uniform sampler2D tColor;
"
,
"
uniform sampler2D tDepth;
"
,
"
uniform float maxblur;
"
,
// max blur amount
"
uniform float aperture;
"
,
// aperture - bigger values for shallower depth of field
"
uniform float focus;
"
,
"
uniform float aspect;
"
,
"
void main() {
"
,
"
vec2 aspectcorrect = vec2( 1.0, aspect );
"
,
...
...
@@ -49,9 +280,9 @@ var ShaderExtras = {
"
vec4 depth1 = texture2D( tDepth, vUv );
"
,
"
float factor = depth1.x - focus;
"
,
"
vec2 dofblur = vec2 ( clamp( factor * aperture, -maxblur, maxblur ) );
"
,
"
vec2 dofblur9 = dofblur * 0.9;
"
,
"
vec2 dofblur7 = dofblur * 0.7;
"
,
"
vec2 dofblur4 = dofblur * 0.4;
"
,
...
...
@@ -64,52 +295,361 @@ var ShaderExtras = {
"
col += texture2D( tColor, vUv.xy + ( vec2( 0.29, 0.29 ) * aspectcorrect ) * dofblur );
"
,
"
col += texture2D( tColor, vUv.xy + ( vec2( -0.37, 0.15 ) * aspectcorrect ) * dofblur );
"
,
"
col += texture2D( tColor, vUv.xy + ( vec2( 0.40, 0.0 ) * aspectcorrect ) * dofblur );
"
,
"
col += texture2D( tColor, vUv.xy + ( vec2( 0.37, -0.15 ) * aspectcorrect ) * dofblur );
"
,
"
col += texture2D( tColor, vUv.xy + ( vec2( 0.29, -0.29 ) * aspectcorrect ) * dofblur );
"
,
"
col += texture2D( tColor, vUv.xy + ( vec2( 0.37, -0.15 ) * aspectcorrect ) * dofblur );
"
,
"
col += texture2D( tColor, vUv.xy + ( vec2( 0.29, -0.29 ) * aspectcorrect ) * dofblur );
"
,
"
col += texture2D( tColor, vUv.xy + ( vec2( -0.15, -0.37 ) * aspectcorrect ) * dofblur );
"
,
"
col += texture2D( tColor, vUv.xy + ( vec2( 0.0, -0.4 ) * aspectcorrect ) * dofblur );
"
,
"
col += texture2D( tColor, vUv.xy + ( vec2( 0.0, -0.4 ) * aspectcorrect ) * dofblur );
"
,
"
col += texture2D( tColor, vUv.xy + ( vec2( -0.15, 0.37 ) * aspectcorrect ) * dofblur );
"
,
"
col += texture2D( tColor, vUv.xy + ( vec2( -0.29, 0.29 ) * aspectcorrect ) * dofblur );
"
,
"
col += texture2D( tColor, vUv.xy + ( vec2( 0.37, 0.15 ) * aspectcorrect ) * dofblur );
"
,
"
col += texture2D( tColor, vUv.xy + ( vec2( -0.4, 0.0 ) * aspectcorrect ) * dofblur );
"
,
"
col += texture2D( tColor, vUv.xy + ( vec2( -0.37, -0.15 ) * aspectcorrect ) * dofblur );
"
,
"
col += texture2D( tColor, vUv.xy + ( vec2( -0.29, -0.29 ) * aspectcorrect ) * dofblur );
"
,
"
col += texture2D( tColor, vUv.xy + ( vec2( 0.37, 0.15 ) * aspectcorrect ) * dofblur );
"
,
"
col += texture2D( tColor, vUv.xy + ( vec2( -0.4, 0.0 ) * aspectcorrect ) * dofblur );
"
,
"
col += texture2D( tColor, vUv.xy + ( vec2( -0.37, -0.15 ) * aspectcorrect ) * dofblur );
"
,
"
col += texture2D( tColor, vUv.xy + ( vec2( -0.29, -0.29 ) * aspectcorrect ) * dofblur );
"
,
"
col += texture2D( tColor, vUv.xy + ( vec2( 0.15, -0.37 ) * aspectcorrect ) * dofblur );
"
,
"
col += texture2D( tColor, vUv.xy + ( vec2( 0.15, 0.37 ) * aspectcorrect ) * dofblur9 );
"
,
"
col += texture2D( tColor, vUv.xy + ( vec2( -0.37, 0.15 ) * aspectcorrect ) * dofblur9 );
"
,
"
col += texture2D( tColor, vUv.xy + ( vec2( 0.37, -0.15 ) * aspectcorrect ) * dofblur9 );
"
,
"
col += texture2D( tColor, vUv.xy + ( vec2( -0.37, 0.15 ) * aspectcorrect ) * dofblur9 );
"
,
"
col += texture2D( tColor, vUv.xy + ( vec2( 0.37, -0.15 ) * aspectcorrect ) * dofblur9 );
"
,
"
col += texture2D( tColor, vUv.xy + ( vec2( -0.15, -0.37 ) * aspectcorrect ) * dofblur9 );
"
,
"
col += texture2D( tColor, vUv.xy + ( vec2( -0.15, 0.37 ) * aspectcorrect ) * dofblur9 );
"
,
"
col += texture2D( tColor, vUv.xy + ( vec2( 0.37, 0.15 ) * aspectcorrect ) * dofblur9 );
"
,
"
col += texture2D( tColor, vUv.xy + ( vec2( -0.37, -0.15 ) * aspectcorrect ) * dofblur9 );
"
,
"
col += texture2D( tColor, vUv.xy + ( vec2( 0.15, -0.37 ) * aspectcorrect ) * dofblur9 );
"
,
"
col += texture2D( tColor, vUv.xy + ( vec2( 0.37, 0.15 ) * aspectcorrect ) * dofblur9 );
"
,
"
col += texture2D( tColor, vUv.xy + ( vec2( -0.37, -0.15 ) * aspectcorrect ) * dofblur9 );
"
,
"
col += texture2D( tColor, vUv.xy + ( vec2( 0.15, -0.37 ) * aspectcorrect ) * dofblur9 );
"
,
"
col += texture2D( tColor, vUv.xy + ( vec2( 0.29, 0.29 ) * aspectcorrect ) * dofblur7 );
"
,
"
col += texture2D( tColor, vUv.xy + ( vec2( 0.40, 0.0 ) * aspectcorrect ) * dofblur7 );
"
,
"
col += texture2D( tColor, vUv.xy + ( vec2( 0.29, -0.29 ) * aspectcorrect ) * dofblur7 );
"
,
"
col += texture2D( tColor, vUv.xy + ( vec2( 0.0, -0.4 ) * aspectcorrect ) * dofblur7 );
"
,
"
col += texture2D( tColor, vUv.xy + ( vec2( 0.40, 0.0 ) * aspectcorrect ) * dofblur7 );
"
,
"
col += texture2D( tColor, vUv.xy + ( vec2( 0.29, -0.29 ) * aspectcorrect ) * dofblur7 );
"
,
"
col += texture2D( tColor, vUv.xy + ( vec2( 0.0, -0.4 ) * aspectcorrect ) * dofblur7 );
"
,
"
col += texture2D( tColor, vUv.xy + ( vec2( -0.29, 0.29 ) * aspectcorrect ) * dofblur7 );
"
,
"
col += texture2D( tColor, vUv.xy + ( vec2( -0.4, 0.0 ) * aspectcorrect ) * dofblur7 );
"
,
"
col += texture2D( tColor, vUv.xy + ( vec2( -0.29, -0.29 ) * aspectcorrect ) * dofblur7 );
"
,
"
col += texture2D( tColor, vUv.xy + ( vec2( -0.4, 0.0 ) * aspectcorrect ) * dofblur7 );
"
,
"
col += texture2D( tColor, vUv.xy + ( vec2( -0.29, -0.29 ) * aspectcorrect ) * dofblur7 );
"
,
"
col += texture2D( tColor, vUv.xy + ( vec2( 0.0, 0.4 ) * aspectcorrect ) * dofblur7 );
"
,
"
col += texture2D( tColor, vUv.xy + ( vec2( 0.29, 0.29 ) * aspectcorrect ) * dofblur4 );
"
,
"
col += texture2D( tColor, vUv.xy + ( vec2( 0.4, 0.0 ) * aspectcorrect ) * dofblur4 );
"
,
"
col += texture2D( tColor, vUv.xy + ( vec2( 0.29, -0.29 ) * aspectcorrect ) * dofblur4 );
"
,
"
col += texture2D( tColor, vUv.xy + ( vec2( 0.4, 0.0 ) * aspectcorrect ) * dofblur4 );
"
,
"
col += texture2D( tColor, vUv.xy + ( vec2( 0.29, -0.29 ) * aspectcorrect ) * dofblur4 );
"
,
"
col += texture2D( tColor, vUv.xy + ( vec2( 0.0, -0.4 ) * aspectcorrect ) * dofblur4 );
"
,
"
col += texture2D( tColor, vUv.xy + ( vec2( -0.29, 0.29 ) * aspectcorrect ) * dofblur4 );
"
,
"
col += texture2D( tColor, vUv.xy + ( vec2( -0.4, 0.0 ) * aspectcorrect ) * dofblur4 );
"
,
"
col += texture2D( tColor, vUv.xy + ( vec2( -0.29, -0.29 ) * aspectcorrect ) * dofblur4 );
"
,
"
col += texture2D( tColor, vUv.xy + ( vec2( -0.29, -0.29 ) * aspectcorrect ) * dofblur4 );
"
,
"
col += texture2D( tColor, vUv.xy + ( vec2( 0.0, 0.4 ) * aspectcorrect ) * dofblur4 );
"
,
"
gl_FragColor = col / 41.0;
"
,
"
gl_FragColor.a = 1.0;
"
,
"
}
"
].
join
(
"
\n
"
)
}
].
join
(
"
\n
"
)
},
/* -------------------------------------------------------------------------
// Sepia tone shader
// - based on glfx.js sepia shader
// https://github.com/evanw/glfx.js
------------------------------------------------------------------------- */
'
sepia
'
:
{
uniforms
:
{
tDiffuse
:
{
type
:
"
t
"
,
value
:
0
,
texture
:
null
},
amount
:
{
type
:
"
f
"
,
value
:
1.0
}
},
vertexShader
:
[
"
varying vec2 vUv;
"
,
"
void main() {
"
,
"
vUv = vec2( uv.x, 1.0 - uv.y );
"
,
"
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
"
,
"
}
"
].
join
(
"
\n
"
),
fragmentShader
:
[
"
uniform float amount;
"
,
"
uniform sampler2D tDiffuse;
"
,
"
varying vec2 vUv;
"
,
"
void main() {
"
,
"
vec4 color = texture2D( tDiffuse, vUv );
"
,
"
vec3 c = color.rgb;
"
,
"
color.r = dot( c, vec3( 1.0 - 0.607 * amount, 0.769 * amount, 0.189 * amount ) );
"
,
"
color.g = dot( c, vec3( 0.349 * amount, 1.0 - 0.314 * amount, 0.168 * amount ) );
"
,
"
color.b = dot( c, vec3( 0.272 * amount, 0.534 * amount, 1.0 - 0.869 * amount ) );
"
,
"
gl_FragColor = vec4( min( vec3( 1.0 ), color.rgb ), color.a );
"
,
"
}
"
].
join
(
"
\n
"
)
},
/* -------------------------------------------------------------------------
// Dot screen shader
// - based on glfx.js sepia shader
// https://github.com/evanw/glfx.js
------------------------------------------------------------------------- */
'
dotscreen
'
:
{
uniforms
:
{
tDiffuse
:
{
type
:
"
t
"
,
value
:
0
,
texture
:
null
},
tSize
:
{
type
:
"
v2
"
,
value
:
new
THREE
.
Vector2
(
256
,
256
)
},
center
:
{
type
:
"
v2
"
,
value
:
new
THREE
.
Vector2
(
0.5
,
0.5
)
},
angle
:
{
type
:
"
f
"
,
value
:
1.57
},
scale
:
{
type
:
"
f
"
,
value
:
1.0
}
},
vertexShader
:
[
"
varying vec2 vUv;
"
,
"
void main() {
"
,
"
vUv = vec2( uv.x, 1.0 - uv.y );
"
,
"
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
"
,
"
}
"
].
join
(
"
\n
"
),
fragmentShader
:
[
"
uniform vec2 center;
"
,
"
uniform float angle;
"
,
"
uniform float scale;
"
,
"
uniform vec2 tSize;
"
,
"
uniform sampler2D tDiffuse;
"
,
"
varying vec2 vUv;
"
,
"
float pattern() {
"
,
"
float s = sin( angle ), c = cos( angle );
"
,
"
vec2 tex = vUv * tSize - center;
"
,
"
vec2 point = vec2( c * tex.x - s * tex.y, s * tex.x + c * tex.y ) * scale;
"
,
"
return ( sin( point.x ) * sin( point.y ) ) * 4.0;
"
,
"
}
"
,
"
void main() {
"
,
"
vec4 color = texture2D( tDiffuse, vUv );
"
,
"
float average = ( color.r + color.g + color.b ) / 3.0;
"
,
"
gl_FragColor = vec4( vec3( average * 10.0 - 5.0 + pattern() ), color.a );
"
,
"
}
"
].
join
(
"
\n
"
)
},
/* ------------------------------------------------------------------------------------------------
// Vignette shader
// - based on PaintEffect postprocess from ro.me
// http://code.google.com/p/3-dreams-of-black/source/browse/deploy/js/effects/PaintEffect.js
------------------------------------------------------------------------------------------------ */
'
vignette
'
:
{
uniforms
:
{
tDiffuse
:
{
type
:
"
t
"
,
value
:
0
,
texture
:
null
},
offset
:
{
type
:
"
f
"
,
value
:
1.0
},
darkness
:
{
type
:
"
f
"
,
value
:
1.0
}
},
vertexShader
:
[
"
varying vec2 vUv;
"
,
"
void main() {
"
,
"
vUv = vec2( uv.x, 1.0 - uv.y );
"
,
"
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
"
,
"
}
"
].
join
(
"
\n
"
),
fragmentShader
:
[
"
uniform float offset;
"
,
"
uniform float darkness;
"
,
"
uniform sampler2D tDiffuse;
"
,
"
varying vec2 vUv;
"
,
"
void main() {
"
,
// Eskil's vignette
"
vec4 texel = texture2D( tDiffuse, vUv );
"
,
"
vec2 uv = ( vUv - vec2( 0.5 ) ) * vec2( offset );
"
,
"
gl_FragColor = vec4( mix( texel.rgb, vec3( 1.0 - darkness ), dot( uv, uv ) ), texel.a );
"
,
/*
// alternative version from glfx.js
// this one makes more "dusty" look (as opposed to "burned")
"vec4 color = texture2D( tDiffuse, vUv );",
"float dist = distance( vUv, vec2( 0.5 ) );",
"color.rgb *= smoothstep( 0.8, offset * 0.799, dist *( darkness + offset ) );",
"gl_FragColor = color;",
*/
"
}
"
].
join
(
"
\n
"
)
},
/* -------------------------------------------------------------------------
// Bleach bypass shader [http://en.wikipedia.org/wiki/Bleach_bypass]
// - based on Nvidia example
// http://developer.download.nvidia.com/shaderlibrary/webpages/shader_library.html#post_bleach_bypass
------------------------------------------------------------------------- */
'
bleachbypass
'
:
{
uniforms
:
{
tDiffuse
:
{
type
:
"
t
"
,
value
:
0
,
texture
:
null
},
opacity
:
{
type
:
"
f
"
,
value
:
1.0
}
},
vertexShader
:
[
"
varying vec2 vUv;
"
,
"
void main() {
"
,
"
vUv = vec2( uv.x, 1.0 - uv.y );
"
,
"
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
"
,
"
}
"
].
join
(
"
\n
"
),
fragmentShader
:
[
"
uniform float opacity;
"
,
"
uniform sampler2D tDiffuse;
"
,
"
varying vec2 vUv;
"
,
"
void main() {
"
,
"
vec4 base = texture2D( tDiffuse, vUv );
"
,
"
vec3 lumCoeff = vec3( 0.25, 0.65, 0.1 );
"
,
"
float lum = dot( lumCoeff, base.rgb );
"
,
"
vec3 blend = vec3( lum );
"
,
"
float L = min( 1.0, max( 0.0, 10.0 * ( lum - 0.45 ) ) );
"
,
"
vec3 result1 = 2.0 * base.rgb * blend;
"
,
"
vec3 result2 = 1.0 - 2.0 * ( 1.0 - blend ) * ( 1.0 - base.rgb );
"
,
"
vec3 newColor = mix( result1, result2, L );
"
,
"
float A2 = opacity * base.a;
"
,
"
vec3 mixRGB = A2 * newColor.rgb;
"
,
"
mixRGB += ( ( 1.0 - A2 ) * base.rgb );
"
,
"
gl_FragColor = vec4( mixRGB, base.a );
"
,
"
}
"
].
join
(
"
\n
"
)
},
/* -------------------------------------------------------------------------
// Simple test shader
------------------------------------------------------------------------- */
'
basic
'
:
{
uniforms
:
{},
vertexShader
:
[
"
void main() {
"
,
"
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
"
,
"
}
"
].
join
(
"
\n
"
),
fragmentShader
:
[
"
void main() {
"
,
"
gl_FragColor = vec4( 1.0, 0.0, 0.0, 0.5 );
"
,
"
}
"
].
join
(
"
\n
"
)
},
// METHODS
buildKernel
:
function
(
sigma
)
{
// We lop off the sqrt(2 * pi) * sigma term, since we're going to normalize anyway.
function
gauss
(
x
,
sigma
)
{
return
Math
.
exp
(
-
(
x
*
x
)
/
(
2.0
*
sigma
*
sigma
)
);
}
var
i
,
values
,
sum
,
halfWidth
,
kMaxKernelSize
=
25
,
kernelSize
=
2
*
Math
.
ceil
(
sigma
*
3.0
)
+
1
;
if
(
kernelSize
>
kMaxKernelSize
)
kernelSize
=
kMaxKernelSize
;
halfWidth
=
(
kernelSize
-
1
)
*
0.5
values
=
new
Array
(
kernelSize
);
sum
=
0.0
;
for
(
i
=
0
;
i
<
kernelSize
;
++
i
)
{
values
[
i
]
=
gauss
(
i
-
halfWidth
,
sigma
);
sum
+=
values
[
i
];
}
// normalize the kernel
for
(
i
=
0
;
i
<
kernelSize
;
++
i
)
values
[
i
]
/=
sum
;
return
values
;
}
};
examples/js/postprocessing/BloomPass.js
浏览文件 @
797530e4
...
...
@@ -18,7 +18,7 @@ THREE.BloomPass = function( strength, kernelSize, sigma, resolution ) {
// screen material
var
screenShader
=
THREE
.
Shader
Utils
.
lib
[
"
screen
"
];
var
screenShader
=
THREE
.
Shader
Extras
[
"
screen
"
];
this
.
screenUniforms
=
THREE
.
UniformsUtils
.
clone
(
screenShader
.
uniforms
);
...
...
@@ -36,12 +36,12 @@ THREE.BloomPass = function( strength, kernelSize, sigma, resolution ) {
// convolution material
var
convolutionShader
=
THREE
.
Shader
Utils
.
lib
[
"
convolution
"
];
var
convolutionShader
=
THREE
.
Shader
Extras
[
"
convolution
"
];
this
.
convolutionUniforms
=
THREE
.
UniformsUtils
.
clone
(
convolutionShader
.
uniforms
);
this
.
convolutionUniforms
[
"
uImageIncrement
"
].
value
=
THREE
.
BloomPass
.
blurx
;
this
.
convolutionUniforms
[
"
cKernel
"
].
value
=
THREE
.
Shader
Util
s
.
buildKernel
(
sigma
);
this
.
convolutionUniforms
[
"
cKernel
"
].
value
=
THREE
.
Shader
Extra
s
.
buildKernel
(
sigma
);
this
.
materialConvolution
=
new
THREE
.
MeshShaderMaterial
(
{
...
...
examples/js/postprocessing/DotScreenPass.js
浏览文件 @
797530e4
...
...
@@ -4,7 +4,7 @@
THREE
.
DotScreenPass
=
function
(
center
,
angle
,
scale
)
{
var
shader
=
THREE
.
Shader
Utils
.
lib
[
"
dotscreen
"
];
var
shader
=
THREE
.
Shader
Extras
[
"
dotscreen
"
];
this
.
uniforms
=
THREE
.
UniformsUtils
.
clone
(
shader
.
uniforms
);
...
...
examples/js/postprocessing/FilmPass.js
浏览文件 @
797530e4
...
...
@@ -4,7 +4,7 @@
THREE
.
FilmPass
=
function
(
noiseIntensity
,
scanlinesIntensity
,
scanlinesCount
,
grayscale
)
{
var
shader
=
THREE
.
Shader
Utils
.
lib
[
"
film
"
];
var
shader
=
THREE
.
Shader
Extras
[
"
film
"
];
this
.
uniforms
=
THREE
.
UniformsUtils
.
clone
(
shader
.
uniforms
);
...
...
examples/js/postprocessing/TexturePass.js
浏览文件 @
797530e4
...
...
@@ -4,7 +4,7 @@
THREE
.
TexturePass
=
function
(
texture
,
opacity
)
{
var
shader
=
THREE
.
Shader
Utils
.
lib
[
"
screen
"
];
var
shader
=
THREE
.
Shader
Extras
[
"
screen
"
];
this
.
uniforms
=
THREE
.
UniformsUtils
.
clone
(
shader
.
uniforms
);
...
...
examples/webgl_flycamera_earth.html
浏览文件 @
797530e4
...
...
@@ -33,6 +33,8 @@
<script
type=
"text/javascript"
src=
"../build/Three.js"
></script>
<script
type=
"text/javascript"
src=
"js/ShaderExtras.js"
></script>
<script
type=
"text/javascript"
src=
"js/postprocessing/EffectComposer.js"
></script>
<script
type=
"text/javascript"
src=
"js/postprocessing/RenderPass.js"
></script>
<script
type=
"text/javascript"
src=
"js/postprocessing/FilmPass.js"
></script>
...
...
examples/webgl_geometry_text.html
浏览文件 @
797530e4
...
...
@@ -41,6 +41,8 @@
<script
type=
"text/javascript"
src=
"../build/Three.js"
></script>
<script
type=
"text/javascript"
src=
"js/ShaderExtras.js"
></script>
<script
type=
"text/javascript"
src=
"js/postprocessing/EffectComposer.js"
></script>
<script
type=
"text/javascript"
src=
"js/postprocessing/RenderPass.js"
></script>
<script
type=
"text/javascript"
src=
"js/postprocessing/BloomPass.js"
></script>
...
...
examples/webgl_lines_colors.html
浏览文件 @
797530e4
...
...
@@ -45,6 +45,8 @@
<script
type=
"text/javascript"
src=
"../build/Three.js"
></script>
<script
type=
"text/javascript"
src=
"js/ShaderExtras.js"
></script>
<script
type=
"text/javascript"
src=
"js/postprocessing/EffectComposer.js"
></script>
<script
type=
"text/javascript"
src=
"js/postprocessing/RenderPass.js"
></script>
<script
type=
"text/javascript"
src=
"js/postprocessing/ShaderPass.js"
></script>
...
...
@@ -153,7 +155,7 @@
var
renderModel
=
new
THREE
.
RenderPass
(
scene
,
camera
);
var
effectBloom
=
new
THREE
.
BloomPass
(
1.3
);
var
effectScreen
=
new
THREE
.
ShaderPass
(
THREE
.
Shader
Utils
.
lib
[
"
screen
"
]
);
var
effectScreen
=
new
THREE
.
ShaderPass
(
THREE
.
Shader
Extras
[
"
screen
"
]
);
effectScreen
.
renderToScreen
=
true
;
...
...
examples/webgl_lines_splines.html
浏览文件 @
797530e4
...
...
@@ -53,8 +53,6 @@
if
(
!
Detector
.
webgl
)
Detector
.
addGetWebGLMessage
();
var
postprocessing
=
false
;
var
mouseX
=
0
,
mouseY
=
0
,
windowHalfX
=
window
.
innerWidth
/
2
,
...
...
@@ -62,8 +60,6 @@
camera
,
scene
,
renderer
,
material
;
var
cameraOrtho
,
sceneScreen
,
rtTexture1
,
rtTexture2
,
rtTexture3
,
materialScreen
,
materialConvolution
,
blurx
,
blury
,
quadScreen
;
init
();
animate
();
...
...
@@ -81,7 +77,7 @@
renderer
=
new
THREE
.
WebGLRenderer
(
{
antialias
:
true
}
);
renderer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
renderer
.
autoClear
=
false
;
container
.
appendChild
(
renderer
.
domElement
);
var
geometry
=
new
THREE
.
Geometry
(),
...
...
@@ -93,14 +89,14 @@
n_sub
=
6
;
var
position
,
index
;
var
spline
=
new
THREE
.
Spline
(
points
);
for
(
i
=
0
;
i
<
points
.
length
*
n_sub
;
i
++
)
{
index
=
i
/
(
points
.
length
*
n_sub
);
position
=
spline
.
getPoint
(
index
);
geometry
.
vertices
[
i
]
=
new
THREE
.
Vertex
(
new
THREE
.
Vector3
(
position
.
x
,
position
.
y
,
position
.
z
)
);
colors
[
i
]
=
new
THREE
.
Color
(
0xffffff
);
...
...
@@ -112,8 +108,8 @@
colors3
[
i
]
=
new
THREE
.
Color
(
0xffffff
);
colors3
[
i
].
setHSV
(
i
/
(
points
.
length
*
n_sub
),
1.0
,
1.0
);
}
geometry2
.
vertices
=
geometry3
.
vertices
=
geometry
.
vertices
;
...
...
@@ -133,7 +129,7 @@
material
.
vertexColors
=
true
;
for
(
i
=
0
;
i
<
parameters
.
length
;
++
i
)
{
for
(
i
=
0
;
i
<
parameters
.
length
;
++
i
)
{
p
=
parameters
[
i
];
line
=
new
THREE
.
Line
(
p
[
3
],
p
[
0
]
);
...
...
@@ -145,57 +141,6 @@
}
// postprocessing
cameraOrtho
=
new
THREE
.
Camera
();
cameraOrtho
.
projectionMatrix
=
THREE
.
Matrix4
.
makeOrtho
(
window
.
innerWidth
/
-
2
,
window
.
innerWidth
/
2
,
window
.
innerHeight
/
2
,
window
.
innerHeight
/
-
2
,
-
10000
,
10000
);
cameraOrtho
.
position
.
z
=
100
;
sceneScreen
=
new
THREE
.
Scene
();
var
pars
=
{
minFilter
:
THREE
.
LinearFilter
,
magFilter
:
THREE
.
LinearFilter
};
rtTexture1
=
new
THREE
.
WebGLRenderTarget
(
window
.
innerWidth
,
window
.
innerHeight
,
pars
);
rtTexture2
=
new
THREE
.
WebGLRenderTarget
(
512
,
512
,
pars
);
rtTexture3
=
new
THREE
.
WebGLRenderTarget
(
512
,
512
,
pars
);
var
screen_shader
=
THREE
.
ShaderUtils
.
lib
[
"
screen
"
];
var
screen_uniforms
=
THREE
.
UniformsUtils
.
clone
(
screen_shader
.
uniforms
);
screen_uniforms
[
"
tDiffuse
"
].
texture
=
rtTexture1
;
screen_uniforms
[
"
opacity
"
].
value
=
1.0
;
materialScreen
=
new
THREE
.
MeshShaderMaterial
(
{
uniforms
:
screen_uniforms
,
vertexShader
:
screen_shader
.
vertexShader
,
fragmentShader
:
screen_shader
.
fragmentShader
,
blending
:
THREE
.
AdditiveBlending
}
);
var
convolution_shader
=
THREE
.
ShaderUtils
.
lib
[
"
convolution
"
];
var
convolution_uniforms
=
THREE
.
UniformsUtils
.
clone
(
convolution_shader
.
uniforms
);
blurx
=
new
THREE
.
Vector2
(
0.001953125
,
0.0
),
blury
=
new
THREE
.
Vector2
(
0.0
,
0.001953125
);
convolution_uniforms
[
"
tDiffuse
"
].
texture
=
rtTexture1
;
convolution_uniforms
[
"
uImageIncrement
"
].
value
=
blurx
;
convolution_uniforms
[
"
cKernel
"
].
value
=
THREE
.
ShaderUtils
.
buildKernel
(
4.0
);
materialConvolution
=
new
THREE
.
MeshShaderMaterial
(
{
uniforms
:
convolution_uniforms
,
vertexShader
:
"
#define KERNEL_SIZE 25.0
\n
"
+
convolution_shader
.
vertexShader
,
fragmentShader
:
"
#define KERNEL_SIZE 25
\n
"
+
convolution_shader
.
fragmentShader
}
);
var
plane
=
new
THREE
.
PlaneGeometry
(
window
.
innerWidth
,
window
.
innerHeight
);
quadScreen
=
new
THREE
.
Mesh
(
plane
,
materialConvolution
);
quadScreen
.
position
.
z
=
-
100
;
sceneScreen
.
addObject
(
quadScreen
);
stats
=
new
Stats
();
stats
.
domElement
.
style
.
position
=
'
absolute
'
;
...
...
@@ -249,6 +194,7 @@
}
return
vec
;
}
//
...
...
@@ -279,6 +225,7 @@
mouseX
=
event
.
touches
[
0
].
pageX
-
windowHalfX
;
mouseY
=
event
.
touches
[
0
].
pageY
-
windowHalfY
;
}
}
//
...
...
@@ -294,60 +241,16 @@
camera
.
position
.
x
+=
(
mouseX
-
camera
.
position
.
x
)
*
.
05
;
camera
.
position
.
y
+=
(
-
mouseY
+
200
-
camera
.
position
.
y
)
*
.
05
;
camera
.
updateMatrix
();
var
time
=
new
Date
().
getTime
()
*
0.0005
;
for
(
var
i
=
0
;
i
<
scene
.
objects
.
length
;
i
++
)
{
scene
.
objects
[
i
].
rotation
.
y
=
time
*
(
i
%
2
?
1
:
-
1
);
}
renderer
.
clear
();
if
(
postprocessing
)
{
// Render scene into texture
renderer
.
render
(
scene
,
camera
,
rtTexture1
);
// Render quad with blured scene into texture (convolution pass 1)
quadScreen
.
materials
=
[
materialConvolution
];
materialConvolution
.
uniforms
.
tDiffuse
.
texture
=
rtTexture1
;
materialConvolution
.
uniforms
.
uImageIncrement
.
value
=
blurx
;
renderer
.
render
(
sceneScreen
,
cameraOrtho
,
rtTexture2
);
// Render quad with blured scene into texture (convolution pass 2)
materialConvolution
.
uniforms
.
tDiffuse
.
texture
=
rtTexture2
;
materialConvolution
.
uniforms
.
uImageIncrement
.
value
=
blury
;
renderer
.
render
(
sceneScreen
,
cameraOrtho
,
rtTexture3
);
// Render original scene with superimposed blur to texture
quadScreen
.
materials
=
[
materialScreen
];
materialScreen
.
uniforms
.
tDiffuse
.
texture
=
rtTexture3
;
materialScreen
.
uniforms
.
opacity
.
value
=
1.3
;
renderer
.
render
(
sceneScreen
,
cameraOrtho
,
rtTexture1
,
false
);
// Render to screen
materialScreen
.
uniforms
.
tDiffuse
.
texture
=
rtTexture1
;
renderer
.
render
(
sceneScreen
,
cameraOrtho
);
for
(
var
i
=
0
;
i
<
scene
.
objects
.
length
;
i
++
)
{
}
else
{
renderer
.
render
(
scene
,
camera
);
scene
.
objects
[
i
].
rotation
.
y
=
time
*
(
i
%
2
?
1
:
-
1
);
}
renderer
.
render
(
scene
,
camera
);
}
...
...
examples/webgl_materials_video.html
浏览文件 @
797530e4
...
...
@@ -38,6 +38,8 @@
<script
type=
"text/javascript"
src=
"../build/Three.js"
></script>
<script
type=
"text/javascript"
src=
"js/ShaderExtras.js"
></script>
<script
type=
"text/javascript"
src=
"js/Detector.js"
></script>
<script
type=
"text/javascript"
src=
"js/RequestAnimationFrame.js"
></script>
<script
type=
"text/javascript"
src=
"js/Stats.js"
></script>
...
...
@@ -207,7 +209,7 @@
postprocessing
.
rtTexture2
=
new
THREE
.
WebGLRenderTarget
(
512
,
512
,
pars
);
postprocessing
.
rtTexture3
=
new
THREE
.
WebGLRenderTarget
(
512
,
512
,
pars
);
var
screen_shader
=
THREE
.
Shader
Utils
.
lib
[
"
screen
"
];
var
screen_shader
=
THREE
.
Shader
Extras
[
"
screen
"
];
var
screen_uniforms
=
THREE
.
UniformsUtils
.
clone
(
screen_shader
.
uniforms
);
screen_uniforms
[
"
tDiffuse
"
].
texture
=
postprocessing
.
rtTexture1
;
...
...
@@ -223,7 +225,7 @@
}
);
var
convolution_shader
=
THREE
.
Shader
Utils
.
lib
[
"
convolution
"
];
var
convolution_shader
=
THREE
.
Shader
Extras
[
"
convolution
"
];
var
convolution_uniforms
=
THREE
.
UniformsUtils
.
clone
(
convolution_shader
.
uniforms
);
postprocessing
.
blurx
=
new
THREE
.
Vector2
(
0.001953125
,
0.0
),
...
...
@@ -231,7 +233,7 @@
convolution_uniforms
[
"
tDiffuse
"
].
texture
=
postprocessing
.
rtTexture1
;
convolution_uniforms
[
"
uImageIncrement
"
].
value
=
postprocessing
.
blurx
;
convolution_uniforms
[
"
cKernel
"
].
value
=
THREE
.
Shader
Util
s
.
buildKernel
(
4.0
);
convolution_uniforms
[
"
cKernel
"
].
value
=
THREE
.
Shader
Extra
s
.
buildKernel
(
4.0
);
postprocessing
.
materialConvolution
=
new
THREE
.
MeshShaderMaterial
(
{
...
...
examples/webgl_particles_dynamic.html
浏览文件 @
797530e4
...
...
@@ -41,6 +41,8 @@
<script
type=
"text/javascript"
src=
"../build/Three.js"
></script>
<script
type=
"text/javascript"
src=
"js/ShaderExtras.js"
></script>
<script
type=
"text/javascript"
src=
"js/Stats.js"
></script>
<script
type=
"text/javascript"
src=
"js/Detector.js"
></script>
<script
type=
"text/javascript"
src=
"js/RequestAnimationFrame.js"
></script>
...
...
@@ -355,7 +357,7 @@
effect
.
rtTexture2
=
new
THREE
.
WebGLRenderTarget
(
256
,
512
,
pars
);
effect
.
rtTexture3
=
new
THREE
.
WebGLRenderTarget
(
512
,
256
,
pars
);
var
screen_shader
=
THREE
.
Shader
Utils
.
lib
[
"
screen
"
];
var
screen_shader
=
THREE
.
Shader
Extras
[
"
screen
"
];
var
screen_uniforms
=
THREE
.
UniformsUtils
.
clone
(
screen_shader
.
uniforms
);
screen_uniforms
[
"
tDiffuse
"
].
texture
=
effect
.
rtTexture3
;
...
...
@@ -371,7 +373,7 @@
}
);
var
convolution_shader
=
THREE
.
Shader
Utils
.
lib
[
"
convolution
"
];
var
convolution_shader
=
THREE
.
Shader
Extras
[
"
convolution
"
];
var
convolution_uniforms
=
THREE
.
UniformsUtils
.
clone
(
convolution_shader
.
uniforms
);
effect
.
blurx
=
new
THREE
.
Vector2
(
0.001953125
,
0.0
),
...
...
@@ -379,7 +381,7 @@
convolution_uniforms
[
"
tDiffuse
"
].
texture
=
effect
.
rtTexture1
;
convolution_uniforms
[
"
uImageIncrement
"
].
value
=
effect
.
blurx
;
convolution_uniforms
[
"
cKernel
"
].
value
=
THREE
.
Shader
Util
s
.
buildKernel
(
4.0
);
convolution_uniforms
[
"
cKernel
"
].
value
=
THREE
.
Shader
Extra
s
.
buildKernel
(
4.0
);
effect
.
materialConvolution
=
new
THREE
.
MeshShaderMaterial
(
{
...
...
@@ -389,7 +391,7 @@
}
);
var
film_shader
=
THREE
.
Shader
Utils
.
lib
[
"
film
"
];
var
film_shader
=
THREE
.
Shader
Extras
[
"
film
"
];
var
film_uniforms
=
THREE
.
UniformsUtils
.
clone
(
film_shader
.
uniforms
);
film_uniforms
[
"
tDiffuse
"
].
texture
=
effect
.
rtTexture1
;
...
...
examples/webgl_postprocessing.html
浏览文件 @
797530e4
...
...
@@ -41,6 +41,8 @@
<script
type=
"text/javascript"
src=
"../build/Three.js"
></script>
<script
type=
"text/javascript"
src=
"js/ShaderExtras.js"
></script>
<script
type=
"text/javascript"
src=
"js/postprocessing/EffectComposer.js"
></script>
<script
type=
"text/javascript"
src=
"js/postprocessing/RenderPass.js"
></script>
<script
type=
"text/javascript"
src=
"js/postprocessing/BloomPass.js"
></script>
...
...
@@ -165,10 +167,10 @@
//
var
shaderBleach
=
THREE
.
Shader
Utils
.
lib
[
"
bleachbypass
"
];
var
shaderSepia
=
THREE
.
Shader
Utils
.
lib
[
"
sepia
"
];
var
shaderVignette
=
THREE
.
Shader
Utils
.
lib
[
"
vignette
"
];
var
shaderScreen
=
THREE
.
Shader
Utils
.
lib
[
"
screen
"
];
var
shaderBleach
=
THREE
.
Shader
Extras
[
"
bleachbypass
"
];
var
shaderSepia
=
THREE
.
Shader
Extras
[
"
sepia
"
];
var
shaderVignette
=
THREE
.
Shader
Extras
[
"
vignette
"
];
var
shaderScreen
=
THREE
.
Shader
Extras
[
"
screen
"
];
var
effectBleach
=
new
THREE
.
ShaderPass
(
shaderBleach
);
var
effectSepia
=
new
THREE
.
ShaderPass
(
shaderSepia
);
...
...
examples/webgl_postprocessing_dof.html
浏览文件 @
797530e4
...
...
@@ -241,7 +241,7 @@
postprocessing
.
rtTextureDepth
=
new
THREE
.
WebGLRenderTarget
(
window
.
innerWidth
,
height
,
pars
);
postprocessing
.
rtTextureColor
=
new
THREE
.
WebGLRenderTarget
(
window
.
innerWidth
,
height
,
pars
);
var
bokeh_shader
=
ShaderExtras
[
"
bokeh
"
];
var
bokeh_shader
=
THREE
.
ShaderExtras
[
"
bokeh
"
];
postprocessing
.
bokeh_uniforms
=
THREE
.
UniformsUtils
.
clone
(
bokeh_shader
.
uniforms
);
...
...
examples/webgl_ribbons.html
浏览文件 @
797530e4
...
...
@@ -33,6 +33,8 @@
<script
type=
"text/javascript"
src=
"../build/Three.js"
></script>
<script
type=
"text/javascript"
src=
"js/ShaderExtras.js"
></script>
<script
type=
"text/javascript"
src=
"js/postprocessing/EffectComposer.js"
></script>
<script
type=
"text/javascript"
src=
"js/postprocessing/RenderPass.js"
></script>
<script
type=
"text/javascript"
src=
"js/postprocessing/ShaderPass.js"
></script>
...
...
@@ -198,7 +200,7 @@
var
renderModel
=
new
THREE
.
RenderPass
(
scene
,
camera
);
var
effectBloom
=
new
THREE
.
BloomPass
(
1.0
);
var
effectScreen
=
new
THREE
.
ShaderPass
(
THREE
.
Shader
Utils
.
lib
[
"
screen
"
]
);
var
effectScreen
=
new
THREE
.
ShaderPass
(
THREE
.
Shader
Extras
[
"
screen
"
]
);
effectScreen
.
renderToScreen
=
true
;
...
...
examples/webgl_sandbox.html
浏览文件 @
797530e4
...
...
@@ -139,6 +139,8 @@
<script
type=
"text/javascript"
src=
"../src/extras/renderers/AnaglyphWebGLRenderer.js"
></script>
<script
type=
"text/javascript"
src=
"../src/extras/renderers/CrosseyedWebGLRenderer.js"
></script>
<script
type=
"text/javascript"
src=
"js/ShaderExtras.js"
></script>
<script
type=
"text/javascript"
src=
"js/RequestAnimationFrame.js"
></script>
<script
type=
"text/javascript"
src=
"js/Stats.js"
></script>
...
...
@@ -173,9 +175,9 @@
var
geometry
=
new
THREE
.
SphereGeometry
(
50
,
32
,
16
);
var
uniforms
=
THREE
.
Shader
Utils
.
lib
[
'
basic
'
].
uniforms
;
var
vertexShader
=
THREE
.
Shader
Utils
.
lib
[
'
basic
'
].
vertexShader
;
var
fragmentShader
=
THREE
.
Shader
Utils
.
lib
[
'
basic
'
].
fragmentShader
;
var
uniforms
=
THREE
.
Shader
Extras
[
'
basic
'
].
uniforms
;
var
vertexShader
=
THREE
.
Shader
Extras
[
'
basic
'
].
vertexShader
;
var
fragmentShader
=
THREE
.
Shader
Extras
[
'
basic
'
].
fragmentShader
;
var
texture
=
new
THREE
.
Texture
(
generateTexture
(
0
,
0.5
,
1
),
new
THREE
.
UVMapping
()
);
var
texture2
=
new
THREE
.
Texture
(
generateTexture
(
0
,
1
,
0
),
new
THREE
.
SphericalReflectionMapping
()
);
...
...
examples/webgl_shader_lava.html
浏览文件 @
797530e4
...
...
@@ -37,6 +37,8 @@
<script
type=
"text/javascript"
src=
"../build/Three.js"
></script>
<script
type=
"text/javascript"
src=
"js/ShaderExtras.js"
></script>
<script
type=
"text/javascript"
src=
"js/postprocessing/EffectComposer.js"
></script>
<script
type=
"text/javascript"
src=
"js/postprocessing/RenderPass.js"
></script>
<script
type=
"text/javascript"
src=
"js/postprocessing/BloomPass.js"
></script>
...
...
examples/webgl_shadowmap.html
浏览文件 @
797530e4
...
...
@@ -32,6 +32,8 @@
<script
type=
"text/javascript"
src=
"../build/Three.js"
></script>
<script
type=
"text/javascript"
src=
"js/ShaderExtras.js"
></script>
<script
type=
"text/javascript"
src=
"js/Detector.js"
></script>
<script
type=
"text/javascript"
src=
"js/RequestAnimationFrame.js"
></script>
<script
type=
"text/javascript"
src=
"js/Stats.js"
></script>
...
...
@@ -138,7 +140,7 @@
cameraOrtho
=
new
THREE
.
OrthoCamera
(
SCREEN_WIDTH
/
-
2
,
SCREEN_WIDTH
/
2
,
SCREEN_HEIGHT
/
2
,
SCREEN_HEIGHT
/
-
2
,
-
10
,
1000
);
cameraOrtho
.
position
.
z
=
10
;
var
shader
=
THREE
.
Shader
Utils
.
lib
[
"
screen
"
];
var
shader
=
THREE
.
Shader
Extras
[
"
screen
"
];
var
uniforms
=
new
THREE
.
UniformsUtils
.
clone
(
shader
.
uniforms
);
hudMaterial
=
new
THREE
.
MeshShaderMaterial
(
{
vertexShader
:
shader
.
vertexShader
,
fragmentShader
:
shader
.
fragmentShader
,
uniforms
:
uniforms
}
);
...
...
src/extras/ShaderUtils.js
浏览文件 @
797530e4
...
...
@@ -2,14 +2,12 @@
* @author alteredq / http://alteredqualia.com/
* @author mr.doob / http://mrdoob.com/
*
* ShaderUtils currently contains
* ShaderUtils currently contains:
*
* fresnel
* normal
* cube
* convolution
* film
* screen
* basic
*
*/
if
(
THREE
.
WebGLRenderer
)
{
...
...
@@ -400,530 +398,8 @@ THREE.ShaderUtils = {
].
join
(
"
\n
"
)
},
/* ------------------------------------------------------------------------
// Convolution shader
// - ported from o3d sample to WebGL / GLSL
// http://o3d.googlecode.com/svn/trunk/samples/convolution.html
------------------------------------------------------------------------ */
'
convolution
'
:
{
uniforms
:
{
"
tDiffuse
"
:
{
type
:
"
t
"
,
value
:
0
,
texture
:
null
},
"
uImageIncrement
"
:
{
type
:
"
v2
"
,
value
:
new
THREE
.
Vector2
(
0.001953125
,
0.0
)
},
"
cKernel
"
:
{
type
:
"
fv1
"
,
value
:
[]
}
},
vertexShader
:
[
//"#define KERNEL_SIZE 25.0",
"
uniform vec2 uImageIncrement;
"
,
"
varying vec2 vUv;
"
,
"
void main() {
"
,
"
vUv = uv - ( ( KERNEL_SIZE - 1.0 ) / 2.0 ) * uImageIncrement;
"
,
"
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
"
,
"
}
"
].
join
(
"
\n
"
),
fragmentShader
:
[
//"#define KERNEL_SIZE 25",
"
uniform float cKernel[ KERNEL_SIZE ];
"
,
"
uniform sampler2D tDiffuse;
"
,
"
uniform vec2 uImageIncrement;
"
,
"
varying vec2 vUv;
"
,
"
void main() {
"
,
"
vec2 imageCoord = vUv;
"
,
"
vec4 sum = vec4( 0.0, 0.0, 0.0, 0.0 );
"
,
"
for( int i = 0; i < KERNEL_SIZE; i ++ ) {
"
,
"
sum += texture2D( tDiffuse, imageCoord ) * cKernel[ i ];
"
,
"
imageCoord += uImageIncrement;
"
,
"
}
"
,
"
gl_FragColor = sum;
"
,
"
}
"
].
join
(
"
\n
"
)
},
/* -------------------------------------------------------------------------
// Film grain & scanlines shader
// - ported from HLSL to WebGL / GLSL
// http://www.truevision3d.com/forums/showcase/staticnoise_colorblackwhite_scanline_shaders-t18698.0.html
// Screen Space Static Postprocessor
//
// Produces an analogue noise overlay similar to a film grain / TV static
//
// Original implementation and noise algorithm
// Pat 'Hawthorne' Shearon
//
// Optimized scanlines + noise version with intensity scaling
// Georg 'Leviathan' Steinrohder
// This version is provided under a Creative Commons Attribution 3.0 License
// http://creativecommons.org/licenses/by/3.0/
------------------------------------------------------------------------- */
'
film
'
:
{
uniforms
:
{
tDiffuse
:
{
type
:
"
t
"
,
value
:
0
,
texture
:
null
},
time
:
{
type
:
"
f
"
,
value
:
0.0
},
nIntensity
:
{
type
:
"
f
"
,
value
:
0.5
},
sIntensity
:
{
type
:
"
f
"
,
value
:
0.05
},
sCount
:
{
type
:
"
f
"
,
value
:
4096
},
grayscale
:
{
type
:
"
i
"
,
value
:
1
}
},
vertexShader
:
[
"
varying vec2 vUv;
"
,
"
void main() {
"
,
"
vUv = vec2( uv.x, 1.0 - uv.y );
"
,
"
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
"
,
"
}
"
].
join
(
"
\n
"
),
fragmentShader
:
[
// control parameter
"
uniform float time;
"
,
"
uniform bool grayscale;
"
,
// noise effect intensity value (0 = no effect, 1 = full effect)
"
uniform float nIntensity;
"
,
// scanlines effect intensity value (0 = no effect, 1 = full effect)
"
uniform float sIntensity;
"
,
// scanlines effect count value (0 = no effect, 4096 = full effect)
"
uniform float sCount;
"
,
"
uniform sampler2D tDiffuse;
"
,
"
varying vec2 vUv;
"
,
"
void main() {
"
,
// sample the source
"
vec4 cTextureScreen = texture2D( tDiffuse, vUv );
"
,
// make some noise
"
float x = vUv.x * vUv.y * time * 1000.0;
"
,
"
x = mod( x, 13.0 ) * mod( x, 123.0 );
"
,
"
float dx = mod( x, 0.01 );
"
,
// add noise
"
vec3 cResult = cTextureScreen.rgb + cTextureScreen.rgb * clamp( 0.1 + dx * 100.0, 0.0, 1.0 );
"
,
// get us a sine and cosine
"
vec2 sc = vec2( sin( vUv.y * sCount ), cos( vUv.y * sCount ) );
"
,
// add scanlines
"
cResult += cTextureScreen.rgb * vec3( sc.x, sc.y, sc.x ) * sIntensity;
"
,
// interpolate between source and result by intensity
"
cResult = cTextureScreen.rgb + clamp( nIntensity, 0.0,1.0 ) * ( cResult - cTextureScreen.rgb );
"
,
// convert to grayscale if desired
"
if( grayscale ) {
"
,
"
cResult = vec3( cResult.r * 0.3 + cResult.g * 0.59 + cResult.b * 0.11 );
"
,
"
}
"
,
"
gl_FragColor = vec4( cResult, cTextureScreen.a );
"
,
"
}
"
].
join
(
"
\n
"
)
},
/* -------------------------------------------------------------------------
// Sepia tone shader
// - based on glfx.js sepia shader
// https://github.com/evanw/glfx.js
------------------------------------------------------------------------- */
'
sepia
'
:
{
uniforms
:
{
tDiffuse
:
{
type
:
"
t
"
,
value
:
0
,
texture
:
null
},
amount
:
{
type
:
"
f
"
,
value
:
1.0
}
},
vertexShader
:
[
"
varying vec2 vUv;
"
,
"
void main() {
"
,
"
vUv = vec2( uv.x, 1.0 - uv.y );
"
,
"
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
"
,
"
}
"
].
join
(
"
\n
"
),
fragmentShader
:
[
"
uniform float amount;
"
,
"
uniform sampler2D tDiffuse;
"
,
"
varying vec2 vUv;
"
,
"
void main() {
"
,
"
vec4 color = texture2D( tDiffuse, vUv );
"
,
"
vec3 c = color.rgb;
"
,
"
color.r = dot( c, vec3( 1.0 - 0.607 * amount, 0.769 * amount, 0.189 * amount ) );
"
,
"
color.g = dot( c, vec3( 0.349 * amount, 1.0 - 0.314 * amount, 0.168 * amount ) );
"
,
"
color.b = dot( c, vec3( 0.272 * amount, 0.534 * amount, 1.0 - 0.869 * amount ) );
"
,
"
gl_FragColor = vec4( min( vec3( 1.0 ), color.rgb ), color.a );
"
,
"
}
"
].
join
(
"
\n
"
)
},
/* -------------------------------------------------------------------------
// Dot screen shader
// - based on glfx.js sepia shader
// https://github.com/evanw/glfx.js
------------------------------------------------------------------------- */
'
dotscreen
'
:
{
uniforms
:
{
tDiffuse
:
{
type
:
"
t
"
,
value
:
0
,
texture
:
null
},
tSize
:
{
type
:
"
v2
"
,
value
:
new
THREE
.
Vector2
(
256
,
256
)
},
center
:
{
type
:
"
v2
"
,
value
:
new
THREE
.
Vector2
(
0.5
,
0.5
)
},
angle
:
{
type
:
"
f
"
,
value
:
1.57
},
scale
:
{
type
:
"
f
"
,
value
:
1.0
}
},
vertexShader
:
[
"
varying vec2 vUv;
"
,
"
void main() {
"
,
"
vUv = vec2( uv.x, 1.0 - uv.y );
"
,
"
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
"
,
"
}
"
].
join
(
"
\n
"
),
fragmentShader
:
[
"
uniform vec2 center;
"
,
"
uniform float angle;
"
,
"
uniform float scale;
"
,
"
uniform vec2 tSize;
"
,
"
uniform sampler2D tDiffuse;
"
,
"
varying vec2 vUv;
"
,
"
float pattern() {
"
,
"
float s = sin( angle ), c = cos( angle );
"
,
"
vec2 tex = vUv * tSize - center;
"
,
"
vec2 point = vec2( c * tex.x - s * tex.y, s * tex.x + c * tex.y ) * scale;
"
,
"
return ( sin( point.x ) * sin( point.y ) ) * 4.0;
"
,
"
}
"
,
"
void main() {
"
,
"
vec4 color = texture2D( tDiffuse, vUv );
"
,
"
float average = ( color.r + color.g + color.b ) / 3.0;
"
,
"
gl_FragColor = vec4( vec3( average * 10.0 - 5.0 + pattern() ), color.a );
"
,
"
}
"
].
join
(
"
\n
"
)
},
/* ------------------------------------------------------------------------------------------------
// Vignette shader
// - based on PaintEffect postprocess from ro.me
// http://code.google.com/p/3-dreams-of-black/source/browse/deploy/js/effects/PaintEffect.js
------------------------------------------------------------------------------------------------ */
'
vignette
'
:
{
uniforms
:
{
tDiffuse
:
{
type
:
"
t
"
,
value
:
0
,
texture
:
null
},
offset
:
{
type
:
"
f
"
,
value
:
1.0
},
darkness
:
{
type
:
"
f
"
,
value
:
1.0
}
},
vertexShader
:
[
"
varying vec2 vUv;
"
,
"
void main() {
"
,
"
vUv = vec2( uv.x, 1.0 - uv.y );
"
,
"
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
"
,
"
}
"
].
join
(
"
\n
"
),
fragmentShader
:
[
"
uniform float offset;
"
,
"
uniform float darkness;
"
,
"
uniform sampler2D tDiffuse;
"
,
"
varying vec2 vUv;
"
,
"
void main() {
"
,
// Eskil's vignette
"
vec4 texel = texture2D( tDiffuse, vUv );
"
,
"
vec2 uv = ( vUv - vec2( 0.5 ) ) * vec2( offset );
"
,
"
gl_FragColor = vec4( mix( texel.rgb, vec3( 1.0 - darkness ), dot( uv, uv ) ), texel.a );
"
,
/*
// alternative version from glfx.js
// this one makes more "dusty" look (as opposed to "burned")
"vec4 color = texture2D( tDiffuse, vUv );",
"float dist = distance( vUv, vec2( 0.5 ) );",
"color.rgb *= smoothstep( 0.8, offset * 0.799, dist *( darkness + offset ) );",
"gl_FragColor = color;",
*/
"
}
"
].
join
(
"
\n
"
)
},
/* -------------------------------------------------------------------------
// Bleach bypass shader [http://en.wikipedia.org/wiki/Bleach_bypass]
// - based on Nvidia example
// http://developer.download.nvidia.com/shaderlibrary/webpages/shader_library.html#post_bleach_bypass
------------------------------------------------------------------------- */
'
bleachbypass
'
:
{
uniforms
:
{
tDiffuse
:
{
type
:
"
t
"
,
value
:
0
,
texture
:
null
},
opacity
:
{
type
:
"
f
"
,
value
:
1.0
}
},
vertexShader
:
[
"
varying vec2 vUv;
"
,
"
void main() {
"
,
"
vUv = vec2( uv.x, 1.0 - uv.y );
"
,
"
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
"
,
"
}
"
].
join
(
"
\n
"
),
fragmentShader
:
[
"
uniform float opacity;
"
,
"
uniform sampler2D tDiffuse;
"
,
"
varying vec2 vUv;
"
,
"
void main() {
"
,
"
vec4 base = texture2D( tDiffuse, vUv );
"
,
"
vec3 lumCoeff = vec3( 0.25, 0.65, 0.1 );
"
,
"
float lum = dot( lumCoeff, base.rgb );
"
,
"
vec3 blend = vec3( lum );
"
,
"
float L = min( 1.0, max( 0.0, 10.0 * ( lum - 0.45 ) ) );
"
,
"
vec3 result1 = 2.0 * base.rgb * blend;
"
,
"
vec3 result2 = 1.0 - 2.0 * ( 1.0 - blend ) * ( 1.0 - base.rgb );
"
,
"
vec3 newColor = mix( result1, result2, L );
"
,
"
float A2 = opacity * base.a;
"
,
"
vec3 mixRGB = A2 * newColor.rgb;
"
,
"
mixRGB += ( ( 1.0 - A2 ) * base.rgb );
"
,
"
gl_FragColor = vec4( mixRGB, base.a );
"
,
"
}
"
].
join
(
"
\n
"
)
},
/* -------------------------------------------------------------------------
// Full-screen textured quad shader
------------------------------------------------------------------------- */
'
screen
'
:
{
uniforms
:
{
tDiffuse
:
{
type
:
"
t
"
,
value
:
0
,
texture
:
null
},
opacity
:
{
type
:
"
f
"
,
value
:
1.0
}
},
vertexShader
:
[
"
varying vec2 vUv;
"
,
"
void main() {
"
,
"
vUv = vec2( uv.x, 1.0 - uv.y );
"
,
"
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
"
,
"
}
"
].
join
(
"
\n
"
),
fragmentShader
:
[
"
uniform float opacity;
"
,
"
uniform sampler2D tDiffuse;
"
,
"
varying vec2 vUv;
"
,
"
void main() {
"
,
"
vec4 texel = texture2D( tDiffuse, vUv );
"
,
"
gl_FragColor = opacity * texel;
"
,
"
}
"
].
join
(
"
\n
"
)
},
/* -------------------------------------------------------------------------
// Simple test shader
------------------------------------------------------------------------- */
'
basic
'
:
{
uniforms
:
{},
vertexShader
:
[
"
void main() {
"
,
"
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
"
,
"
}
"
].
join
(
"
\n
"
),
fragmentShader
:
[
"
void main() {
"
,
"
gl_FragColor = vec4( 1.0, 0.0, 0.0, 0.5 );
"
,
"
}
"
].
join
(
"
\n
"
)
}
},
buildKernel
:
function
(
sigma
)
{
// We lop off the sqrt(2 * pi) * sigma term, since we're going to normalize anyway.
function
gauss
(
x
,
sigma
)
{
return
Math
.
exp
(
-
(
x
*
x
)
/
(
2.0
*
sigma
*
sigma
)
);
}
var
i
,
values
,
sum
,
halfWidth
,
kMaxKernelSize
=
25
,
kernelSize
=
2
*
Math
.
ceil
(
sigma
*
3.0
)
+
1
;
if
(
kernelSize
>
kMaxKernelSize
)
kernelSize
=
kMaxKernelSize
;
halfWidth
=
(
kernelSize
-
1
)
*
0.5
values
=
new
Array
(
kernelSize
);
sum
=
0.0
;
for
(
i
=
0
;
i
<
kernelSize
;
++
i
)
{
values
[
i
]
=
gauss
(
i
-
halfWidth
,
sigma
);
sum
+=
values
[
i
];
}
// normalize the kernel
for
(
i
=
0
;
i
<
kernelSize
;
++
i
)
values
[
i
]
/=
sum
;
return
values
;
}
};
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录