Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Ablesons
three.js
提交
757bcd00
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,体验更适合开发者的 AI 搜索 >>
未验证
提交
757bcd00
编写于
10月 29, 2019
作者:
M
Mr.doob
提交者:
GitHub
10月 29, 2019
浏览文件
操作
浏览文件
下载
差异文件
Merge pull request #17790 from nipmarsh/lightprobe_cubecamera
Compute lightprobe from a CubeRenderTarget
上级
42236463
c2e53b98
变更
5
隐藏空白更改
内联
并排
Showing
5 changed file
with
375 addition
and
6 deletion
+375
-6
examples/files.js
examples/files.js
+1
-0
examples/js/lights/LightProbeGenerator.js
examples/js/lights/LightProbeGenerator.js
+123
-1
examples/jsm/lights/LightProbeGenerator.d.ts
examples/jsm/lights/LightProbeGenerator.d.ts
+6
-3
examples/jsm/lights/LightProbeGenerator.js
examples/jsm/lights/LightProbeGenerator.js
+126
-2
examples/webgl_lightprobe_cubecamera.html
examples/webgl_lightprobe_cubecamera.html
+119
-0
未找到文件。
examples/files.js
浏览文件 @
757bcd00
...
...
@@ -61,6 +61,7 @@ var files = {
"
webgl_layers
"
,
"
webgl_lensflares
"
,
"
webgl_lightprobe
"
,
"
webgl_lightprobe_cubecamera
"
,
"
webgl_lights_hemisphere
"
,
"
webgl_lights_physical
"
,
"
webgl_lights_pointlights
"
,
...
...
examples/js/lights/LightProbeGenerator.js
浏览文件 @
757bcd00
...
...
@@ -50,7 +50,7 @@ THREE.LightProbeGenerator = {
color
.
setRGB
(
data
[
i
]
/
255
,
data
[
i
+
1
]
/
255
,
data
[
i
+
2
]
/
255
);
// convert to linear color space
co
lor
.
copySRGBToLinear
(
color
);
co
nvertColorToLinear
(
color
,
cubeTexture
.
encoding
);
// pixel coordinate on unit cube
...
...
@@ -116,6 +116,128 @@ THREE.LightProbeGenerator = {
return
new
THREE
.
LightProbe
(
sh
);
},
fromRenderTargetCube
:
function
(
renderer
,
renderTargetCube
)
{
// The renderTarget must be set to RGBA in order to make readRenderTargetPixels works
var
norm
,
lengthSq
,
weight
,
totalWeight
=
0
;
var
coord
=
new
THREE
.
Vector3
();
var
dir
=
new
THREE
.
Vector3
();
var
color
=
new
THREE
.
Color
();
var
shBasis
=
[
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
];
var
sh
=
new
THREE
.
SphericalHarmonics3
();
var
shCoefficients
=
sh
.
coefficients
;
for
(
var
faceIndex
=
0
;
faceIndex
<
6
;
faceIndex
++
)
{
var
imageWidth
=
renderTargetCube
.
width
;
// assumed to be square
var
data
=
new
Uint8Array
(
imageWidth
*
imageWidth
*
4
);
renderer
.
readRenderTargetPixels
(
renderTargetCube
,
0
,
0
,
imageWidth
,
imageWidth
,
data
,
faceIndex
);
var
pixelSize
=
2
/
imageWidth
;
for
(
var
i
=
0
,
il
=
data
.
length
;
i
<
il
;
i
+=
4
)
{
// RGBA assumed
// pixel color
color
.
setRGB
(
data
[
i
]
/
255
,
data
[
i
+
1
]
/
255
,
data
[
i
+
2
]
/
255
);
// convert to linear color space
convertColorToLinear
(
color
,
renderTargetCube
.
texture
.
encoding
);
// pixel coordinate on unit cube
var
pixelIndex
=
i
/
4
;
var
col
=
-
1
+
(
pixelIndex
%
imageWidth
+
0.5
)
*
pixelSize
;
var
row
=
1
-
(
Math
.
floor
(
pixelIndex
/
imageWidth
)
+
0.5
)
*
pixelSize
;
switch
(
faceIndex
)
{
case
0
:
coord
.
set
(
1
,
row
,
-
col
);
break
;
case
1
:
coord
.
set
(
-
1
,
row
,
col
);
break
;
case
2
:
coord
.
set
(
col
,
1
,
-
row
);
break
;
case
3
:
coord
.
set
(
col
,
-
1
,
row
);
break
;
case
4
:
coord
.
set
(
col
,
row
,
1
);
break
;
case
5
:
coord
.
set
(
-
col
,
row
,
-
1
);
break
;
}
// weight assigned to this pixel
lengthSq
=
coord
.
lengthSq
();
weight
=
4
/
(
Math
.
sqrt
(
lengthSq
)
*
lengthSq
);
totalWeight
+=
weight
;
// direction vector to this pixel
dir
.
copy
(
coord
).
normalize
();
// evaluate SH basis functions in direction dir
THREE
.
SphericalHarmonics3
.
getBasisAt
(
dir
,
shBasis
);
// accummuulate
for
(
var
j
=
0
;
j
<
9
;
j
++
)
{
shCoefficients
[
j
].
x
+=
shBasis
[
j
]
*
color
.
r
*
weight
;
shCoefficients
[
j
].
y
+=
shBasis
[
j
]
*
color
.
g
*
weight
;
shCoefficients
[
j
].
z
+=
shBasis
[
j
]
*
color
.
b
*
weight
;
}
}
}
// normalize
norm
=
(
4
*
Math
.
PI
)
/
totalWeight
;
for
(
var
j
=
0
;
j
<
9
;
j
++
)
{
shCoefficients
[
j
].
x
*=
norm
;
shCoefficients
[
j
].
y
*=
norm
;
shCoefficients
[
j
].
z
*=
norm
;
}
return
new
THREE
.
LightProbe
(
sh
);
}
};
var
convertColorToLinear
=
function
(
color
,
encoding
)
{
switch
(
encoding
)
{
case
THREE
.
sRGBEncoding
:
color
.
convertSRGBToLinear
();
break
;
case
THREE
.
LinearEncoding
:
break
;
default
:
console
.
warn
(
'
WARNING: LightProbeGenerator convertColorToLinear() encountered an unsupported encoding.
'
);
break
;
}
return
color
;
};
examples/jsm/lights/LightProbeGenerator.d.ts
浏览文件 @
757bcd00
import
{
CubeTexture
,
LightProbe
CubeTexture
,
LightProbe
,
WebGLRenderer
,
WebGLRenderTargetCube
,
}
from
'
../../../src/Three
'
;
export
namespace
LightProbeGenerator
{
export
function
fromCubeTexture
(
cubeTexture
:
CubeTexture
):
LightProbe
;
export
function
fromCubeTexture
(
cubeTexture
:
CubeTexture
):
LightProbe
;
export
function
fromRenderTargetCube
(
renderer
:
WebGLRenderer
,
renderTargetCube
:
WebGLRenderTargetCube
):
LightProbe
;
}
examples/jsm/lights/LightProbeGenerator.js
浏览文件 @
757bcd00
...
...
@@ -5,8 +5,10 @@
import
{
Color
,
LightProbe
,
LinearEncoding
,
SphericalHarmonics3
,
Vector3
Vector3
,
sRGBEncoding
}
from
"
../../../build/three.module.js
"
;
var
LightProbeGenerator
=
{
...
...
@@ -57,7 +59,7 @@ var LightProbeGenerator = {
color
.
setRGB
(
data
[
i
]
/
255
,
data
[
i
+
1
]
/
255
,
data
[
i
+
2
]
/
255
);
// convert to linear color space
co
lor
.
copySRGBToLinear
(
color
);
co
nvertColorToLinear
(
color
,
cubeTexture
.
encoding
);
// pixel coordinate on unit cube
...
...
@@ -123,8 +125,130 @@ var LightProbeGenerator = {
return
new
LightProbe
(
sh
);
},
fromRenderTargetCube
:
function
(
renderer
,
renderTargetCube
)
{
// The renderTarget must be set to RGBA in order to make readRenderTargetPixels works
var
norm
,
lengthSq
,
weight
,
totalWeight
=
0
;
var
coord
=
new
Vector3
();
var
dir
=
new
Vector3
();
var
color
=
new
Color
();
var
shBasis
=
[
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
];
var
sh
=
new
SphericalHarmonics3
();
var
shCoefficients
=
sh
.
coefficients
;
for
(
var
faceIndex
=
0
;
faceIndex
<
6
;
faceIndex
++
)
{
var
imageWidth
=
renderTargetCube
.
width
;
// assumed to be square
var
data
=
new
Uint8Array
(
imageWidth
*
imageWidth
*
4
);
renderer
.
readRenderTargetPixels
(
renderTargetCube
,
0
,
0
,
imageWidth
,
imageWidth
,
data
,
faceIndex
);
var
pixelSize
=
2
/
imageWidth
;
for
(
var
i
=
0
,
il
=
data
.
length
;
i
<
il
;
i
+=
4
)
{
// RGBA assumed
// pixel color
color
.
setRGB
(
data
[
i
]
/
255
,
data
[
i
+
1
]
/
255
,
data
[
i
+
2
]
/
255
);
// convert to linear color space
convertColorToLinear
(
color
,
renderTargetCube
.
texture
.
encoding
);
// pixel coordinate on unit cube
var
pixelIndex
=
i
/
4
;
var
col
=
-
1
+
(
pixelIndex
%
imageWidth
+
0.5
)
*
pixelSize
;
var
row
=
1
-
(
Math
.
floor
(
pixelIndex
/
imageWidth
)
+
0.5
)
*
pixelSize
;
switch
(
faceIndex
)
{
case
0
:
coord
.
set
(
1
,
row
,
-
col
);
break
;
case
1
:
coord
.
set
(
-
1
,
row
,
col
);
break
;
case
2
:
coord
.
set
(
col
,
1
,
-
row
);
break
;
case
3
:
coord
.
set
(
col
,
-
1
,
row
);
break
;
case
4
:
coord
.
set
(
col
,
row
,
1
);
break
;
case
5
:
coord
.
set
(
-
col
,
row
,
-
1
);
break
;
}
// weight assigned to this pixel
lengthSq
=
coord
.
lengthSq
();
weight
=
4
/
(
Math
.
sqrt
(
lengthSq
)
*
lengthSq
);
totalWeight
+=
weight
;
// direction vector to this pixel
dir
.
copy
(
coord
).
normalize
();
// evaluate SH basis functions in direction dir
SphericalHarmonics3
.
getBasisAt
(
dir
,
shBasis
);
// accummuulate
for
(
var
j
=
0
;
j
<
9
;
j
++
)
{
shCoefficients
[
j
].
x
+=
shBasis
[
j
]
*
color
.
r
*
weight
;
shCoefficients
[
j
].
y
+=
shBasis
[
j
]
*
color
.
g
*
weight
;
shCoefficients
[
j
].
z
+=
shBasis
[
j
]
*
color
.
b
*
weight
;
}
}
}
// normalize
norm
=
(
4
*
Math
.
PI
)
/
totalWeight
;
for
(
var
j
=
0
;
j
<
9
;
j
++
)
{
shCoefficients
[
j
].
x
*=
norm
;
shCoefficients
[
j
].
y
*=
norm
;
shCoefficients
[
j
].
z
*=
norm
;
}
return
new
LightProbe
(
sh
);
}
};
var
convertColorToLinear
=
function
(
color
,
encoding
)
{
switch
(
encoding
)
{
case
sRGBEncoding
:
color
.
convertSRGBToLinear
();
break
;
case
LinearEncoding
:
break
;
default
:
console
.
warn
(
'
WARNING: LightProbeGenerator convertColorToLinear() encountered an unsupported encoding.
'
);
break
;
}
return
color
;
};
export
{
LightProbeGenerator
};
examples/webgl_lightprobe_cubecamera.html
0 → 100644
浏览文件 @
757bcd00
<!DOCTYPE html>
<html
lang=
"en"
>
<head>
<title>
three.js webgl - light probe from cubeCamera
</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=
"http://threejs.org"
target=
"_blank"
rel=
"noopener"
>
three.js
</a>
webgl - light probe from cubeCamera
</div>
<script
type=
"module"
>
import
*
as
THREE
from
'
../build/three.module.js
'
;
import
{
GUI
}
from
'
./jsm/libs/dat.gui.module.js
'
;
import
{
OrbitControls
}
from
'
./jsm/controls/OrbitControls.js
'
;
import
{
LightProbeGenerator
}
from
'
./jsm/lights/LightProbeGenerator.js
'
;
var
renderer
,
scene
,
camera
,
cubeCamera
;
var
lightProbe
;
init
();
function
init
()
{
// renderer
renderer
=
new
THREE
.
WebGLRenderer
(
{
antialias
:
true
}
);
renderer
.
setPixelRatio
(
window
.
devicePixelRatio
);
renderer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
document
.
body
.
appendChild
(
renderer
.
domElement
);
// gamma
renderer
.
gammaOutput
=
true
;
renderer
.
gammaFactor
=
2.2
;
// approximate sRGB
// scene
scene
=
new
THREE
.
Scene
();
// camera
camera
=
new
THREE
.
PerspectiveCamera
(
40
,
window
.
innerWidth
/
window
.
innerHeight
,
1
,
1000
);
camera
.
position
.
set
(
0
,
0
,
30
);
cubeCamera
=
new
THREE
.
CubeCamera
(
1
,
1000
,
256
,
{
format
:
THREE
.
RGBAFormat
,
magFilter
:
THREE
.
LinearFilter
,
minFilter
:
THREE
.
LinearFilter
}
);
//Since gamma is applied during rendering, the cubeCamera renderTarget texture encoding must be sRGBEncoding
cubeCamera
.
renderTarget
.
texture
.
encoding
=
THREE
.
sRGBEncoding
;
// controls
var
controls
=
new
OrbitControls
(
camera
,
renderer
.
domElement
);
controls
.
addEventListener
(
'
change
'
,
render
);
controls
.
minDistance
=
10
;
controls
.
maxDistance
=
50
;
controls
.
enablePan
=
false
;
// probe
lightProbe
=
new
THREE
.
LightProbe
();
scene
.
add
(
lightProbe
);
// envmap
var
genCubeUrls
=
function
(
prefix
,
postfix
)
{
return
[
prefix
+
'
px
'
+
postfix
,
prefix
+
'
nx
'
+
postfix
,
prefix
+
'
py
'
+
postfix
,
prefix
+
'
ny
'
+
postfix
,
prefix
+
'
pz
'
+
postfix
,
prefix
+
'
nz
'
+
postfix
];
};
var
urls
=
genCubeUrls
(
'
textures/cube/pisa/
'
,
'
.png
'
);
new
THREE
.
CubeTextureLoader
().
load
(
urls
,
function
(
cubeTexture
)
{
cubeTexture
.
encoding
=
THREE
.
sRGBEncoding
;
scene
.
background
=
cubeTexture
;
cubeCamera
.
update
(
renderer
,
scene
);
lightProbe
.
copy
(
LightProbeGenerator
.
fromRenderTargetCube
(
renderer
,
cubeCamera
.
renderTarget
)
);
scene
.
add
(
new
THREE
.
LightProbeHelper
(
lightProbe
,
5
)
);
render
();
}
);
// listener
window
.
addEventListener
(
'
resize
'
,
onWindowResize
,
false
);
}
function
onWindowResize
()
{
renderer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
camera
.
aspect
=
window
.
innerWidth
/
window
.
innerHeight
;
camera
.
updateProjectionMatrix
();
render
();
}
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.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录