Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
车家大少爷
three.js
提交
b1633c0e
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,发现更多精彩内容 >>
提交
b1633c0e
编写于
10月 06, 2014
作者:
M
Mr.doob
浏览文件
操作
浏览文件
下载
差异文件
Merge remote-tracking branch 'origin/dev' into dev
上级
4b086ef2
b9fbbaf2
变更
8
隐藏空白更改
内联
并排
Showing
8 changed file
with
371 addition
and
8 deletion
+371
-8
editor/css/dark.css
editor/css/dark.css
+1
-1
editor/css/light.css
editor/css/light.css
+1
-1
examples/index.html
examples/index.html
+1
-0
examples/js/exporters/SceneExporter.js
examples/js/exporters/SceneExporter.js
+6
-6
examples/js/shaders/ParallaxShader.js
examples/js/shaders/ParallaxShader.js
+182
-0
examples/textures/brick_bump.jpg
examples/textures/brick_bump.jpg
+0
-0
examples/textures/brick_diffuse.jpg
examples/textures/brick_diffuse.jpg
+0
-0
examples/webgl_materials_parallaxmap.html
examples/webgl_materials_parallaxmap.html
+180
-0
未找到文件。
editor/css/dark.css
浏览文件 @
b1633c0e
...
...
@@ -70,8 +70,8 @@ input.Number {
}
#menubar
.menu
.options
{
display
:
none
;
position
:
absolute
;
display
:
none
;
padding
:
5px
0px
;
background
:
#111
;
width
:
140px
;
...
...
editor/css/light.css
浏览文件 @
b1633c0e
...
...
@@ -71,8 +71,8 @@ input.Number {
}
#menubar
.menu
.options
{
display
:
none
;
position
:
absolute
;
display
:
none
;
padding
:
5px
0px
;
background
:
#eee
;
width
:
140px
;
...
...
examples/index.html
浏览文件 @
b1633c0e
...
...
@@ -215,6 +215,7 @@
"
webgl_materials_lightmap
"
,
"
webgl_materials_normalmap
"
,
"
webgl_materials_normalmap2
"
,
"
webgl_materials_parallaxmap
"
,
"
webgl_materials_shaders_fresnel
"
,
"
webgl_materials_skin
"
,
"
webgl_materials_texture_anisotropy
"
,
...
...
examples/js/exporters/SceneExporter.js
浏览文件 @
b1633c0e
...
...
@@ -371,9 +371,9 @@ THREE.SceneExporter.prototype = {
'
\t
'
+
LabelString
(
getGeometryName
(
g
)
)
+
'
: {
'
,
'
"type" : "sphere",
'
,
'
"radius" :
'
+
g
.
radius
+
'
,
'
,
'
"widthSegments" :
'
+
g
.
widthSegments
+
'
,
'
,
'
"heightSegments" :
'
+
g
.
heightSegments
,
'
"radius" :
'
+
g
.
parameters
.
radius
+
'
,
'
,
'
"widthSegments" :
'
+
g
.
parameters
.
widthSegments
+
'
,
'
,
'
"heightSegments" :
'
+
g
.
parameters
.
heightSegments
,
'
}
'
];
...
...
@@ -384,9 +384,9 @@ THREE.SceneExporter.prototype = {
'
\t
'
+
LabelString
(
getGeometryName
(
g
)
)
+
'
: {
'
,
'
"type" : "cube",
'
,
'
"width" :
'
+
g
.
width
+
'
,
'
,
'
"height" :
'
+
g
.
height
+
'
,
'
,
'
"depth" :
'
+
g
.
depth
+
'
,
'
,
'
"width" :
'
+
g
.
parameters
.
width
+
'
,
'
,
'
"height" :
'
+
g
.
parameters
.
height
+
'
,
'
,
'
"depth" :
'
+
g
.
parameters
.
depth
+
'
,
'
,
'
"widthSegments" :
'
+
g
.
widthSegments
+
'
,
'
,
'
"heightSegments" :
'
+
g
.
heightSegments
+
'
,
'
,
'
"depthSegments" :
'
+
g
.
depthSegments
,
...
...
examples/js/shaders/ParallaxShader.js
0 → 100644
浏览文件 @
b1633c0e
// Parallax Occlusion shaders from
// http://sunandblackcat.com/tipFullView.php?topicid=28
// No tangent-space transforms logic based on
// http://mmikkelsen3d.blogspot.sk/2012/02/parallaxpoc-mapping-and-no-tangent.html
THREE
.
ParallaxShader
=
{
// Ordered from fastest to best quality.
modes
:
{
none
:
'
NO_PARALLAX
'
,
basic
:
'
USE_BASIC_PARALLAX
'
,
steep
:
'
USE_STEEP_PARALLAX
'
,
occlusion
:
'
USE_OCLUSION_PARALLAX
'
,
// a.k.a. POM
relief
:
'
USE_RELIEF_PARALLAX
'
,
},
uniforms
:
{
"
bumpMap
"
:
{
type
:
"
t
"
,
value
:
null
},
"
map
"
:
{
type
:
"
t
"
,
value
:
null
},
"
parallaxScale
"
:
{
type
:
"
f
"
,
value
:
null
},
"
parallaxMinLayers
"
:
{
type
:
"
f
"
,
value
:
null
},
"
parallaxMaxLayers
"
:
{
type
:
"
f
"
,
value
:
null
}
},
vertexShader
:
[
"
varying vec2 vUv;
"
,
"
varying vec3 vViewPosition;
"
,
"
varying vec3 vNormal;
"
,
"
void main() {
"
,
"
vUv = uv;
"
,
"
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
"
,
"
vViewPosition = -mvPosition.xyz;
"
,
"
vNormal = normalize( normalMatrix * normal );
"
,
"
gl_Position = projectionMatrix * mvPosition;
"
,
"
}
"
].
join
(
"
\n
"
),
fragmentShader
:
[
"
uniform sampler2D bumpMap;
"
,
"
uniform sampler2D map;
"
,
"
uniform float parallaxScale;
"
,
"
uniform float parallaxMinLayers;
"
,
"
uniform float parallaxMaxLayers;
"
,
"
varying vec2 vUv;
"
,
"
varying vec3 vViewPosition;
"
,
"
varying vec3 vNormal;
"
,
"
#ifdef USE_BASIC_PARALLAX
"
,
"
vec2 parallaxMap( in vec3 V ) {
"
,
"
float initialHeight = texture2D( bumpMap, vUv ).r;
"
,
// No Offset Limitting: messy, floating output at grazing angles.
//"vec2 texCoordOffset = parallaxScale * V.xy / V.z * initialHeight;",
// Offset Limiting
"
vec2 texCoordOffset = parallaxScale * V.xy * initialHeight;
"
,
"
return vUv - texCoordOffset;
"
,
"
}
"
,
"
#else
"
,
"
vec2 parallaxMap( in vec3 V ) {
"
,
// Determine number of layers from angle between V and N
"
float numLayers = mix( parallaxMaxLayers, parallaxMinLayers, abs( dot( vec3( 0.0, 0.0, 1.0 ), V ) ) );
"
,
"
float layerHeight = 1.0 / numLayers;
"
,
"
float currentLayerHeight = 0.0;
"
,
// Shift of texture coordinates for each iteration
"
vec2 dtex = parallaxScale * V.xy / V.z / numLayers;
"
,
"
vec2 currentTextureCoords = vUv;
"
,
"
float heightFromTexture = texture2D( bumpMap, currentTextureCoords ).r;
"
,
// while ( heightFromTexture > currentLayerHeight )
"
for ( int i = 0; i == 0; i += 0 ) {
"
,
"
if ( heightFromTexture <= currentLayerHeight ) {
"
,
"
break;
"
,
"
}
"
,
"
currentLayerHeight += layerHeight;
"
,
// Shift texture coordinates along vector V
"
currentTextureCoords -= dtex;
"
,
"
heightFromTexture = texture2D( bumpMap, currentTextureCoords ).r;
"
,
"
}
"
,
"
#ifdef USE_STEEP_PARALLAX
"
,
"
return currentTextureCoords;
"
,
"
#elif defined( USE_RELIEF_PARALLAX )
"
,
"
vec2 deltaTexCoord = dtex / 2.0;
"
,
"
float deltaHeight = layerHeight / 2.0;
"
,
// Return to the mid point of previous layer
"
currentTextureCoords += deltaTexCoord;
"
,
"
currentLayerHeight -= deltaHeight;
"
,
// Binary search to increase precision of Steep Parallax Mapping
"
const int numSearches = 5;
"
,
"
for ( int i = 0; i < numSearches; i += 1 ) {
"
,
"
deltaTexCoord /= 2.0;
"
,
"
deltaHeight /= 2.0;
"
,
"
heightFromTexture = texture2D( bumpMap, currentTextureCoords ).r;
"
,
// Shift along or against vector V
"
if( heightFromTexture > currentLayerHeight ) {
"
,
// Below the surface
"
currentTextureCoords -= deltaTexCoord;
"
,
"
currentLayerHeight += deltaHeight;
"
,
"
} else {
"
,
// above the surface
"
currentTextureCoords += deltaTexCoord;
"
,
"
currentLayerHeight -= deltaHeight;
"
,
"
}
"
,
"
}
"
,
"
return currentTextureCoords;
"
,
"
#elif defined( USE_OCLUSION_PARALLAX )
"
,
"
vec2 prevTCoords = currentTextureCoords + dtex;
"
,
// Heights for linear interpolation
"
float nextH = heightFromTexture - currentLayerHeight;
"
,
"
float prevH = texture2D( bumpMap, prevTCoords ).r - currentLayerHeight + layerHeight;
"
,
// Proportions for linear interpolation
"
float weight = nextH / ( nextH - prevH );
"
,
// Interpolation of texture coordinates
"
return prevTCoords * weight + currentTextureCoords * ( 1.0 - weight );
"
,
"
#else
"
,
// NO_PARALLAX
"
return vUv;
"
,
"
#endif
"
,
"
}
"
,
"
#endif
"
,
"
vec2 perturbUv( vec3 surfPosition, vec3 surfNormal, vec3 viewPosition ) {
"
,
"
vec2 texDx = dFdx( vUv );
"
,
"
vec2 texDy = dFdy( vUv );
"
,
"
vec3 vSigmaX = dFdx( surfPosition );
"
,
"
vec3 vSigmaY = dFdy( surfPosition );
"
,
"
vec3 vR1 = cross( vSigmaY, surfNormal );
"
,
"
vec3 vR2 = cross( surfNormal, vSigmaX );
"
,
"
float fDet = dot( vSigmaX, vR1 );
"
,
"
vec2 vProjVscr = ( 1.0 / fDet ) * vec2( dot( vR1, viewPosition ), dot( vR2, viewPosition ) );
"
,
"
vec3 vProjVtex;
"
,
"
vProjVtex.xy = texDx * vProjVscr.x + texDy * vProjVscr.y;
"
,
"
vProjVtex.z = dot( surfNormal, viewPosition );
"
,
"
return parallaxMap( vProjVtex );
"
,
"
}
"
,
"
void main() {
"
,
"
vec2 mapUv = perturbUv( -vViewPosition, normalize( vNormal ), normalize( vViewPosition ) );
"
,
"
gl_FragColor = texture2D( map, mapUv );
"
,
"
}
"
,
].
join
(
"
\n
"
)
};
examples/textures/brick_bump.jpg
0 → 100644
浏览文件 @
b1633c0e
784.9 KB
examples/textures/brick_diffuse.jpg
0 → 100644
浏览文件 @
b1633c0e
1.0 MB
examples/webgl_materials_parallaxmap.html
0 → 100644
浏览文件 @
b1633c0e
<!DOCTYPE html>
<html
lang=
"en"
>
<head>
<title>
three.js webgl - parallax mapping
</title>
<meta
charset=
"utf-8"
>
<meta
name=
"viewport"
content=
"width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
>
<style>
body
{
background
:
#000
;
color
:
#fff
;
padding
:
0
;
margin
:
0
;
font-weight
:
bold
;
overflow
:
hidden
;
}
a
{
color
:
#ffffff
;
}
#info
{
position
:
absolute
;
top
:
0px
;
width
:
100%
;
color
:
#ffffff
;
padding
:
5px
;
font-family
:
Monospace
;
font-size
:
10px
;
text-align
:
center
;
}
#oldie
{
background
:
rgb
(
200
,
100
,
0
)
!important
;
color
:
#fff
;
}
#vt
{
display
:
none
}
#vt
,
#vt
a
{
color
:
orange
;
}
</style>
</head>
<body>
<div
id=
"info"
>
<a
href=
"http://threejs.org"
>
Three.js
</a>
parallax mapping
<br
/>
Oryginal shaders authors:
<a
href=
"http://sunandblackcat.com/tipFullView.php?topicid=28"
>
Igor Dyhta
</a>
,
<a
href=
"http://mmikkelsen3d.blogspot.sk/2012/02/parallaxpoc-mapping-and-no-tangent.html"
>
Morten S. Mikkelsen
</a><br
/>
Texture by
<a
href=
"http://agf81.deviantart.com/"
>
AGF81
</a>
</div>
<script
src=
"../build/three.min.js"
></script>
<script
src=
"js/Detector.js"
></script>
<script
src=
"js/libs/dat.gui.min.js"
></script>
<script
src=
"js/libs/stats.min.js"
></script>
<script
src=
"js/controls/OrbitControls.js"
></script>
<script
src=
"js/shaders/ParallaxShader.js"
></script>
<script>
if
(
!
Detector
.
webgl
)
Detector
.
addGetWebGLMessage
();
var
stats
;
var
camera
,
scene
,
material
,
renderer
;
var
effectController
=
{
'
mode
'
:
'
relief
'
,
'
scale
'
:
0.005
,
'
minLayers
'
:
20
,
'
maxLayers
'
:
25
,
};
init
();
initGUI
();
animate
();
function
init
()
{
var
container
=
document
.
createElement
(
'
div
'
);
document
.
body
.
appendChild
(
container
);
camera
=
new
THREE
.
PerspectiveCamera
(
45
,
window
.
innerWidth
/
window
.
innerHeight
,
0.01
,
10
);
camera
.
position
.
z
=
2
;
scene
=
new
THREE
.
Scene
();
initScene
();
renderer
=
new
THREE
.
WebGLRenderer
(
{
antialias
:
true
}
);
renderer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
container
.
appendChild
(
renderer
.
domElement
);
renderer
.
gammaInput
=
true
;
renderer
.
gammaOutput
=
true
;
var
controls
=
new
THREE
.
OrbitControls
(
camera
,
renderer
.
domElement
);
stats
=
new
Stats
();
stats
.
domElement
.
style
.
position
=
'
absolute
'
;
stats
.
domElement
.
style
.
top
=
'
0px
'
;
stats
.
domElement
.
style
.
zIndex
=
100
;
container
.
appendChild
(
stats
.
domElement
);
window
.
addEventListener
(
'
resize
'
,
onWindowResize
,
false
);
}
function
guiChanged
()
{
var
uniforms
=
material
.
uniforms
;
uniforms
[
'
parallaxScale
'
].
value
=
-
1.0
*
effectController
.
scale
;
uniforms
[
'
parallaxMinLayers
'
].
value
=
effectController
.
minLayers
;
uniforms
[
'
parallaxMaxLayers
'
].
value
=
effectController
.
maxLayers
;
material
.
defines
=
{};
material
.
defines
[
THREE
.
ParallaxShader
.
modes
[
effectController
.
mode
]]
=
''
;
material
.
needsUpdate
=
true
;
}
function
initGUI
()
{
var
gui
=
new
dat
.
GUI
();
gui
.
add
(
effectController
,
'
mode
'
,
Object
.
keys
(
THREE
.
ParallaxShader
.
modes
)
).
onChange
(
guiChanged
);
gui
.
add
(
effectController
,
'
scale
'
,
0.0
,
0.01
,
0.001
).
onChange
(
guiChanged
);
gui
.
add
(
effectController
,
'
minLayers
'
,
1.0
,
30
,
1
).
onChange
(
guiChanged
);
gui
.
add
(
effectController
,
'
maxLayers
'
,
1.0
,
30
,
1
).
onChange
(
guiChanged
);
guiChanged
();
}
function
onWindowResize
()
{
camera
.
aspect
=
window
.
innerWidth
/
window
.
innerHeight
;
camera
.
updateProjectionMatrix
();
renderer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
}
function
initScene
()
{
var
shader
=
THREE
.
ParallaxShader
;
var
uniforms
=
THREE
.
UniformsUtils
.
clone
(
shader
.
uniforms
);
var
parameters
=
{
fragmentShader
:
shader
.
fragmentShader
,
vertexShader
:
shader
.
vertexShader
,
uniforms
:
uniforms
};
material
=
new
THREE
.
ShaderMaterial
(
parameters
);
material
.
map
=
THREE
.
ImageUtils
.
loadTexture
(
'
textures/brick_diffuse.jpg
'
);
material
.
bumpMap
=
THREE
.
ImageUtils
.
loadTexture
(
'
textures/brick_bump.jpg
'
);
material
.
map
.
anisotropy
=
4
;
material
.
bumpMap
.
anisotropy
=
4
;
uniforms
[
'
map
'
].
value
=
material
.
map
;
uniforms
[
'
bumpMap
'
].
value
=
material
.
bumpMap
;
var
geometry
=
new
THREE
.
CubeGeometry
(
1.0
,
1.0
,
1.0
);
var
mesh
=
new
THREE
.
Mesh
(
geometry
,
material
);
scene
.
add
(
mesh
);
}
function
animate
()
{
requestAnimationFrame
(
animate
);
render
();
stats
.
update
();
}
function
render
()
{
renderer
.
render
(
scene
,
camera
);
}
</script>
</body>
</html>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录