Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
车家大少爷
three.js
提交
1d51d1ea
T
three.js
项目概览
车家大少爷
/
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,发现更多精彩内容 >>
提交
1d51d1ea
编写于
6月 24, 2015
作者:
W
WestLangley
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Clean up
上级
71008527
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
59 addition
and
121 deletion
+59
-121
examples/js/shaders/NormalDisplacementShader.js
examples/js/shaders/NormalDisplacementShader.js
+15
-74
examples/webgl_materials_normaldisplacementmap.html
examples/webgl_materials_normaldisplacementmap.html
+44
-47
未找到文件。
examples/js/shaders/NormalDisplacementShader.js
浏览文件 @
1d51d1ea
...
...
@@ -46,8 +46,6 @@ THREE.NormalDisplacementShader = {
"
uOffset
"
:
{
type
:
"
v2
"
,
value
:
new
THREE
.
Vector2
(
0
,
0
)
},
"
uRepeat
"
:
{
type
:
"
v2
"
,
value
:
new
THREE
.
Vector2
(
1
,
1
)
},
"
wrapRGB
"
:
{
type
:
"
v3
"
,
value
:
new
THREE
.
Vector3
(
1
,
1
,
1
)
}
}
]
),
...
...
@@ -117,12 +115,6 @@ THREE.NormalDisplacementShader = {
"
#endif
"
,
"
#ifdef WRAP_AROUND
"
,
"
uniform vec3 wrapRGB;
"
,
"
#endif
"
,
"
varying vec3 vWorldPosition;
"
,
"
varying vec3 vViewPosition;
"
,
...
...
@@ -132,9 +124,11 @@ THREE.NormalDisplacementShader = {
THREE
.
ShaderChunk
[
"
logdepthbuf_pars_fragment
"
],
"
void main() {
"
,
THREE
.
ShaderChunk
[
"
logdepthbuf_fragment
"
],
"
vec3 outgoingLight = vec3( 0.0 );
"
,
// outgoing light does not have an alpha, the surface does
"
vec3 outgoingLight = vec3( 0.0 );
"
,
"
vec4 diffuseColor = vec4( diffuse, opacity );
"
,
"
vec3 specularTex = vec3( 1.0 );
"
,
...
...
@@ -162,22 +156,11 @@ THREE.NormalDisplacementShader = {
"
if( enableAO ) {
"
,
"
#ifdef GAMMA_INPUT
"
,
"
vec4 aoColor = texture2D( tAO, vUv );
"
,
"
aoColor.xyz *= aoColor.xyz;
"
,
"
diffuseColor.rgb *= aoColor.xyz;
"
,
"
#else
"
,
"
diffuseColor.rgb *= texture2D( tAO, vUv ).xyz;
"
,
"
#endif
"
,
"
diffuseColor.rgb *= texture2D( tAO, vUv ).xyz;
"
,
// actually, the AOmap should be modulating ambient light sources only,
// and should use the second set of UVs, as is done elsewhere in the library
"
}
"
,
THREE
.
ShaderChunk
[
"
alphatest_fragment
"
],
THREE
.
ShaderChunk
[
"
alphatest_fragment
"
],
"
if( enableSpecular )
"
,
"
specularTex = texture2D( tSpecular, vUv ).xyz;
"
,
...
...
@@ -187,7 +170,7 @@ THREE.NormalDisplacementShader = {
"
#ifdef FLIP_SIDED
"
,
"
finalNormal = -finalNormal;
"
,
"
finalNormal = -
finalNormal;
"
,
"
#endif
"
,
...
...
@@ -214,18 +197,7 @@ THREE.NormalDisplacementShader = {
// diffuse
"
#ifdef WRAP_AROUND
"
,
"
float pointDiffuseWeightFull = max( dot( normal, pointVector ), 0.0 );
"
,
"
float pointDiffuseWeightHalf = max( 0.5 * dot( normal, pointVector ) + 0.5, 0.0 );
"
,
"
vec3 pointDiffuseWeight = mix( vec3( pointDiffuseWeightFull ), vec3( pointDiffuseWeightHalf ), wrapRGB );
"
,
"
#else
"
,
"
float pointDiffuseWeight = max( dot( normal, pointVector ), 0.0 );
"
,
"
#endif
"
,
"
float pointDiffuseWeight = max( dot( normal, pointVector ), 0.0 );
"
,
"
totalDiffuseLight += pointDistance * pointLightColor[ i ] * pointDiffuseWeight;
"
,
...
...
@@ -267,18 +239,8 @@ THREE.NormalDisplacementShader = {
// diffuse
"
#ifdef WRAP_AROUND
"
,
"
float spotDiffuseWeightFull = max( dot( normal, spotVector ), 0.0 );
"
,
"
float spotDiffuseWeightHalf = max( 0.5 * dot( normal, spotVector ) + 0.5, 0.0 );
"
,
"
vec3 spotDiffuseWeight = mix( vec3( spotDiffuseWeightFull ), vec3( spotDiffuseWeightHalf ), wrapRGB );
"
,
"
#else
"
,
"
float spotDiffuseWeight = max( dot( normal, spotVector ), 0.0 );
"
,
"
#endif
"
,
"
float spotDiffuseWeight = max( dot( normal, spotVector ), 0.0 );
"
,
"
totalDiffuseLight += spotDistance * spotLightColor[ i ] * spotDiffuseWeight * spotEffect;
"
,
...
...
@@ -303,25 +265,14 @@ THREE.NormalDisplacementShader = {
"
#if MAX_DIR_LIGHTS > 0
"
,
"
for( int i = 0; i < MAX_DIR_LIGHTS; i++ ) {
"
,
"
for( int i = 0; i < MAX_DIR_LIGHTS; i
++ ) {
"
,
"
vec4 lDirection = viewMatrix * vec4( directionalLightDirection[ i ], 0.0 );
"
,
"
vec3 dirVector = normalize( lDirection.xyz );
"
,
// diffuse
"
#ifdef WRAP_AROUND
"
,
"
float directionalLightWeightingFull = max( dot( normal, dirVector ), 0.0 );
"
,
"
float directionalLightWeightingHalf = max( 0.5 * dot( normal, dirVector ) + 0.5, 0.0 );
"
,
"
vec3 dirDiffuseWeight = mix( vec3( directionalLightWeightingFull ), vec3( directionalLightWeightingHalf ), wrapRGB );
"
,
"
#else
"
,
"
float dirDiffuseWeight = max( dot( normal, dirVector ), 0.0 );
"
,
"
#endif
"
,
"
float dirDiffuseWeight = max( dot( normal, dirVector ), 0.0 );
"
,
"
totalDiffuseLight += directionalLightColor[ i ] * dirDiffuseWeight;
"
,
...
...
@@ -360,26 +311,16 @@ THREE.NormalDisplacementShader = {
// specular (sky light)
"
vec3 hemiHalfVectorSky = normalize( lVector + viewPosition );
"
,
"
float hemiDotNormalHalfSky = 0.5 * dot( normal, hemiHalfVectorSky ) + 0.5;
"
,
"
float hemiSpecularWeightSky = specularTex.r * max( pow( max( hemiDotNormalHalfSky, 0.0 ), shininess ), 0.0 );
"
,
// specular (ground light)
"
vec3 lVectorGround = -lVector;
"
,
"
vec3 hemiHalfVectorGround = normalize( lVectorGround + viewPosition );
"
,
"
float hemiDotNormalHalfGround = 0.5 * dot( normal, hemiHalfVectorGround ) + 0.5;
"
,
"
float hemiSpecularWeightGround = specularTex.r * max( pow( max( hemiDotNormalHalfGround, 0.0 ), shininess ), 0.0 );
"
,
"
float dotProductGround = dot( normal, lVectorGround );
"
,
//
"
float specularNormalization = ( shininess + 2.0 ) / 8.0;
"
,
"
vec3 schlickSky = specular + vec3( 1.0 - specular ) * pow( max( 1.0 - dot( lVector, hemiHalfVectorSky ), 0.0 ), 5.0 );
"
,
"
vec3 schlickGround = specular + vec3( 1.0 - specular ) * pow( max( 1.0 - dot( lVectorGround, hemiHalfVectorGround ), 0.0 ), 5.0 );
"
,
"
totalSpecularLight += hemiColor * specularNormalization * ( schlickSky * hemiSpecularWeightSky * max( dotProduct, 0.0 ) + schlickGround * hemiSpecularWeightGround * max( dotProductGround, 0.0 ) );
"
,
"
totalSpecularLight += hemiColor * specularNormalization * ( schlickSky * hemiSpecularWeightSky * max( dotProduct, 0.0 ) );
"
,
"
}
"
,
...
...
@@ -427,7 +368,7 @@ THREE.NormalDisplacementShader = {
THREE
.
ShaderChunk
[
"
linear_to_gamma_fragment
"
],
THREE
.
ShaderChunk
[
"
fog_fragment
"
],
"
gl_FragColor = vec4( outgoingLight, diffuseColor.a );
"
,
// TODO, this should be pre-multiplied to allow for bright highlights on very transparent objects
"
gl_FragColor = vec4( outgoingLight, diffuseColor.a );
"
,
"
}
"
...
...
@@ -557,7 +498,7 @@ THREE.NormalDisplacementShader = {
//
"
vWorldPosition = worldPosition.xyz;
"
,
"
vViewPosition = -mvPosition.xyz;
"
,
"
vViewPosition = -
mvPosition.xyz;
"
,
// shadows
...
...
examples/webgl_materials_normaldisplacementmap.html
浏览文件 @
1d51d1ea
...
...
@@ -58,16 +58,13 @@
if
(
!
Detector
.
webgl
)
Detector
.
addGetWebGLMessage
();
var
statsEnabled
=
true
;
var
container
,
stats
,
loader
;
var
stats
,
loader
;
var
camera
,
scene
,
renderer
;
var
mesh
,
zmesh
,
geometry
;
var
mesh1
,
mesh2
;
var
spotLight
,
pointLight
,
ambie
ntLight
;
var
poi
ntLight
;
var
mouseX
=
0
;
var
mouseY
=
0
;
...
...
@@ -84,17 +81,19 @@
function
init
()
{
container
=
document
.
createElement
(
'
div
'
);
var
container
=
document
.
createElement
(
'
div
'
);
document
.
body
.
appendChild
(
container
);
camera
=
new
THREE
.
OrthographicCamera
(
window
.
innerWidth
/
-
2
,
window
.
innerWidth
/
2
,
window
.
innerHeight
/
2
,
window
.
innerHeight
/
-
2
,
-
10000
,
10000
);
camera
.
position
.
z
=
1500
;
scene
=
new
THREE
.
Scene
();
var
width
=
500
;
var
aspect
=
window
.
innerWidth
/
window
.
innerHeight
;
camera
=
new
THREE
.
OrthographicCamera
(
-
width
*
aspect
,
width
*
aspect
,
width
,
-
width
,
1
,
10000
);
camera
.
position
.
z
=
1500
;
// LIGHTS
ambientLight
=
new
THREE
.
AmbientLight
(
0x111111
);
var
ambientLight
=
new
THREE
.
AmbientLight
(
0x111111
);
scene
.
add
(
ambientLight
);
pointLight
=
new
THREE
.
PointLight
(
0xff0000
);
...
...
@@ -102,39 +101,27 @@
pointLight
.
distance
=
4000
;
scene
.
add
(
pointLight
);
pointLight2
=
new
THREE
.
PointLight
(
0xff5500
);
var
pointLight2
=
new
THREE
.
PointLight
(
0xff5500
);
pointLight2
.
position
.
z
=
1000
;
pointLight2
.
distance
=
2000
;
scene
.
add
(
pointLight2
);
pointLight3
=
new
THREE
.
PointLight
(
0x0000ff
);
var
pointLight3
=
new
THREE
.
PointLight
(
0x0000ff
);
pointLight3
.
position
.
x
=
-
1000
;
pointLight3
.
position
.
z
=
1000
;
pointLight3
.
distance
=
2000
;
scene
.
add
(
pointLight3
);
spotLight
=
new
THREE
.
SpotLight
(
0xaaaaaa
);
var
spotLight
=
new
THREE
.
SpotLight
(
0xaaaaaa
);
spotLight
.
position
.
set
(
1000
,
500
,
1000
);
spotLight
.
castShadow
=
true
;
spotLight
.
shadowCameraNear
=
500
;
spotLight
.
shadowCameraFov
=
70
;
spotLight
.
shadowBias
=
0.001
;
spotLight
.
shadowBias
=
-
0.001
;
spotLight
.
shadowMapWidth
=
1024
;
spotLight
.
shadowMapHeight
=
1024
;
spotLight
.
shadowDarkness
=
0.5
;
scene
.
add
(
spotLight
);
directionalLight2
=
new
THREE
.
DirectionalLight
(
0xaaff33
,
0
);
directionalLight2
.
position
.
set
(
-
1
,
1
,
0.5
).
normalize
();
//scene.add( directionalLight2 );
directionalLight3
=
new
THREE
.
DirectionalLight
(
0xaaff33
);
directionalLight3
.
position
.
set
(
-
1
,
1
,
0.5
).
normalize
();
//scene.add( directionalLight3 );
// light representation
var
sphere
=
new
THREE
.
SphereGeometry
(
100
,
16
,
8
);
// env map
var
path
=
"
textures/cube/SwedishRoyalCastle/
"
;
var
format
=
'
.jpg
'
;
...
...
@@ -144,7 +131,7 @@
path
+
'
pz
'
+
format
,
path
+
'
nz
'
+
format
];
var
reflectionCube
=
THREE
.
ImageUtils
.
loadTextureCube
(
urls
);
var
reflectionCube
=
THREE
.
ImageUtils
.
loadTextureCube
(
urls
,
THREE
.
CubeReflectionMapping
);
// common material parameters
...
...
@@ -168,7 +155,7 @@
uniforms
[
"
uDisplacementBias
"
].
value
=
-
0.428408
;
uniforms
[
"
uDisplacementScale
"
].
value
=
2.436143
;
uniforms
[
"
uNormalScale
"
].
value
.
y
=
-
1
;
uniforms
[
"
uNormalScale
"
].
value
.
y
=
-
1
;
uniforms
[
"
diffuse
"
].
value
.
setHex
(
diffuse
);
uniforms
[
"
specular
"
].
value
.
setHex
(
specular
);
...
...
@@ -176,13 +163,21 @@
uniforms
[
"
shininess
"
].
value
=
shininess
;
uniforms
[
"
tCube
"
].
value
=
reflectionCube
;
uniforms
[
"
reflectivity
"
].
value
=
0.
1
;
uniforms
[
"
reflectivity
"
].
value
=
0.
2
;
var
parameters
=
{
fragmentShader
:
shader
.
fragmentShader
,
vertexShader
:
shader
.
vertexShader
,
uniforms
:
uniforms
,
lights
:
true
,
fog
:
false
};
var
material1
=
new
THREE
.
ShaderMaterial
(
parameters
);
var
defines
=
{};
defines
[
"
ENVMAP_MODE_REFLECTION
"
]
=
""
;
var
parameters
=
{
defines
:
defines
,
uniforms
:
uniforms
,
vertexShader
:
shader
.
vertexShader
,
fragmentShader
:
shader
.
fragmentShader
,
lights
:
true
,
fog
:
false
};
// Ensure that ENVMAP_MODE_REFLECTION is defined in shader
material1
.
envMap
=
reflectionCube
;
var
material1
=
new
THREE
.
ShaderMaterial
(
parameters
);
var
material2
=
new
THREE
.
MeshPhongMaterial
(
{
color
:
diffuse
,
...
...
@@ -190,9 +185,11 @@
shininess
:
shininess
,
normalMap
:
uniforms
[
"
tNormal
"
].
value
,
normalScale
:
uniforms
[
"
uNormalScale
"
].
value
,
aoMap
:
uniforms
[
"
tAO
"
].
value
,
aoMapIntensity
:
1
,
envMap
:
reflectionCube
,
combine
:
THREE
.
MixOperation
,
reflectivity
:
0.
1
reflectivity
:
0.
2
}
);
//
...
...
@@ -219,22 +216,19 @@
renderer
.
shadowMap
.
enabled
=
true
;
renderer
.
shadowMap
.
type
=
THREE
.
PCFShadowMap
;
//
var
description
=
"
normal + ao
"
+
(
renderer
.
supportsVertexTextures
()
?
"
+ displacement + environment + shadow
"
:
"
+ <strike>displacement</strike>
"
);
document
.
getElementById
(
"
description
"
).
innerHTML
=
description
;
document
.
getElementById
(
"
vt
"
).
style
.
display
=
renderer
.
supportsVertexTextures
()
?
"
none
"
:
"
block
"
;
if
(
statsEnabled
)
{
stats
=
new
Stats
();
stats
.
domElement
.
style
.
position
=
'
absolute
'
;
stats
.
domElement
.
style
.
top
=
'
0px
'
;
stats
.
domElement
.
style
.
zIndex
=
100
;
container
.
appendChild
(
stats
.
domElement
);
//
}
stats
=
new
Stats
();
stats
.
domElement
.
style
.
position
=
'
absolute
'
;
stats
.
domElement
.
style
.
top
=
'
0px
'
;
stats
.
domElement
.
style
.
zIndex
=
100
;
container
.
appendChild
(
stats
.
domElement
);
//
...
...
@@ -260,7 +254,9 @@
function
createScene
(
geometry
,
scale
,
material1
,
material2
)
{
geometry
.
computeTangents
();
geometry
.
computeTangents
();
// attribute tangents are required for NormalDisplacementShader
geometry
.
faceVertexUvs
[
1
]
=
geometry
.
faceVertexUvs
[
0
];
// 2nd set of UVs required for aoMap with MeshPhongMaterial
mesh1
=
new
THREE
.
Mesh
(
geometry
,
material1
);
mesh1
.
position
.
x
=
-
scale
*
12
;
...
...
@@ -294,7 +290,8 @@
requestAnimationFrame
(
animate
);
render
();
if
(
statsEnabled
)
stats
.
update
();
stats
.
update
();
}
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录