Skip to content

Commit 74de60f

Browse files
mrdoobmrdoob
committed
Merge pull request mrdoob#7289 from nraynaud/patch-5
add read float buffer example
2 parents ea9a8ba + 914c4bd commit 74de60f

1 file changed

Lines changed: 256 additions & 0 deletions

File tree

‎examples/webgl_read_float_buffer.html‎

Lines changed: 256 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,256 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>three.js webgl - read float pixels</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
7+
<style>
8+
body {
9+
color: #ffffff;
10+
font-family:Monospace;
11+
font-size:13px;
12+
text-align:center;
13+
font-weight: bold;
14+
background-color: #000000;
15+
margin: 0px;
16+
overflow: hidden;
17+
}
18+
19+
#info {
20+
position: absolute;
21+
top: 0px; width: 100%;
22+
padding: 5px;
23+
}
24+
25+
a {
26+
color: #ffffff;
27+
}
28+
29+
</style>
30+
</head>
31+
<body>
32+
33+
<div id="container"></div>
34+
<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> read float pixels webgl example</div>
35+
36+
<script src="../build/three.min.js"></script>
37+
38+
<script src="js/Detector.js"></script>
39+
<script src="js/libs/stats.min.js"></script>
40+
41+
<script id="fragment_shader_screen" type="x-shader/x-fragment">
42+
43+
varying vec2 vUv;
44+
uniform sampler2D tDiffuse;
45+
46+
void main() {
47+
48+
gl_FragColor = texture2D( tDiffuse, vUv );
49+
50+
}
51+
52+
</script>
53+
54+
<script id="fragment_shader_pass_1" type="x-shader/x-fragment">
55+
56+
varying vec2 vUv;
57+
uniform float time;
58+
59+
void main() {
60+
61+
float r = vUv.x;
62+
if( vUv.y < 0.5 ) r = 0.0;
63+
float g = vUv.y;
64+
if( vUv.x < 0.5 ) g = 0.0;
65+
66+
gl_FragColor = vec4( r, g, time, 1.0 );
67+
68+
}
69+
70+
</script>
71+
72+
<script id="vertexShader" type="x-shader/x-vertex">
73+
74+
varying vec2 vUv;
75+
76+
void main() {
77+
78+
vUv = uv;
79+
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
80+
81+
}
82+
83+
</script>
84+
85+
86+
<script>
87+
88+
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
89+
90+
var container, stats;
91+
92+
var cameraRTT, sceneRTT, sceneScreen, renderer, zmesh1, zmesh2;
93+
94+
var mouseX = 0, mouseY = 0;
95+
96+
var windowHalfX = window.innerWidth / 2;
97+
var windowHalfY = window.innerHeight / 2;
98+
99+
var rtTexture, material, quad;
100+
101+
var delta = 0.01;
102+
var valueNode;
103+
104+
init();
105+
animate();
106+
107+
function init() {
108+
109+
container = document.getElementById( 'container' );
110+
111+
cameraRTT = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, - 10000, 10000 );
112+
cameraRTT.position.z = 100;
113+
114+
//
115+
116+
sceneRTT = new THREE.Scene();
117+
sceneScreen = new THREE.Scene();
118+
119+
var light = new THREE.DirectionalLight( 0xffffff );
120+
light.position.set( 0, 0, 1 ).normalize();
121+
sceneRTT.add( light );
122+
123+
light = new THREE.DirectionalLight( 0xffaaaa, 1.5 );
124+
light.position.set( 0, 0, - 1 ).normalize();
125+
sceneRTT.add( light );
126+
127+
rtTexture = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBAFormat, type: THREE.FloatType } );
128+
129+
material = new THREE.ShaderMaterial( {
130+
131+
uniforms: { time: { type: "f", value: 0.0 } },
132+
vertexShader: document.getElementById( 'vertexShader' ).textContent,
133+
fragmentShader: document.getElementById( 'fragment_shader_pass_1' ).textContent
134+
135+
} );
136+
137+
var materialScreen = new THREE.ShaderMaterial( {
138+
139+
uniforms: { tDiffuse: { type: "t", value: rtTexture } },
140+
vertexShader: document.getElementById( 'vertexShader' ).textContent,
141+
fragmentShader: document.getElementById( 'fragment_shader_screen' ).textContent,
142+
143+
depthWrite: false
144+
145+
} );
146+
147+
var plane = new THREE.PlaneBufferGeometry( window.innerWidth, window.innerHeight );
148+
149+
quad = new THREE.Mesh( plane, material );
150+
quad.position.z = - 100;
151+
sceneRTT.add( quad );
152+
153+
var geometry = new THREE.TorusGeometry( 100, 25, 15, 30 );
154+
155+
var mat1 = new THREE.MeshPhongMaterial( { color: 0x555555, specular: 0xffaa00, shininess: 5 } );
156+
var mat2 = new THREE.MeshPhongMaterial( { color: 0x550000, specular: 0xff2200, shininess: 5 } );
157+
158+
zmesh1 = new THREE.Mesh( geometry, mat1 );
159+
zmesh1.position.set( 0, 0, 100 );
160+
zmesh1.scale.set( 1.5, 1.5, 1.5 );
161+
sceneRTT.add( zmesh1 );
162+
163+
zmesh2 = new THREE.Mesh( geometry, mat2 );
164+
zmesh2.position.set( 0, 150, 100 );
165+
zmesh2.scale.set( 0.75, 0.75, 0.75 );
166+
sceneRTT.add( zmesh2 );
167+
168+
quad = new THREE.Mesh( plane, materialScreen );
169+
quad.position.z = - 100;
170+
sceneScreen.add( quad );
171+
172+
renderer = new THREE.WebGLRenderer();
173+
renderer.setPixelRatio( window.devicePixelRatio );
174+
renderer.setSize( window.innerWidth, window.innerHeight );
175+
renderer.autoClear = false;
176+
177+
container.appendChild( renderer.domElement );
178+
179+
stats = new Stats();
180+
stats.domElement.style.position = 'absolute';
181+
stats.domElement.style.top = '0px';
182+
container.appendChild( stats.domElement );
183+
184+
var valueDiv = document.createElement( 'div' );
185+
valueDiv.style.position = 'absolute';
186+
valueDiv.style.top = '0px';
187+
valueDiv.style.right = '0px';
188+
valueDiv.style.width = '500px';
189+
valueDiv.style.height = '300px';
190+
valueDiv.style.fontSize = '60px';
191+
container.appendChild( valueDiv );
192+
valueNode = document.createTextNode( '' );
193+
valueDiv.appendChild( valueNode );
194+
195+
196+
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
197+
198+
}
199+
200+
function onDocumentMouseMove( event ) {
201+
202+
mouseX = ( event.clientX - windowHalfX );
203+
mouseY = ( event.clientY - windowHalfY );
204+
205+
}
206+
207+
//
208+
209+
function animate() {
210+
211+
requestAnimationFrame( animate );
212+
213+
render();
214+
stats.update();
215+
216+
}
217+
218+
function render() {
219+
220+
var time = Date.now() * 0.0015;
221+
222+
if ( zmesh1 && zmesh2 ) {
223+
224+
zmesh1.rotation.y = - time;
225+
zmesh2.rotation.y = - time + Math.PI / 2;
226+
227+
}
228+
229+
if ( material.uniforms.time.value > 1 || material.uniforms.time.value < 0 ) {
230+
231+
delta *= - 1;
232+
233+
}
234+
235+
material.uniforms.time.value += delta;
236+
237+
renderer.clear();
238+
239+
// Render first scene into texture
240+
241+
renderer.render( sceneRTT, cameraRTT, rtTexture, true );
242+
243+
// Render full screen quad with generated texture
244+
245+
renderer.render( sceneScreen, cameraRTT );
246+
247+
var read = new Float32Array( 4 );
248+
renderer.readRenderTargetPixels( rtTexture, windowHalfX + mouseX, windowHalfY - mouseY, 1, 1, read );
249+
250+
valueNode.nodeValue = 'r:' + read[ 0 ] + ' g:' + read[ 1 ] + ' b:' + read[ 2 ];
251+
252+
}
253+
254+
</script>
255+
</body>
256+
</html>

0 commit comments

Comments
 (0)