Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- precision mediump float;
- attribute vec2 a_texcoord;
- varying vec2 v_texcoord;
- void main() {
- // Convert texture coordinate to render coordinate
- gl_Position = vec4(2.0 * a_texcoord.x - 1.0, 1.0 - 2.0 * a_texcoord.y, 0, 1);
- gl_PointSize = 1.0;
- v_texcoord = a_texcoord;
- }
- precision mediump float;
- uniform sampler2D u_texture;
- varying vec2 v_texcoord;
- void main() {
- vec4 data = texture2D(u_texture, v_texcoord);
- gl_FragColor = data;
- }
- var canvas = document.getElementById("canvas");
- // WebGL context
- var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
- if (!gl) {
- console.log("WebGL not supported");
- }
- // Set canvas dimensions
- canvas.width = window.innerWidth;
- canvas.height = window.innerHeight;
- // Create program with shaders
- var program = glUtils.createProgram(gl, 'vshader', 'fshader');
- // Texture dimensions
- var textureWidth = 2,
- textureHeight = 2;
- // Texture coordinates
- var coords = [];
- for (var i = 0; i < textureWidth; ++i) {
- for (var j = 0; j < textureHeight; ++j) {
- coords.push(i / textureWidth, j / textureHeight);
- }
- }
- // Random colors for texture
- var d = [];
- for (var i = 0; i < textureWidth * textureHeight; ++i) {
- d.push(
- Math.floor(Math.random() * 256),
- Math.floor(Math.random() * 256),
- Math.floor(Math.random() * 256),
- Math.floor(Math.random() * 256)
- );
- }
- // Texture with random colors
- var data = new Uint8Array(d);
- var texture0 = gl.createTexture();
- gl.bindTexture(gl.TEXTURE_2D, texture0);
- gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, textureWidth, textureHeight, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);
- gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
- gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
- gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
- gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
- gl.bindTexture(gl.TEXTURE_2D, null);
- // Texture to render to
- var texture1 = gl.createTexture();
- gl.bindTexture(gl.TEXTURE_2D, texture1);
- gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, textureWidth, textureHeight, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
- gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
- gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
- gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
- gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
- gl.bindTexture(gl.TEXTURE_2D, null);
- // Framebuffer
- var fb = gl.createFramebuffer();
- gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
- gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture1, 0);
- // Program
- gl.useProgram(program);
- // Bind texture0
- gl.activeTexture(gl.TEXTURE0);
- gl.bindTexture(gl.TEXTURE_2D, texture0);
- gl.uniform1i(program.uniforms.u_texture, 0);
- // Bind framebuffer
- gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
- gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture1, 0);
- // Set coordinate array
- sendCoords(program);
- // Set WebGL viewport
- setupViewport(gl, textureWidth, textureHeight);
- // Clear
- gl.clearColor(0, 0, 0, 1);
- gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
- // Draw
- gl.drawArrays(gl.POINTS, 0, textureWidth * textureHeight);
- // Read pixels
- var pixels = new Uint8Array(textureWidth * textureHeight * 4);
- gl.readPixels(0, 0, textureWidth, textureHeight, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
- gl.deleteFramebuffer(fb);
- console.log(pixels);
- // Enable and bind data to attribute for the texture coordinates
- function sendCoords(program) {
- var coordBuffer = gl.createBuffer();
- gl.bindBuffer(gl.ARRAY_BUFFER, coordBuffer);
- gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(coords), gl.STATIC_DRAW);
- gl.vertexAttribPointer(
- program.attribs.a_texcoord,
- 2,
- gl.FLOAT,
- gl.FALSE,
- 0,
- 0
- );
- gl.enableVertexAttribArray(program.attribs.a_texcoord);
- }
- // Viewport setup
- function setupViewport(gl, width, height) {
- gl.viewport(0, 0, width, height);
- gl.blendFunc(gl.SRC_ALPHA, gl.ONE);
- gl.enable(gl.BLEND);
- gl.disable(gl.DEPTH_TEST);
- }
Add Comment
Please, Sign In to add comment