Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Ablesons
three.js
提交
74de60f3
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,发现更多精彩内容 >>
提交
74de60f3
编写于
10月 05, 2015
作者:
M
Mr.doob
浏览文件
操作
浏览文件
下载
差异文件
Merge pull request #7289 from nraynaud/patch-5
add read float buffer example
上级
ea9a8ba6
914c4bdc
变更
1
显示空白变更内容
内联
并排
Showing
1 changed file
with
256 addition
and
0 deletion
+256
-0
examples/webgl_read_float_buffer.html
examples/webgl_read_float_buffer.html
+256
-0
未找到文件。
examples/webgl_read_float_buffer.html
0 → 100644
浏览文件 @
74de60f3
<!DOCTYPE html>
<html
lang=
"en"
>
<head>
<title>
three.js webgl - read float pixels
</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
{
color
:
#ffffff
;
font-family
:
Monospace
;
font-size
:
13px
;
text-align
:
center
;
font-weight
:
bold
;
background-color
:
#000000
;
margin
:
0px
;
overflow
:
hidden
;
}
#info
{
position
:
absolute
;
top
:
0px
;
width
:
100%
;
padding
:
5px
;
}
a
{
color
:
#ffffff
;
}
</style>
</head>
<body>
<div
id=
"container"
></div>
<div
id=
"info"
><a
href=
"http://threejs.org"
target=
"_blank"
>
three.js
</a>
read float pixels webgl example
</div>
<script
src=
"../build/three.min.js"
></script>
<script
src=
"js/Detector.js"
></script>
<script
src=
"js/libs/stats.min.js"
></script>
<script
id=
"fragment_shader_screen"
type=
"x-shader/x-fragment"
>
varying
vec2
vUv
;
uniform
sampler2D
tDiffuse
;
void
main
()
{
gl_FragColor
=
texture2D
(
tDiffuse
,
vUv
);
}
</script>
<script
id=
"fragment_shader_pass_1"
type=
"x-shader/x-fragment"
>
varying
vec2
vUv
;
uniform
float
time
;
void
main
()
{
float
r
=
vUv
.
x
;
if
(
vUv
.
y
<
0.5
)
r
=
0.0
;
float
g
=
vUv
.
y
;
if
(
vUv
.
x
<
0.5
)
g
=
0.0
;
gl_FragColor
=
vec4
(
r
,
g
,
time
,
1.0
);
}
</script>
<script
id=
"vertexShader"
type=
"x-shader/x-vertex"
>
varying
vec2
vUv
;
void
main
()
{
vUv
=
uv
;
gl_Position
=
projectionMatrix
*
modelViewMatrix
*
vec4
(
position
,
1.0
);
}
</script>
<script>
if
(
!
Detector
.
webgl
)
Detector
.
addGetWebGLMessage
();
var
container
,
stats
;
var
cameraRTT
,
sceneRTT
,
sceneScreen
,
renderer
,
zmesh1
,
zmesh2
;
var
mouseX
=
0
,
mouseY
=
0
;
var
windowHalfX
=
window
.
innerWidth
/
2
;
var
windowHalfY
=
window
.
innerHeight
/
2
;
var
rtTexture
,
material
,
quad
;
var
delta
=
0.01
;
var
valueNode
;
init
();
animate
();
function
init
()
{
container
=
document
.
getElementById
(
'
container
'
);
cameraRTT
=
new
THREE
.
OrthographicCamera
(
window
.
innerWidth
/
-
2
,
window
.
innerWidth
/
2
,
window
.
innerHeight
/
2
,
window
.
innerHeight
/
-
2
,
-
10000
,
10000
);
cameraRTT
.
position
.
z
=
100
;
//
sceneRTT
=
new
THREE
.
Scene
();
sceneScreen
=
new
THREE
.
Scene
();
var
light
=
new
THREE
.
DirectionalLight
(
0xffffff
);
light
.
position
.
set
(
0
,
0
,
1
).
normalize
();
sceneRTT
.
add
(
light
);
light
=
new
THREE
.
DirectionalLight
(
0xffaaaa
,
1.5
);
light
.
position
.
set
(
0
,
0
,
-
1
).
normalize
();
sceneRTT
.
add
(
light
);
rtTexture
=
new
THREE
.
WebGLRenderTarget
(
window
.
innerWidth
,
window
.
innerHeight
,
{
minFilter
:
THREE
.
LinearFilter
,
magFilter
:
THREE
.
NearestFilter
,
format
:
THREE
.
RGBAFormat
,
type
:
THREE
.
FloatType
}
);
material
=
new
THREE
.
ShaderMaterial
(
{
uniforms
:
{
time
:
{
type
:
"
f
"
,
value
:
0.0
}
},
vertexShader
:
document
.
getElementById
(
'
vertexShader
'
).
textContent
,
fragmentShader
:
document
.
getElementById
(
'
fragment_shader_pass_1
'
).
textContent
}
);
var
materialScreen
=
new
THREE
.
ShaderMaterial
(
{
uniforms
:
{
tDiffuse
:
{
type
:
"
t
"
,
value
:
rtTexture
}
},
vertexShader
:
document
.
getElementById
(
'
vertexShader
'
).
textContent
,
fragmentShader
:
document
.
getElementById
(
'
fragment_shader_screen
'
).
textContent
,
depthWrite
:
false
}
);
var
plane
=
new
THREE
.
PlaneBufferGeometry
(
window
.
innerWidth
,
window
.
innerHeight
);
quad
=
new
THREE
.
Mesh
(
plane
,
material
);
quad
.
position
.
z
=
-
100
;
sceneRTT
.
add
(
quad
);
var
geometry
=
new
THREE
.
TorusGeometry
(
100
,
25
,
15
,
30
);
var
mat1
=
new
THREE
.
MeshPhongMaterial
(
{
color
:
0x555555
,
specular
:
0xffaa00
,
shininess
:
5
}
);
var
mat2
=
new
THREE
.
MeshPhongMaterial
(
{
color
:
0x550000
,
specular
:
0xff2200
,
shininess
:
5
}
);
zmesh1
=
new
THREE
.
Mesh
(
geometry
,
mat1
);
zmesh1
.
position
.
set
(
0
,
0
,
100
);
zmesh1
.
scale
.
set
(
1.5
,
1.5
,
1.5
);
sceneRTT
.
add
(
zmesh1
);
zmesh2
=
new
THREE
.
Mesh
(
geometry
,
mat2
);
zmesh2
.
position
.
set
(
0
,
150
,
100
);
zmesh2
.
scale
.
set
(
0.75
,
0.75
,
0.75
);
sceneRTT
.
add
(
zmesh2
);
quad
=
new
THREE
.
Mesh
(
plane
,
materialScreen
);
quad
.
position
.
z
=
-
100
;
sceneScreen
.
add
(
quad
);
renderer
=
new
THREE
.
WebGLRenderer
();
renderer
.
setPixelRatio
(
window
.
devicePixelRatio
);
renderer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
renderer
.
autoClear
=
false
;
container
.
appendChild
(
renderer
.
domElement
);
stats
=
new
Stats
();
stats
.
domElement
.
style
.
position
=
'
absolute
'
;
stats
.
domElement
.
style
.
top
=
'
0px
'
;
container
.
appendChild
(
stats
.
domElement
);
var
valueDiv
=
document
.
createElement
(
'
div
'
);
valueDiv
.
style
.
position
=
'
absolute
'
;
valueDiv
.
style
.
top
=
'
0px
'
;
valueDiv
.
style
.
right
=
'
0px
'
;
valueDiv
.
style
.
width
=
'
500px
'
;
valueDiv
.
style
.
height
=
'
300px
'
;
valueDiv
.
style
.
fontSize
=
'
60px
'
;
container
.
appendChild
(
valueDiv
);
valueNode
=
document
.
createTextNode
(
''
);
valueDiv
.
appendChild
(
valueNode
);
document
.
addEventListener
(
'
mousemove
'
,
onDocumentMouseMove
,
false
);
}
function
onDocumentMouseMove
(
event
)
{
mouseX
=
(
event
.
clientX
-
windowHalfX
);
mouseY
=
(
event
.
clientY
-
windowHalfY
);
}
//
function
animate
()
{
requestAnimationFrame
(
animate
);
render
();
stats
.
update
();
}
function
render
()
{
var
time
=
Date
.
now
()
*
0.0015
;
if
(
zmesh1
&&
zmesh2
)
{
zmesh1
.
rotation
.
y
=
-
time
;
zmesh2
.
rotation
.
y
=
-
time
+
Math
.
PI
/
2
;
}
if
(
material
.
uniforms
.
time
.
value
>
1
||
material
.
uniforms
.
time
.
value
<
0
)
{
delta
*=
-
1
;
}
material
.
uniforms
.
time
.
value
+=
delta
;
renderer
.
clear
();
// Render first scene into texture
renderer
.
render
(
sceneRTT
,
cameraRTT
,
rtTexture
,
true
);
// Render full screen quad with generated texture
renderer
.
render
(
sceneScreen
,
cameraRTT
);
var
read
=
new
Float32Array
(
4
);
renderer
.
readRenderTargetPixels
(
rtTexture
,
windowHalfX
+
mouseX
,
windowHalfY
-
mouseY
,
1
,
1
,
read
);
valueNode
.
nodeValue
=
'
r:
'
+
read
[
0
]
+
'
g:
'
+
read
[
1
]
+
'
b:
'
+
read
[
2
];
}
</script>
</body>
</html>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录