Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Ablesons
three.js
提交
ec8dc3e3
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,发现更多精彩内容 >>
提交
ec8dc3e3
编写于
1月 03, 2013
作者:
M
Mr.doob
浏览文件
操作
浏览文件
下载
差异文件
Merged with alteredq branch
上级
8a7f3fad
060b294a
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
176 addition
and
27 deletion
+176
-27
examples/js/ShaderDeferred.js
examples/js/ShaderDeferred.js
+86
-8
examples/js/postprocessing/EffectComposer.js
examples/js/postprocessing/EffectComposer.js
+6
-0
examples/js/renderers/WebGLDeferredRenderer.js
examples/js/renderers/WebGLDeferredRenderer.js
+62
-12
examples/webgl_lights_deferred_arealights.html
examples/webgl_lights_deferred_arealights.html
+22
-7
未找到文件。
examples/js/ShaderDeferred.js
浏览文件 @
ec8dc3e3
...
...
@@ -292,7 +292,15 @@ THREE.ShaderDeferred = {
// emissive color
"
gl_FragColor.w = vec3_to_float( compressionScale * emissive * diffuseMapColor );
"
,
"
#ifdef USE_COLOR
"
,
"
gl_FragColor.w = vec3_to_float( compressionScale * emissive * diffuseMapColor * vColor );
"
,
"
#else
"
,
"
gl_FragColor.w = vec3_to_float( compressionScale * emissive * diffuseMapColor );
"
,
"
#endif
"
,
"
}
"
...
...
@@ -443,10 +451,78 @@ THREE.ShaderDeferred = {
"
uniform sampler2D samplerLight;
"
,
"
uniform float brightness;
"
,
// tonemapping operators
// based on John Hable's HLSL snippets
// from http://filmicgames.com/archives/75
"
#ifdef TONEMAP_UNCHARTED
"
,
"
const float A = 0.15;
"
,
"
const float B = 0.50;
"
,
"
const float C = 0.10;
"
,
"
const float D = 0.20;
"
,
"
const float E = 0.02;
"
,
"
const float F = 0.30;
"
,
"
const float W = 11.2;
"
,
"
vec3 Uncharted2Tonemap( vec3 x ) {
"
,
"
return ( ( x * ( A * x + C * B ) + D * E ) / ( x * ( A * x + B ) + D * F ) ) - E / F;
"
,
"
}
"
,
"
#endif
"
,
"
void main() {
"
,
"
vec3 color = texture2D( samplerLight, texCoord ).xyz;
"
,
"
gl_FragColor = vec4( brightness * sqrt( color ), 1.0 );
"
,
"
vec3 inColor = texture2D( samplerLight, texCoord ).xyz;
"
,
"
inColor *= brightness;
"
,
"
vec3 outColor;
"
,
"
#if defined( TONEMAP_SIMPLE )
"
,
"
outColor = sqrt( inColor );
"
,
"
#elif defined( TONEMAP_LINEAR )
"
,
// simple linear to gamma conversion
"
outColor = pow( inColor, vec3( 1.0 / 2.2 ) );
"
,
"
#elif defined( TONEMAP_REINHARD )
"
,
// Reinhard operator
"
inColor = inColor / ( 1.0 + inColor );
"
,
"
outColor = pow( inColor, vec3( 1.0 / 2.2 ) );
"
,
"
#elif defined( TONEMAP_FILMIC )
"
,
// filmic operator by Jim Hejl and Richard Burgess-Dawson
"
vec3 x = max( vec3( 0.0 ), inColor - 0.004 );
"
,
"
outColor = ( x * ( 6.2 * x + 0.5 ) ) / ( x * ( 6.2 * x + 1.7 ) + 0.06 );
"
,
"
#elif defined( TONEMAP_UNCHARTED )
"
,
// tonemapping operator from Uncharted 2 by John Hable
"
float ExposureBias = 2.0;
"
,
"
vec3 curr = Uncharted2Tonemap( ExposureBias * inColor );
"
,
"
vec3 whiteScale = vec3( 1.0 ) / Uncharted2Tonemap( vec3( W ) );
"
,
"
vec3 color = curr * whiteScale;
"
,
"
outColor = pow( color, vec3( 1.0 / 2.2 ) );
"
,
"
#else
"
,
"
outColor = inColor;
"
,
"
#endif
"
,
"
gl_FragColor = vec4( outColor, 1.0 );
"
,
"
}
"
...
...
@@ -919,13 +995,15 @@ THREE.ShaderDeferred = {
"
vec3 nearestPointInside = vec3( lightPositionVS ) + ( lightRightVS * nearest2D.x + lightUpVS * nearest2D.y );
"
,
"
vec3 lightDir = normalize( nearestPointInside - vertexPositionVS.xyz );
"
,
"
float NdotL = dot( lightNormalVS, -lightDir );
"
,
"
float NdotL = max( dot( lightNormalVS, -lightDir ), 0.0 );
"
,
"
float NdotL2 = max( dot( normal, lightDir ), 0.0 );
"
,
"
if ( NdotL != 0.0 && sideOfPlane( vertexPositionVS.xyz, lightPositionVS, lightNormalVS ) ) {
"
,
//"if ( NdotL2 * NdotL > 0.0 && sideOfPlane( vertexPositionVS.xyz, lightPositionVS, lightNormalVS ) ) {",
"
if ( NdotL2 * NdotL > 0.0 ) {
"
,
// diffuse
"
vec3 diffuse = vec3(
NdotL
);
"
,
"
vec3 diffuse = vec3(
sqrt( NdotL * NdotL2 )
);
"
,
// specular
...
...
@@ -941,8 +1019,8 @@ THREE.ShaderDeferred = {
"
vec3 dirSpec = E - vec3( lightPositionVS );
"
,
"
vec2 dirSpec2D = vec2( dot( dirSpec, lightRightVS ), dot( dirSpec, lightUpVS ) );
"
,
"
vec2 nearestSpec2D = vec2( clamp( dirSpec2D.x, -w, w ), clamp( dirSpec2D.y, -h, h ) );
"
,
"
float specFactor = 1.0 - clamp( length( nearestSpec2D - dirSpec2D ) * shininess, 0.0, 1.0 );
"
,
"
specular = specularColor * specFactor * specAngle;
"
,
"
float specFactor = 1.0 - clamp( length( nearestSpec2D - dirSpec2D ) *
0.05 *
shininess, 0.0, 1.0 );
"
,
"
specular = specularColor * specFactor * specAngle
* diffuse
;
"
,
"
}
"
,
...
...
examples/js/postprocessing/EffectComposer.js
浏览文件 @
ec8dc3e3
...
...
@@ -47,6 +47,12 @@ THREE.EffectComposer.prototype = {
},
insertPass
:
function
(
pass
,
index
)
{
this
.
passes
.
splice
(
index
,
0
,
pass
);
},
render
:
function
(
delta
)
{
this
.
writeBuffer
=
this
.
renderTarget1
;
...
...
examples/js/renderers/WebGLDeferredRenderer.js
浏览文件 @
ec8dc3e3
...
...
@@ -15,6 +15,7 @@ THREE.WebGLDeferredRenderer = function ( parameters ) {
var
scaledHeight
=
Math
.
floor
(
currentScale
*
fullHeight
);
var
brightness
=
parameters
.
brightness
!==
undefined
?
parameters
.
brightness
:
1
;
var
tonemapping
=
parameters
.
tonemapping
!==
undefined
?
parameters
.
tonemapping
:
THREE
.
SimpleOperator
;
var
antialias
=
parameters
.
antialias
!==
undefined
?
parameters
.
antialias
:
false
;
this
.
renderer
=
parameters
.
renderer
;
...
...
@@ -205,7 +206,7 @@ THREE.WebGLDeferredRenderer = function ( parameters ) {
uniforms
.
viewWidth
.
value
=
scaledWidth
;
uniforms
.
viewHeight
.
value
=
scaledHeight
;
resizableMaterials
.
push
(
material
);
resizableMaterials
.
push
(
{
"
material
"
:
material
}
);
}
...
...
@@ -403,7 +404,7 @@ THREE.WebGLDeferredRenderer = function ( parameters ) {
// keep reference for size reset
resizableMaterials
.
push
(
materialLight
);
resizableMaterials
.
push
(
{
"
material
"
:
materialLight
}
);
// sync proxy uniforms to the original light
...
...
@@ -479,7 +480,7 @@ THREE.WebGLDeferredRenderer = function ( parameters ) {
// keep reference for size reset
resizableMaterials
.
push
(
materialLight
);
resizableMaterials
.
push
(
{
"
material
"
:
materialLight
}
);
// sync proxy uniforms to the original light
...
...
@@ -545,7 +546,7 @@ THREE.WebGLDeferredRenderer = function ( parameters ) {
// keep reference for size reset
resizableMaterials
.
push
(
materialLight
);
resizableMaterials
.
push
(
{
"
material
"
:
materialLight
}
);
// sync proxy uniforms to the original light
...
...
@@ -611,7 +612,7 @@ THREE.WebGLDeferredRenderer = function ( parameters ) {
// keep reference for size reset
resizableMaterials
.
push
(
materialLight
);
resizableMaterials
.
push
(
{
"
material
"
:
materialLight
}
);
// sync proxy uniforms to the original light
...
...
@@ -700,7 +701,7 @@ THREE.WebGLDeferredRenderer = function ( parameters ) {
// keep reference for size reset
resizableMaterials
.
push
(
materialLight
);
resizableMaterials
.
push
(
{
"
material
"
:
materialLight
}
);
// sync proxy uniforms to the original light
...
...
@@ -736,7 +737,7 @@ THREE.WebGLDeferredRenderer = function ( parameters ) {
// keep reference for size reset
resizableMaterials
.
push
(
materialLight
);
resizableMaterials
.
push
(
{
"
material
"
:
materialLight
}
);
return
meshLight
;
...
...
@@ -851,6 +852,25 @@ THREE.WebGLDeferredRenderer = function ( parameters ) {
};
this
.
addEffect
=
function
(
effect
,
normalDepthUniform
,
colorUniform
)
{
if
(
effect
.
material
&&
effect
.
uniforms
)
{
if
(
normalDepthUniform
)
effect
.
uniforms
[
normalDepthUniform
].
value
=
compNormalDepth
.
renderTarget2
;
if
(
colorUniform
)
effect
.
uniforms
[
colorUniform
].
value
=
compColor
.
renderTarget2
;
if
(
normalDepthUniform
||
colorUniform
)
{
resizableMaterials
.
push
(
{
"
material
"
:
effect
.
material
,
"
normalDepth
"
:
normalDepthUniform
,
"
color
"
:
colorUniform
}
);
}
}
compFinal
.
insertPass
(
effect
,
-
1
);
};
this
.
setScale
=
function
(
scale
)
{
currentScale
=
scale
;
...
...
@@ -868,13 +888,19 @@ THREE.WebGLDeferredRenderer = function ( parameters ) {
for
(
var
i
=
0
,
il
=
resizableMaterials
.
length
;
i
<
il
;
i
++
)
{
var
uniforms
=
resizableMaterials
[
i
].
uniforms
;
var
materialEntry
=
resizableMaterials
[
i
]
;
uniforms
[
"
viewWidth
"
].
value
=
scaledWidth
;
uniforms
[
"
viewHeight
"
].
value
=
scaledHeight
;
var
material
=
materialEntry
.
material
;
var
uniforms
=
material
.
uniforms
;
if
(
uniforms
[
'
samplerColor
'
]
)
uniforms
[
'
samplerColor
'
].
value
=
compColor
.
renderTarget2
;
if
(
uniforms
[
'
samplerNormalDepth
'
]
)
uniforms
[
'
samplerNormalDepth
'
].
value
=
compNormalDepth
.
renderTarget2
;
var
colorLabel
=
materialEntry
.
color
!==
undefined
?
materialEntry
.
color
:
'
samplerColor
'
;
var
normalDepthLabel
=
materialEntry
.
normalDepth
!==
undefined
?
materialEntry
.
normalDepth
:
'
samplerNormalDepth
'
;
if
(
uniforms
[
colorLabel
]
)
uniforms
[
colorLabel
].
value
=
compColor
.
renderTarget2
;
if
(
uniforms
[
normalDepthLabel
]
)
uniforms
[
normalDepthLabel
].
value
=
compNormalDepth
.
renderTarget2
;
if
(
uniforms
[
'
viewWidth
'
]
)
uniforms
[
"
viewWidth
"
].
value
=
scaledWidth
;
if
(
uniforms
[
'
viewHeight
'
]
)
uniforms
[
"
viewHeight
"
].
value
=
scaledHeight
;
}
...
...
@@ -1117,6 +1143,20 @@ THREE.WebGLDeferredRenderer = function ( parameters ) {
compositePass
.
material
.
blending
=
THREE
.
NoBlending
;
compositePass
.
clear
=
true
;
var
defines
;
switch
(
tonemapping
)
{
case
THREE
.
SimpleOperator
:
defines
=
{
"
TONEMAP_SIMPLE
"
:
true
};
break
;
case
THREE
.
LinearOperator
:
defines
=
{
"
TONEMAP_LINEAR
"
:
true
};
break
;
case
THREE
.
ReinhardOperator
:
defines
=
{
"
TONEMAP_REINHARD
"
:
true
};
break
;
case
THREE
.
FilmicOperator
:
defines
=
{
"
TONEMAP_FILMIC
"
:
true
};
break
;
case
THREE
.
UnchartedOperator
:
defines
=
{
"
TONEMAP_UNCHARTED
"
:
true
};
break
;
}
compositePass
.
material
.
defines
=
defines
;
// FXAA
effectFXAA
=
new
THREE
.
ShaderPass
(
THREE
.
FXAAShader
);
...
...
@@ -1138,6 +1178,7 @@ THREE.WebGLDeferredRenderer = function ( parameters ) {
effectFXAA
.
enabled
=
false
;
compositePass
.
renderToScreen
=
true
;
}
};
...
...
@@ -1147,3 +1188,12 @@ THREE.WebGLDeferredRenderer = function ( parameters ) {
createRenderTargets
();
};
// tonemapping operator types
THREE
.
NoOperator
=
0
;
THREE
.
SimpleOperator
=
1
;
THREE
.
LinearOperator
=
2
;
THREE
.
ReinhardOperator
=
3
;
THREE
.
FilmicOperator
=
4
;
THREE
.
UnchartedOperator
=
5
;
examples/webgl_lights_deferred_arealights.html
浏览文件 @
ec8dc3e3
...
...
@@ -54,11 +54,13 @@
<script
src=
"js/shaders/CopyShader.js"
></script>
<script
src=
"js/shaders/FXAAShader.js"
></script>
<script
src=
"js/shaders/ConvolutionShader.js"
></script>
<script
src=
"js/postprocessing/EffectComposer.js"
></script>
<script
src=
"js/postprocessing/RenderPass.js"
></script>
<script
src=
"js/postprocessing/ShaderPass.js"
></script>
<script
src=
"js/postprocessing/MaskPass.js"
></script>
<script
src=
"js/postprocessing/BloomPass.js"
></script>
<script>
...
...
@@ -105,7 +107,7 @@
// renderer
renderer
=
new
THREE
.
WebGLDeferredRenderer
(
{
width
:
WIDTH
,
height
:
HEIGHT
,
scale
:
SCALE
,
antialias
:
true
}
);
renderer
=
new
THREE
.
WebGLDeferredRenderer
(
{
width
:
WIDTH
,
height
:
HEIGHT
,
scale
:
SCALE
,
antialias
:
true
,
tonemapping
:
THREE
.
FilmicOperator
,
brightness
:
2.5
}
);
renderer
.
domElement
.
style
.
position
=
"
absolute
"
;
renderer
.
domElement
.
style
.
top
=
MARGIN
+
"
px
"
;
...
...
@@ -114,6 +116,11 @@
var
container
=
document
.
getElementById
(
'
container
'
);
container
.
appendChild
(
renderer
.
domElement
);
// effects
var
bloomEffect
=
new
THREE
.
BloomPass
(
0.65
);
renderer
.
addEffect
(
bloomEffect
);
// camera
camera
=
new
THREE
.
PerspectiveCamera
(
VIEW_ANGLE
,
WIDTH
/
HEIGHT
,
NEAR
,
FAR
);
...
...
@@ -156,7 +163,15 @@
function
createAreaEmitter
(
light
)
{
var
geometry
=
new
THREE
.
CubeGeometry
(
1
,
1
,
1
);
var
material
=
new
THREE
.
MeshBasicMaterial
(
{
color
:
light
.
color
.
getHex
()
}
);
var
material
=
new
THREE
.
MeshBasicMaterial
(
{
color
:
light
.
color
.
getHex
(),
vertexColors
:
THREE
.
FaceColors
}
);
var
backColor
=
0x222222
;
geometry
.
faces
[
5
].
color
.
setHex
(
backColor
);
geometry
.
faces
[
4
].
color
.
setHex
(
backColor
);
geometry
.
faces
[
2
].
color
.
setHex
(
backColor
);
geometry
.
faces
[
1
].
color
.
setHex
(
backColor
);
geometry
.
faces
[
0
].
color
.
setHex
(
backColor
);
var
emitter
=
new
THREE
.
Mesh
(
geometry
,
material
);
...
...
@@ -183,7 +198,7 @@
function
initLights
()
{
areaLight1
=
new
THREE
.
AreaLight
(
0xffffff
,
1
);
areaLight1
.
position
.
set
(
0.0001
,
10.0001
,
-
1
9
.5001
);
areaLight1
.
position
.
set
(
0.0001
,
10.0001
,
-
1
8
.5001
);
areaLight1
.
rotation
.
set
(
-
0.74719
,
0.0001
,
0.0001
);
areaLight1
.
width
=
10
;
areaLight1
.
height
=
1
;
...
...
@@ -228,7 +243,7 @@
var
loader
=
new
THREE
.
BinaryLoader
();
loader
.
load
(
"
obj/box/box.js
"
,
function
(
geometry
,
materials
)
{
var
material
=
new
THREE
.
MeshPhongMaterial
(
{
color
:
0xffaa55
,
specular
:
0x888888
,
shininess
:
1
0
}
);
var
material
=
new
THREE
.
MeshPhongMaterial
(
{
color
:
0xffaa55
,
specular
:
0x888888
,
shininess
:
20
0
}
);
var
object
=
new
THREE
.
Mesh
(
geometry
,
material
);
object
.
scale
.
multiplyScalar
(
2
);
scene
.
add
(
object
);
...
...
@@ -363,13 +378,13 @@
var
time
=
Date
.
now
();
areaLight1
.
position
.
x
=
Math
.
sin
(
Date
.
now
()
*
0.001
)
*
10
;
areaLight1
.
position
.
x
=
Math
.
sin
(
Date
.
now
()
*
0.001
)
*
9
;
areaLight1
.
position
.
y
=
Math
.
sin
(
Date
.
now
()
*
0.0013
)
*
5
+
5
;
areaLight2
.
position
.
y
=
Math
.
sin
(
Date
.
now
()
*
0.0011
)
*
5
+
5
;
areaLight2
.
position
.
y
=
Math
.
sin
(
Date
.
now
()
*
0.0011
)
*
3
+
5
;
areaLight2
.
position
.
z
=
Math
.
sin
(
Date
.
now
()
*
0.00113
)
*
10
;
areaLight3
.
position
.
y
=
Math
.
sin
(
Date
.
now
()
*
0.00111
)
*
5
+
5
;
areaLight3
.
position
.
y
=
Math
.
sin
(
Date
.
now
()
*
0.00111
)
*
3
+
5
;
areaLight3
.
position
.
z
=
Math
.
sin
(
Date
.
now
()
*
0.001113
)
*
10
;
// render
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录