Read Pixel Colors Tutorial
Introduction
This very short tutorial includes some source code explaining how to read pixels with WebGL.
Select procedural textures from a menu
in the Read Pixel Colors from Procedural Texture example.
Tap the canvas.
WebGL method readPixels()
obtains color values where you tapped. The source code
below demonstrates how to use readPixels()
.
A number of details were left out, to focus on the main topic.
However most free WebGL tutorials,
at SevenThunderSoftware.com, use the base JavaScript and WebGL explained in the free eBook,
WebGL Textures & Vertices: Beginner's Guide
.
Source Code
The following source code demonstrates how to use
the WebGL readPixels()
method
with the Read Pixel Colors from Procedural Texture example.
// Create an array // to hold four // eight bit values. var colors = new Uint8Array( 4 ); // Render beforehand // places the scene // in the buffer. glDemo.render( controller ); // Read just // one pixel // at the X coordinate 'nX' // and Y coordinate 'nY' // on the canvas. // Stores values into 'colors' // parameter. gl.readPixels( nX, nY, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, colors ); // Red is the // first Byte. var nR = colors[0]; // Green is the // second Byte. var nG = colors[1]; // Blue is the // third Byte. var nB = colors[2]; // The fourth Byte // contains the alpha // channel. var nA = colors[3]; // HTML Element // for display // to the user. var eDebug = document.getElementById( 'eDebug' ); // Display values for // each color channel: eDebug.innerHTML = "Red:"+nR+", Green: "+nG+", Blue:"+nB+", Alpha: "+nA;
Summary
This very short tutorial includes some source code explaining how to read pixels with WebGL.
Select procedural textures from a menu
in the Read Pixel Colors from Procedural Texture example.
Tap the canvas.
WebGL method readPixels()
obtains color values where you tapped. The source code
above demonstrates how to use readPixels()
.
Read more free WebGL tutorials.