Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
车家大少爷
three.js
提交
3277fefb
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 搜索 >>
提交
3277fefb
编写于
4月 22, 2019
作者:
F
Fernando Serrano
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Initial working implementation
上级
7e0a78be
变更
6
隐藏空白更改
内联
并排
Showing
6 changed file
with
564 addition
and
28 deletion
+564
-28
examples/files.js
examples/files.js
+1
-0
examples/webvr_ballshooter_multiview.html
examples/webvr_ballshooter_multiview.html
+277
-0
src/renderers/WebGLRenderer.js
src/renderers/WebGLRenderer.js
+126
-21
src/renderers/webgl/WebGLCapabilities.js
src/renderers/webgl/WebGLCapabilities.js
+10
-1
src/renderers/webgl/WebGLMultiview.js
src/renderers/webgl/WebGLMultiview.js
+105
-0
src/renderers/webgl/WebGLProgram.js
src/renderers/webgl/WebGLProgram.js
+45
-6
未找到文件。
examples/files.js
浏览文件 @
3277fefb
...
...
@@ -335,6 +335,7 @@ var files = {
],
"
webvr
"
:
[
"
webvr_ballshooter
"
,
"
webvr_ballshooter_multiview
"
,
"
webvr_cubes
"
,
"
webvr_dragging
"
,
"
webvr_lorenzattractor
"
,
...
...
examples/webvr_ballshooter_multiview.html
0 → 100644
浏览文件 @
3277fefb
<!DOCTYPE html>
<html
lang=
"en"
>
<head>
<title>
three.js webvr - ball shooter
</title>
<meta
charset=
"utf-8"
>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0, user-scalable=no"
>
<style>
body
{
font-family
:
Monospace
;
background-color
:
#101010
;
color
:
#fff
;
margin
:
0px
;
overflow
:
hidden
;
}
a
{
color
:
#48f
;
}
</style>
</head>
<body>
<script
src=
"../build/three.js"
></script>
<script
src=
"js/vr/WebVR.js"
></script>
<script
src=
"js/geometries/BoxLineGeometry.js"
></script>
<script>
var
container
;
var
ms
;
var
camera
,
scene
,
renderer
;
var
controller1
,
controller2
;
var
room
;
var
count
=
0
;
var
radius
=
0.08
;
var
normal
=
new
THREE
.
Vector3
();
var
relativeVelocity
=
new
THREE
.
Vector3
();
var
clock
=
new
THREE
.
Clock
();
init
();
animate
();
function
init
()
{
const
urlParams
=
new
URLSearchParams
(
window
.
location
.
search
);
const
multiview
=
urlParams
.
has
(
'
enableMultiview
'
);
container
=
document
.
createElement
(
'
div
'
);
document
.
body
.
appendChild
(
container
);
var
info
=
document
.
createElement
(
'
div
'
);
info
.
style
.
position
=
'
absolute
'
;
info
.
style
.
top
=
'
10px
'
;
info
.
style
.
width
=
'
100%
'
;
info
.
style
.
textAlign
=
'
center
'
;
// @todo Change enabled for requested and check renderer.vr.multiview
info
.
innerHTML
=
'
OVR_multiview2 demo -
'
+
(
multiview
?
'
<b style="color:#3f3">multiview enabled</b>
'
:
'
<b style="color:#f33">multiview not enabled</b>
'
)
+
` <a href="
${
multiview
?
'
?
'
:
'
?enableMultiview
'
}
">toggle</a>`
;
container
.
appendChild
(
info
);
ms
=
document
.
createElement
(
'
div
'
);
ms
.
innerHTML
=
''
;
info
.
appendChild
(
ms
);
scene
=
new
THREE
.
Scene
();
scene
.
background
=
new
THREE
.
Color
(
0x505050
);
camera
=
new
THREE
.
PerspectiveCamera
(
70
,
window
.
innerWidth
/
window
.
innerHeight
,
0.1
,
10
);
room
=
new
THREE
.
LineSegments
(
new
THREE
.
BoxLineGeometry
(
6
,
6
,
6
,
10
,
10
,
10
),
new
THREE
.
LineBasicMaterial
(
{
color
:
0x808080
}
)
);
room
.
geometry
.
translate
(
0
,
3
,
0
);
scene
.
add
(
room
);
var
light
=
new
THREE
.
HemisphereLight
(
0xffffff
,
0x444444
);
light
.
position
.
set
(
1
,
1
,
1
);
scene
.
add
(
light
);
var
geometry
=
new
THREE
.
IcosahedronBufferGeometry
(
radius
,
2
);
var
numObjects
=
urlParams
.
get
(
'
num
'
)
||
200
;
for
(
var
i
=
0
;
i
<
numObjects
;
i
++
)
{
var
object
=
new
THREE
.
Mesh
(
geometry
,
new
THREE
.
MeshLambertMaterial
(
{
color
:
Math
.
random
()
*
0xffffff
}
)
);
object
.
position
.
x
=
Math
.
random
()
*
4
-
2
;
object
.
position
.
y
=
Math
.
random
()
*
4
;
object
.
position
.
z
=
Math
.
random
()
*
4
-
2
;
object
.
userData
.
velocity
=
new
THREE
.
Vector3
();
object
.
userData
.
velocity
.
x
=
Math
.
random
()
*
0.01
-
0.005
;
object
.
userData
.
velocity
.
y
=
Math
.
random
()
*
0.01
-
0.005
;
object
.
userData
.
velocity
.
z
=
Math
.
random
()
*
0.01
-
0.005
;
room
.
add
(
object
);
}
//
var
canvas
=
document
.
createElement
(
'
canvas
'
);
var
context
=
canvas
.
getContext
(
'
webgl2
'
,
{
antialias
:
false
}
);
renderer
=
new
THREE
.
WebGLRenderer
(
{
canvas
:
canvas
,
context
:
context
,
multiview
:
multiview
}
);
renderer
.
setPixelRatio
(
window
.
devicePixelRatio
);
renderer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
renderer
.
vr
.
enabled
=
true
;
container
.
appendChild
(
renderer
.
domElement
);
//
document
.
body
.
appendChild
(
WEBVR
.
createButton
(
renderer
)
);
// controllers
function
onSelectStart
()
{
this
.
userData
.
isSelecting
=
true
;
}
function
onSelectEnd
()
{
this
.
userData
.
isSelecting
=
false
;
}
controller1
=
renderer
.
vr
.
getController
(
0
);
controller1
.
addEventListener
(
'
selectstart
'
,
onSelectStart
);
controller1
.
addEventListener
(
'
selectend
'
,
onSelectEnd
);
scene
.
add
(
controller1
);
controller2
=
renderer
.
vr
.
getController
(
1
);
controller2
.
addEventListener
(
'
selectstart
'
,
onSelectStart
);
controller2
.
addEventListener
(
'
selectend
'
,
onSelectEnd
);
scene
.
add
(
controller2
);
// helpers
var
geometry
=
new
THREE
.
BufferGeometry
();
geometry
.
addAttribute
(
'
position
'
,
new
THREE
.
Float32BufferAttribute
(
[
0
,
0
,
0
,
0
,
0
,
-
1
],
3
)
);
geometry
.
addAttribute
(
'
color
'
,
new
THREE
.
Float32BufferAttribute
(
[
0.5
,
0.5
,
0.5
,
0
,
0
,
0
],
3
)
);
var
material
=
new
THREE
.
LineBasicMaterial
(
{
vertexColors
:
true
,
blending
:
THREE
.
AdditiveBlending
}
);
controller1
.
add
(
new
THREE
.
Line
(
geometry
,
material
)
);
controller2
.
add
(
new
THREE
.
Line
(
geometry
,
material
)
);
//
window
.
addEventListener
(
'
resize
'
,
onWindowResize
,
false
);
}
function
onWindowResize
()
{
camera
.
aspect
=
window
.
innerWidth
/
window
.
innerHeight
;
camera
.
updateProjectionMatrix
();
renderer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
}
function
handleController
(
controller
)
{
if
(
controller
.
userData
.
isSelecting
)
{
var
object
=
room
.
children
[
count
++
];
object
.
position
.
copy
(
controller
.
position
);
object
.
userData
.
velocity
.
x
=
(
Math
.
random
()
-
0.5
)
*
3
;
object
.
userData
.
velocity
.
y
=
(
Math
.
random
()
-
0.5
)
*
3
;
object
.
userData
.
velocity
.
z
=
(
Math
.
random
()
-
9
);
object
.
userData
.
velocity
.
applyQuaternion
(
controller
.
quaternion
);
if
(
count
===
room
.
children
.
length
)
count
=
0
;
}
}
//
function
animate
()
{
renderer
.
setAnimationLoop
(
render
);
}
function
render
()
{
handleController
(
controller1
);
handleController
(
controller2
);
//
var
delta
=
clock
.
getDelta
()
*
0.8
;
// slow down simulation
var
range
=
3
-
radius
;
for
(
var
i
=
0
;
i
<
room
.
children
.
length
;
i
++
)
{
var
object
=
room
.
children
[
i
];
object
.
position
.
x
+=
object
.
userData
.
velocity
.
x
*
delta
;
object
.
position
.
y
+=
object
.
userData
.
velocity
.
y
*
delta
;
object
.
position
.
z
+=
object
.
userData
.
velocity
.
z
*
delta
;
// keep objects inside room
if
(
object
.
position
.
x
<
-
range
||
object
.
position
.
x
>
range
)
{
object
.
position
.
x
=
THREE
.
Math
.
clamp
(
object
.
position
.
x
,
-
range
,
range
);
object
.
userData
.
velocity
.
x
=
-
object
.
userData
.
velocity
.
x
;
}
if
(
object
.
position
.
y
<
radius
||
object
.
position
.
y
>
6
)
{
object
.
position
.
y
=
Math
.
max
(
object
.
position
.
y
,
radius
);
object
.
userData
.
velocity
.
x
*=
0.98
;
object
.
userData
.
velocity
.
y
=
-
object
.
userData
.
velocity
.
y
*
0.8
;
object
.
userData
.
velocity
.
z
*=
0.98
;
}
if
(
object
.
position
.
z
<
-
range
||
object
.
position
.
z
>
range
)
{
object
.
position
.
z
=
THREE
.
Math
.
clamp
(
object
.
position
.
z
,
-
range
,
range
);
object
.
userData
.
velocity
.
z
=
-
object
.
userData
.
velocity
.
z
;
}
for
(
var
j
=
i
+
1
;
j
<
room
.
children
.
length
;
j
++
)
{
var
object2
=
room
.
children
[
j
];
normal
.
copy
(
object
.
position
).
sub
(
object2
.
position
);
var
distance
=
normal
.
length
();
if
(
distance
<
2
*
radius
)
{
normal
.
multiplyScalar
(
0.5
*
distance
-
radius
);
object
.
position
.
sub
(
normal
);
object2
.
position
.
add
(
normal
);
normal
.
normalize
();
relativeVelocity
.
copy
(
object
.
userData
.
velocity
).
sub
(
object2
.
userData
.
velocity
);
normal
=
normal
.
multiplyScalar
(
relativeVelocity
.
dot
(
normal
)
);
object
.
userData
.
velocity
.
sub
(
normal
);
object2
.
userData
.
velocity
.
add
(
normal
);
}
}
object
.
userData
.
velocity
.
y
-=
9.8
*
delta
;
}
var
ts
=
performance
.
now
();
renderer
.
render
(
scene
,
camera
);
ms
.
innerHTML
=
'
renderer.render time:
'
+
(
performance
.
now
()
-
ts
).
toFixed
(
2
)
+
'
ms
'
;
}
</script>
</body>
</html>
src/renderers/WebGLRenderer.js
浏览文件 @
3277fefb
...
...
@@ -40,6 +40,7 @@ import { WebGLState } from './webgl/WebGLState.js';
import
{
WebGLTextures
}
from
'
./webgl/WebGLTextures.js
'
;
import
{
WebGLUniforms
}
from
'
./webgl/WebGLUniforms.js
'
;
import
{
WebGLUtils
}
from
'
./webgl/WebGLUtils.js
'
;
import
{
WebGLMultiview
}
from
'
./webgl/WebGLMultiview.js
'
;
import
{
WebVRManager
}
from
'
./webvr/WebVRManager.js
'
;
import
{
WebXRManager
}
from
'
./webvr/WebXRManager.js
'
;
...
...
@@ -58,6 +59,8 @@ function WebGLRenderer( parameters ) {
var
_canvas
=
parameters
.
canvas
!==
undefined
?
parameters
.
canvas
:
document
.
createElementNS
(
'
http://www.w3.org/1999/xhtml
'
,
'
canvas
'
),
_context
=
parameters
.
context
!==
undefined
?
parameters
.
context
:
null
,
_multiview
=
parameters
.
multiview
!==
undefined
?
parameters
.
multiview
:
false
,
_alpha
=
parameters
.
alpha
!==
undefined
?
parameters
.
alpha
:
false
,
_depth
=
parameters
.
depth
!==
undefined
?
parameters
.
depth
:
true
,
_stencil
=
parameters
.
stencil
!==
undefined
?
parameters
.
stencil
:
true
,
...
...
@@ -312,6 +315,20 @@ function WebGLRenderer( parameters ) {
this
.
vr
=
vr
;
if
(
_multiview
&&
!
capabilities
.
multiview
)
{
console
.
warn
(
'
WebGLRenderer: Multiview requested but not supported by the browser
'
);
this
.
vr
.
multiview
=
false
;
}
else
if
(
_multiview
!==
false
&&
capabilities
.
multiview
)
{
console
.
info
(
'
WebGLRenderer: Multiview enabled
'
);
this
.
vr
.
multiview
=
true
;
}
// shadow map
var
shadowMap
=
new
WebGLShadowMap
(
_this
,
objects
,
capabilities
.
maxTextureSize
);
...
...
@@ -1360,44 +1377,95 @@ function WebGLRenderer( parameters ) {
}
var
multiviewObject
=
new
WebGLMultiview
(
_gl
,
_canvas
,
extensions
);
function
renderObjects
(
renderList
,
scene
,
camera
,
overrideMaterial
)
{
for
(
var
i
=
0
,
l
=
renderList
.
length
;
i
<
l
;
i
++
)
{
if
(
vr
.
multiview
)
{
multiviewObject
.
bindMultiviewFrameBuffer
();
_gl
.
disable
(
_gl
.
SCISSOR_TEST
);
var
width
=
_canvas
.
width
;
var
height
=
_canvas
.
height
;
var
halfWidth
=
Math
.
floor
(
width
*
0.5
);
_gl
.
viewport
(
0
,
0
,
halfWidth
,
height
);
renderer
.
setViewport
(
0
,
0
,
halfWidth
,
height
);
_gl
.
clear
(
_gl
.
COLOR_BUFFER_BIT
|
_gl
.
DEPTH_BUFFER_BIT
|
_gl
.
STENCIL_BUFFER_BIT
);
for
(
var
i
=
0
,
l
=
renderList
.
length
;
i
<
l
;
i
++
)
{
var
renderItem
=
renderList
[
i
];
var
renderItem
=
renderList
[
i
];
var
object
=
renderItem
.
object
;
var
geometry
=
renderItem
.
geometry
;
var
material
=
overrideMaterial
===
undefined
?
renderItem
.
material
:
overrideMaterial
;
var
group
=
renderItem
.
group
;
var
object
=
renderItem
.
object
;
var
geometry
=
renderItem
.
geometry
;
var
material
=
overrideMaterial
===
undefined
?
renderItem
.
material
:
overrideMaterial
;
var
group
=
renderItem
.
group
;
if
(
camera
.
isArrayCamera
)
{
renderObject
(
object
,
scene
,
camera
,
geometry
,
material
,
group
);
_currentArrayCamera
=
camera
;
}
multiviewObject
.
unbindMultiviewFrameBuffer
();
}
else
{
for
(
var
i
=
0
,
l
=
renderList
.
length
;
i
<
l
;
i
++
)
{
var
renderItem
=
renderList
[
i
];
var
object
=
renderItem
.
object
;
var
geometry
=
renderItem
.
geometry
;
var
material
=
overrideMaterial
===
undefined
?
renderItem
.
material
:
overrideMaterial
;
var
group
=
renderItem
.
group
;
if
(
camera
.
isArrayCamera
)
{
var
cameras
=
camera
.
cameras
;
_currentArrayCamera
=
camera
;
for
(
var
j
=
0
,
jl
=
cameras
.
length
;
j
<
jl
;
j
++
)
{
var
cameras
=
camera
.
cameras
;
var
camera2
=
cameras
[
j
];
for
(
var
j
=
0
,
jl
=
cameras
.
length
;
j
<
jl
;
j
++
)
{
if
(
object
.
layers
.
test
(
camera2
.
layers
)
)
{
var
camera2
=
cameras
[
j
];
state
.
viewport
(
_currentViewport
.
copy
(
camera2
.
viewport
)
);
if
(
object
.
layers
.
test
(
camera2
.
layers
)
)
{
if
(
'
viewport
'
in
camera2
)
{
// XR
state
.
viewport
(
_currentViewport
.
copy
(
camera2
.
viewport
)
);
}
else
{
var
bounds
=
camera2
.
bounds
;
var
x
=
bounds
.
x
*
_width
;
var
y
=
bounds
.
y
*
_height
;
var
width
=
bounds
.
z
*
_width
;
var
height
=
bounds
.
w
*
_height
;
state
.
viewport
(
_currentViewport
.
set
(
x
,
y
,
width
,
height
).
multiplyScalar
(
_pixelRatio
)
);
}
currentRenderState
.
setupLights
(
camera2
);
currentRenderState
.
setupLights
(
camera2
);
renderObject
(
object
,
scene
,
camera2
,
geometry
,
material
,
group
);
renderObject
(
object
,
scene
,
camera2
,
geometry
,
material
,
group
);
}
}
}
}
else
{
}
else
{
_currentArrayCamera
=
null
;
_currentArrayCamera
=
null
;
renderObject
(
object
,
scene
,
camera
,
geometry
,
material
,
group
)
;
renderObject
(
object
,
scene
,
camera
,
geometry
,
material
,
group
);
}
}
...
...
@@ -1682,7 +1750,24 @@ function WebGLRenderer( parameters ) {
if
(
refreshProgram
||
_currentCamera
!==
camera
)
{
p_uniforms
.
setValue
(
_gl
,
'
projectionMatrix
'
,
camera
.
projectionMatrix
);
if
(
vr
.
multiview
)
{
if
(
false
&&
vr
.
isPresenting
()
)
{
// @todo Obviously remove the map :)
p_uniforms
.
setValue
(
_gl
,
'
projectionMatrices
'
,
camera
.
cameras
.
map
(
c
=>
c
.
projectionMatrix
)
);
}
else
{
p_uniforms
.
setValue
(
_gl
,
'
projectionMatrices
'
,
[
camera
.
projectionMatrix
,
camera
.
projectionMatrix
]
);
}
}
else
{
p_uniforms
.
setValue
(
_gl
,
'
projectionMatrix
'
,
camera
.
projectionMatrix
);
}
if
(
capabilities
.
logarithmicDepthBuffer
)
{
...
...
@@ -1730,7 +1815,27 @@ function WebGLRenderer( parameters ) {
material
.
isShaderMaterial
||
material
.
skinning
)
{
p_uniforms
.
setValue
(
_gl
,
'
viewMatrix
'
,
camera
.
matrixWorldInverse
);
if
(
vr
.
multiview
)
{
if
(
vr
.
isPresenting
()
)
{
// @todo Obviously remove the map :)
p_uniforms
.
setValue
(
_gl
,
'
viewMatrix
'
,
camera
.
cameras
.
map
(
c
=>
c
.
matrixWorldInverse
)
);
}
else
{
var
newMat
=
camera
.
matrixWorldInverse
.
clone
();
var
newMat
=
new
Matrix4
();
p_uniforms
.
setValue
(
_gl
,
'
viewMatrices
'
,
[
camera
.
matrixWorldInverse
,
newMat
]
);
}
}
else
{
p_uniforms
.
setValue
(
_gl
,
'
viewMatrix
'
,
camera
.
matrixWorldInverse
);
}
}
...
...
src/renderers/webgl/WebGLCapabilities.js
浏览文件 @
3277fefb
...
...
@@ -86,6 +86,13 @@ function WebGLCapabilities( gl, extensions, parameters ) {
var
maxSamples
=
isWebGL2
?
gl
.
getParameter
(
gl
.
MAX_SAMPLES
)
:
0
;
var
multiview
=
isWebGL2
&&
(
!!
extensions
.
get
(
'
WEBGL_multiview
'
)
||
!!
extensions
.
get
(
'
OVR_multiview
'
)
||
!!
extensions
.
get
(
'
OVR_multiview2
'
)
);
/*
var ovrMultiview2 = extensions.get( 'OVR_multiview2' );
if (ovrMultiview2) {
var num = gl.getParameter(ovrMultiview2.MAX_VIEWS_OVR);
}
*/
return
{
isWebGL2
:
isWebGL2
,
...
...
@@ -110,7 +117,9 @@ function WebGLCapabilities( gl, extensions, parameters ) {
floatFragmentTextures
:
floatFragmentTextures
,
floatVertexTextures
:
floatVertexTextures
,
maxSamples
:
maxSamples
maxSamples
:
maxSamples
,
multiview
:
multiview
};
...
...
src/renderers/webgl/WebGLMultiview.js
0 → 100644
浏览文件 @
3277fefb
function
err
()
{
console
.
error
(
bgl
.
getError
()
);
}
var
bgl
;
function
WebGLMultiview
(
gl
,
canvas
,
extensions
)
{
var
NUM_MULTIVIEW_VIEWS
=
2
;
bgl
=
gl
;
var
width
=
canvas
.
width
;
var
height
=
canvas
.
height
;
var
g_multiviewFb
;
// multiview framebuffer.
var
g_multiviewViewFb
;
// single views inside the multiview framebuffer.
var
g_multiviewColorTexture
;
// Color texture for multiview framebuffer.
var
g_multiviewDepth
;
// Depth texture for multiview framebuffer.
var
g_multiviewFbWidth
=
0
;
var
g_multiviewFbHeight
=
0
;
var
ext
=
extensions
.
get
(
'
OVR_multiview2
'
);
if
(
!
ext
)
{
return
;
}
var
texture
=
{
color
:
null
,
depthStencil
:
null
};
var
framebuffer
=
gl
.
createFramebuffer
();
var
multiviewViewFb
=
null
;
this
.
createMultiviewRenderTargetTexture
=
function
()
{
var
halfWidth
=
Math
.
floor
(
canvas
.
width
*
0.5
);
framebuffer
=
gl
.
createFramebuffer
();
gl
.
bindFramebuffer
(
gl
.
FRAMEBUFFER
,
framebuffer
);
texture
.
color
=
gl
.
createTexture
();
gl
.
bindTexture
(
gl
.
TEXTURE_2D_ARRAY
,
texture
.
color
);
gl
.
texParameteri
(
gl
.
TEXTURE_2D_ARRAY
,
gl
.
TEXTURE_MAG_FILTER
,
gl
.
NEAREST
);
gl
.
texParameteri
(
gl
.
TEXTURE_2D_ARRAY
,
gl
.
TEXTURE_MIN_FILTER
,
gl
.
NEAREST
);
gl
.
texImage3D
(
gl
.
TEXTURE_2D_ARRAY
,
0
,
gl
.
RGBA8
,
halfWidth
,
canvas
.
height
,
NUM_MULTIVIEW_VIEWS
,
0
,
gl
.
RGBA
,
gl
.
UNSIGNED_BYTE
,
null
);
ext
.
framebufferTextureMultiviewOVR
(
gl
.
FRAMEBUFFER
,
gl
.
COLOR_ATTACHMENT0
,
texture
.
color
,
0
,
0
,
NUM_MULTIVIEW_VIEWS
);
texture
.
depthStencil
=
gl
.
createTexture
();
gl
.
bindTexture
(
gl
.
TEXTURE_2D_ARRAY
,
texture
.
depthStencil
);
gl
.
texParameteri
(
gl
.
TEXTURE_2D_ARRAY
,
gl
.
TEXTURE_MAG_FILTER
,
gl
.
NEAREST
);
gl
.
texParameteri
(
gl
.
TEXTURE_2D_ARRAY
,
gl
.
TEXTURE_MIN_FILTER
,
gl
.
NEAREST
);
gl
.
texImage3D
(
gl
.
TEXTURE_2D_ARRAY
,
0
,
gl
.
DEPTH24_STENCIL8
,
halfWidth
,
canvas
.
height
,
NUM_MULTIVIEW_VIEWS
,
0
,
gl
.
DEPTH_STENCIL
,
gl
.
UNSIGNED_INT_24_8
,
null
);
ext
.
framebufferTextureMultiviewOVR
(
gl
.
FRAMEBUFFER
,
gl
.
DEPTH_STENCIL_ATTACHMENT
,
texture
.
depthStencil
,
0
,
0
,
NUM_MULTIVIEW_VIEWS
);
multiviewViewFb
=
[
null
,
null
];
for
(
var
viewIndex
=
0
;
viewIndex
<
2
;
++
viewIndex
)
{
multiviewViewFb
[
viewIndex
]
=
gl
.
createFramebuffer
();
gl
.
bindFramebuffer
(
gl
.
FRAMEBUFFER
,
multiviewViewFb
[
viewIndex
]
);
gl
.
framebufferTextureLayer
(
gl
.
FRAMEBUFFER
,
gl
.
COLOR_ATTACHMENT0
,
texture
.
color
,
0
,
viewIndex
);
}
g_multiviewFbWidth
=
halfWidth
;
g_multiviewFbHeight
=
canvas
.
height
;
};
this
.
bindMultiviewFrameBuffer
=
function
()
{
var
halfWidth
=
Math
.
floor
(
canvas
.
width
*
0.5
);
if
(
g_multiviewFbWidth
<
halfWidth
||
g_multiviewFbHeight
<
canvas
.
height
)
{
console
.
log
(
'
Updating multiview FBO with dimensions:
'
,
halfWidth
,
canvas
.
height
);
gl
.
bindTexture
(
gl
.
TEXTURE_2D_ARRAY
,
texture
.
color
);
gl
.
texImage3D
(
gl
.
TEXTURE_2D_ARRAY
,
0
,
gl
.
RGBA8
,
halfWidth
,
canvas
.
height
,
NUM_MULTIVIEW_VIEWS
,
0
,
gl
.
RGBA
,
gl
.
UNSIGNED_BYTE
,
null
);
gl
.
bindTexture
(
gl
.
TEXTURE_2D_ARRAY
,
texture
.
depthStencil
);
gl
.
texImage3D
(
gl
.
TEXTURE_2D_ARRAY
,
0
,
gl
.
DEPTH24_STENCIL8
,
halfWidth
,
canvas
.
height
,
NUM_MULTIVIEW_VIEWS
,
0
,
gl
.
DEPTH_STENCIL
,
gl
.
UNSIGNED_INT_24_8
,
null
);
g_multiviewFbWidth
=
halfWidth
;
g_multiviewFbHeight
=
canvas
.
height
;
}
// gl.bindFramebuffer(gl.FRAMEBUFFER, null);
gl
.
bindFramebuffer
(
gl
.
DRAW_FRAMEBUFFER
,
framebuffer
);
};
this
.
unbindMultiviewFrameBuffer
=
function
()
{
var
halfWidth
=
Math
.
floor
(
canvas
.
width
*
0.5
);
gl
.
bindFramebuffer
(
gl
.
DRAW_FRAMEBUFFER
,
null
);
gl
.
bindFramebuffer
(
gl
.
READ_FRAMEBUFFER
,
multiviewViewFb
[
0
]
);
gl
.
blitFramebuffer
(
0
,
0
,
halfWidth
,
canvas
.
height
,
0
,
0
,
halfWidth
,
canvas
.
height
,
gl
.
COLOR_BUFFER_BIT
,
gl
.
NEAREST
);
gl
.
bindFramebuffer
(
gl
.
READ_FRAMEBUFFER
,
multiviewViewFb
[
1
]
);
gl
.
blitFramebuffer
(
0
,
0
,
halfWidth
,
canvas
.
height
,
halfWidth
,
0
,
canvas
.
width
,
canvas
.
height
,
gl
.
COLOR_BUFFER_BIT
,
gl
.
NEAREST
);
};
this
.
createMultiviewRenderTargetTexture
();
}
export
{
WebGLMultiview
};
src/renderers/webgl/WebGLProgram.js
浏览文件 @
3277fefb
...
...
@@ -427,14 +427,27 @@ function WebGLProgram( renderer, extensions, code, material, shader, parameters,
parameters
.
logarithmicDepthBuffer
?
'
#define USE_LOGDEPTHBUF
'
:
''
,
parameters
.
logarithmicDepthBuffer
&&
(
capabilities
.
isWebGL2
||
extensions
.
get
(
'
EXT_frag_depth
'
)
)
?
'
#define USE_LOGDEPTHBUF_EXT
'
:
''
,
'
uniform mat4 modelMatrix;
'
,
'
uniform mat4 modelViewMatrix;
'
,
'
uniform mat4 projectionMatrix;
'
,
'
uniform mat4 viewMatrix;
'
,
'
uniform mat3 normalMatrix;
'
,
'
uniform vec3 cameraPosition;
'
,
renderer
.
vr
.
multiview
?
[
'
uniform mat4 modelViewMatrix;
'
,
'
uniform mat4 projectionMatrices[2];
'
,
'
uniform mat3 normalMatrix;
'
,
'
uniform mat4 viewMatrices[2];
'
,
'
#define viewMatrix viewMatrices[VIEW_ID]
'
,
'
#define projectionMatrix projectionMatrices[VIEW_ID]
'
].
join
(
'
\n
'
)
:
[
'
uniform mat4 modelViewMatrix;
'
,
'
uniform mat4 projectionMatrix;
'
,
'
uniform mat4 viewMatrix;
'
,
'
uniform mat3 normalMatrix;
'
,
].
join
(
'
\n
'
),
'
attribute vec3 position;
'
,
'
attribute vec3 normal;
'
,
'
attribute vec2 uv;
'
,
...
...
@@ -551,9 +564,15 @@ function WebGLProgram( renderer, extensions, code, material, shader, parameters,
(
(
material
.
extensions
?
material
.
extensions
.
shaderTextureLOD
:
false
)
||
parameters
.
envMap
)
&&
(
capabilities
.
isWebGL2
||
extensions
.
get
(
'
EXT_shader_texture_lod
'
)
)
?
'
#define TEXTURE_LOD_EXT
'
:
''
,
'
uniform mat4 viewMatrix;
'
,
'
uniform vec3 cameraPosition;
'
,
renderer
.
vr
.
multiview
?
[
'
uniform mat4 viewMatrices[2];
'
,
'
#define viewMatrix viewMatrices[VIEW_ID]
'
].
join
(
'
\n
'
)
:
'
uniform mat4 viewMatrix;
'
,
(
parameters
.
toneMapping
!==
NoToneMapping
)
?
'
#define TONE_MAPPING
'
:
''
,
(
parameters
.
toneMapping
!==
NoToneMapping
)
?
ShaderChunk
[
'
tonemapping_pars_fragment
'
]
:
''
,
// this code is required here because it is used by the toneMapping() function defined below
(
parameters
.
toneMapping
!==
NoToneMapping
)
?
getToneMappingFunction
(
'
toneMapping
'
,
parameters
.
toneMapping
)
:
''
,
...
...
@@ -607,6 +626,15 @@ function WebGLProgram( renderer, extensions, code, material, shader, parameters,
// GLSL 3.0 conversion
prefixVertex
=
[
'
#version 300 es
\n
'
,
renderer
.
vr
.
multiview
?
[
'
#extension GL_OVR_multiview2 : require
'
,
'
layout(num_views = 2) in;
'
,
'
#define VIEW_ID gl_ViewID_OVR
'
].
join
(
'
\n
'
)
:
''
,
'
#define attribute in
'
,
'
#define varying out
'
,
'
#define texture2D texture
'
...
...
@@ -614,6 +642,12 @@ function WebGLProgram( renderer, extensions, code, material, shader, parameters,
prefixFragment
=
[
'
#version 300 es
\n
'
,
renderer
.
vr
.
multiview
?
[
'
#extension GL_OVR_multiview2 : require
'
,
'
#define VIEW_ID gl_ViewID_OVR
'
].
join
(
'
\n
'
)
:
''
,
'
#define varying in
'
,
isGLSL3ShaderMaterial
?
''
:
'
out highp vec4 pc_fragColor;
'
,
isGLSL3ShaderMaterial
?
''
:
'
#define gl_FragColor pc_fragColor
'
,
...
...
@@ -634,11 +668,16 @@ function WebGLProgram( renderer, extensions, code, material, shader, parameters,
var
vertexGlsl
=
prefixVertex
+
vertexShader
;
var
fragmentGlsl
=
prefixFragment
+
fragmentShader
;
<<<<<<<
HEAD
// console.log( '*VERTEX*', vertexGlsl );
// console.log( '*FRAGMENT*', fragmentGlsl );
var
glVertexShader
=
WebGLShader
(
gl
,
gl
.
VERTEX_SHADER
,
vertexGlsl
);
var
glFragmentShader
=
WebGLShader
(
gl
,
gl
.
FRAGMENT_SHADER
,
fragmentGlsl
);
=======
var
glVertexShader
=
WebGLShader
(
gl
,
gl
.
VERTEX_SHADER
,
vertexGlsl
,
renderer
.
debug
.
checkShaderErrors
);
var
glFragmentShader
=
WebGLShader
(
gl
,
gl
.
FRAGMENT_SHADER
,
fragmentGlsl
,
renderer
.
debug
.
checkShaderErrors
);
>>>>>>>
Initial
working
implementation
gl
.
attachShader
(
program
,
glVertexShader
);
gl
.
attachShader
(
program
,
glFragmentShader
);
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录