Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
车家大少爷
three.js
提交
4020fd0f
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,体验更适合开发者的 AI 搜索 >>
提交
4020fd0f
编写于
8月 25, 2020
作者:
M
Mr.doob
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Examples: Added webgl2_volume_cloud.
上级
b63cbd06
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
274 addition
and
0 deletion
+274
-0
examples/files.js
examples/files.js
+1
-0
examples/screenshots/webgl2_volume_cloud.jpg
examples/screenshots/webgl2_volume_cloud.jpg
+0
-0
examples/webgl2_volume_cloud.html
examples/webgl2_volume_cloud.html
+273
-0
未找到文件。
examples/files.js
浏览文件 @
4020fd0f
...
...
@@ -317,6 +317,7 @@ var files = {
"
webgl2_materials_texture2darray
"
,
"
webgl2_materials_texture3d
"
,
"
webgl2_multisampled_renderbuffers
"
,
"
webgl2_volume_cloud
"
,
"
webgl2_volume_instancing
"
,
"
webgl2_volume_perlin
"
],
...
...
examples/screenshots/webgl2_volume_cloud.jpg
0 → 100644
浏览文件 @
4020fd0f
10.4 KB
examples/webgl2_volume_cloud.html
0 → 100644
浏览文件 @
4020fd0f
<!DOCTYPE html>
<html
lang=
"en"
>
<head>
<title>
three.js webgl2 - volume - cloud
</title>
<meta
charset=
"utf-8"
>
<meta
name=
"viewport"
content=
"width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
>
<link
type=
"text/css"
rel=
"stylesheet"
href=
"main.css"
>
</head>
<body>
<div
id=
"info"
>
<a
href=
"https://threejs.org"
target=
"_blank"
rel=
"noopener"
>
three.js
</a>
webgl2 - volume - cloud
</div>
<script
type=
"module"
>
import
*
as
THREE
from
'
../build/three.module.js
'
;
import
{
OrbitControls
}
from
'
./jsm/controls/OrbitControls.js
'
;
import
{
ImprovedNoise
}
from
'
./jsm/math/ImprovedNoise.js
'
;
import
{
GUI
}
from
'
./jsm/libs/dat.gui.module.js
'
;
import
{
WEBGL
}
from
'
./jsm/WebGL.js
'
;
if
(
WEBGL
.
isWebGL2Available
()
===
false
)
{
document
.
body
.
appendChild
(
WEBGL
.
getWebGL2ErrorMessage
()
);
}
let
renderer
,
scene
,
camera
;
let
mesh
;
init
();
animate
();
function
init
()
{
renderer
=
new
THREE
.
WebGLRenderer
();
renderer
.
setPixelRatio
(
window
.
devicePixelRatio
);
renderer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
document
.
body
.
appendChild
(
renderer
.
domElement
);
scene
=
new
THREE
.
Scene
();
camera
=
new
THREE
.
PerspectiveCamera
(
60
,
window
.
innerWidth
/
window
.
innerHeight
,
0.1
,
100
);
camera
.
position
.
set
(
0
,
0
,
1.5
);
new
OrbitControls
(
camera
,
renderer
.
domElement
);
// Sky
const
canvas
=
document
.
createElement
(
'
canvas
'
);
canvas
.
width
=
1
;
canvas
.
height
=
32
;
const
context
=
canvas
.
getContext
(
'
2d
'
);
const
gradient
=
context
.
createLinearGradient
(
0
,
0
,
0
,
32
);
gradient
.
addColorStop
(
0.0
,
'
#014a84
'
);
gradient
.
addColorStop
(
0.5
,
'
#0561a0
'
);
gradient
.
addColorStop
(
1.0
,
'
#437ab6
'
);
context
.
fillStyle
=
gradient
;
context
.
fillRect
(
0
,
0
,
1
,
32
);
const
sky
=
new
THREE
.
Mesh
(
new
THREE
.
SphereBufferGeometry
(
10
),
new
THREE
.
MeshBasicMaterial
(
{
map
:
new
THREE
.
CanvasTexture
(
canvas
),
side
:
THREE
.
BackSide
}
)
);
scene
.
add
(
sky
);
// Texture
const
size
=
128
;
const
data
=
new
Uint8Array
(
size
*
size
*
size
);
let
i
=
0
;
const
scale
=
0.05
;
const
perlin
=
new
ImprovedNoise
();
const
vector
=
new
THREE
.
Vector3
();
for
(
let
z
=
0
;
z
<
size
;
z
++
)
{
for
(
let
y
=
0
;
y
<
size
;
y
++
)
{
for
(
let
x
=
0
;
x
<
size
;
x
++
)
{
const
d
=
1.0
-
vector
.
set
(
x
,
y
,
z
).
subScalar
(
size
/
2
).
divideScalar
(
size
).
length
();
data
[
i
]
=
(
128
+
128
*
perlin
.
noise
(
x
*
scale
/
1.5
,
y
*
scale
,
z
*
scale
/
1.5
)
)
*
d
*
d
;
i
++
;
}
}
}
const
texture
=
new
THREE
.
DataTexture3D
(
data
,
size
,
size
,
size
);
texture
.
format
=
THREE
.
RedFormat
;
texture
.
minFilter
=
THREE
.
LinearFilter
;
texture
.
magFilter
=
THREE
.
LinearFilter
;
texture
.
unpackAlignment
=
1
;
// Material
const
vertexShader
=
`#version 300 es
in vec3 position;
uniform mat4 modelMatrix;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
uniform vec3 cameraPos;
out vec3 vOrigin;
out vec3 vDirection;
void main() {
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
vOrigin = vec3( inverse( modelMatrix ) * vec4( cameraPos, 1.0 ) ).xyz;
vDirection = position - vOrigin;
gl_Position = projectionMatrix * mvPosition;
}
`
;
const
fragmentShader
=
`#version 300 es
precision highp float;
precision highp sampler3D;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
in vec3 vOrigin;
in vec3 vDirection;
out vec4 color;
uniform vec3 base;
uniform sampler3D map;
uniform float threshold;
uniform float range;
uniform float opacity;
uniform float steps;
vec2 hitBox( vec3 orig, vec3 dir ) {
const vec3 box_min = vec3( - 0.5 );
const vec3 box_max = vec3( 0.5 );
vec3 inv_dir = 1.0 / dir;
vec3 tmin_tmp = ( box_min - orig ) * inv_dir;
vec3 tmax_tmp = ( box_max - orig ) * inv_dir;
vec3 tmin = min( tmin_tmp, tmax_tmp );
vec3 tmax = max( tmin_tmp, tmax_tmp );
float t0 = max( tmin.x, max( tmin.y, tmin.z ) );
float t1 = min( tmax.x, min( tmax.y, tmax.z ) );
return vec2( t0, t1 );
}
float sample1( vec3 p ) {
return texture( map, p ).r;
}
float shading( vec3 coord ) {
float step = 0.01;
return sample1( coord + vec3( - step ) ) - sample1( coord + vec3( step ) );
}
void main(){
vec3 rayDir = normalize( vDirection );
vec2 bounds = hitBox( vOrigin, rayDir );
if ( bounds.x > bounds.y ) discard;
bounds.x = max( bounds.x, 0.0 );
vec3 p = vOrigin + bounds.x * rayDir;
vec3 inc = 1.0 / abs( rayDir );
float delta = min( inc.x, min( inc.y, inc.z ) );
delta /= steps;
vec4 ac = vec4( base, 0.0 );
for ( float t = bounds.x; t < bounds.y; t += delta ) {
float d = sample1( p + 0.5 );
d = smoothstep( threshold - range, threshold + range, d ) * opacity;
float col = shading( p + 0.5 ) * 3.0 + ( ( p.x + p.y ) * 0.25 ) + 0.2;
ac.rgb += ( 1.0 - ac.a ) * d * col;
ac.a += ( 1.0 - ac.a ) * d;
if ( ac.a >= 0.95 ) break;
p += rayDir * delta;
}
color = ac;
if ( color.a == 0.0 ) discard;
}
`
;
const
geometry
=
new
THREE
.
BoxBufferGeometry
(
1
,
1
,
1
);
const
material
=
new
THREE
.
RawShaderMaterial
(
{
uniforms
:
{
base
:
{
value
:
new
THREE
.
Color
(
0x798aa0
)
},
map
:
{
value
:
texture
},
cameraPos
:
{
value
:
new
THREE
.
Vector3
()
},
threshold
:
{
value
:
0.25
},
opacity
:
{
value
:
0.25
},
range
:
{
value
:
0.1
},
steps
:
{
value
:
100
}
},
vertexShader
,
fragmentShader
,
side
:
THREE
.
BackSide
,
transparent
:
true
}
);
mesh
=
new
THREE
.
Mesh
(
geometry
,
material
);
scene
.
add
(
mesh
);
//
const
parameters
=
{
threshold
:
0.25
,
opacity
:
0.25
,
range
:
0.1
,
steps
:
100
};
function
update
()
{
material
.
uniforms
.
threshold
.
value
=
parameters
.
threshold
;
material
.
uniforms
.
opacity
.
value
=
parameters
.
opacity
;
material
.
uniforms
.
range
.
value
=
parameters
.
range
;
material
.
uniforms
.
steps
.
value
=
parameters
.
steps
;
}
const
gui
=
new
GUI
();
gui
.
add
(
parameters
,
'
threshold
'
,
0
,
1
,
0.01
).
onChange
(
update
);
gui
.
add
(
parameters
,
'
opacity
'
,
0
,
1
,
0.01
).
onChange
(
update
);
gui
.
add
(
parameters
,
'
range
'
,
0
,
1
,
0.01
).
onChange
(
update
);
gui
.
add
(
parameters
,
'
steps
'
,
0
,
200
,
1
).
onChange
(
update
);
window
.
addEventListener
(
'
resize
'
,
onWindowResize
,
false
);
}
function
onWindowResize
()
{
camera
.
aspect
=
window
.
innerWidth
/
window
.
innerHeight
;
camera
.
updateProjectionMatrix
();
renderer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
}
function
animate
()
{
requestAnimationFrame
(
animate
);
mesh
.
material
.
uniforms
.
cameraPos
.
value
.
copy
(
camera
.
position
);
mesh
.
rotation
.
y
=
-
performance
.
now
()
/
7500
;
renderer
.
render
(
scene
,
camera
);
}
</script>
</body>
</html>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录