文章
原创文章
WEBGL资讯
翻译文章
WEBGL教程
栏目专题
酷站
代码
热帖
注册
登录
新建
WebGL 图像处理 - Part.1 WebGL 图像处理 Example4
CWEBGL
2018-09-18 20:54
FORK
收藏
HTML代码
"use strict"; function main() { var image = new Image(); image.crossOrigin = true; image.src = "https://webglfundamentals.org/webgl/resources/leaves.jpg"; // MUST BE SAME DOMAIN!!! image.onload = function() { render(image); } } function render(image) { // Get A WebGL context /** @type {HTMLCanvasElement} */ var canvas = document.getElementById("canvas"); var gl = canvas.getContext("webgl"); if (!gl) { return; } // setup GLSL program var program = webglUtils.createProgramFromScripts(gl, ["2d-vertex-shader", "2d-fragment-shader"]); // look up where the vertex data needs to go. var positionLocation = gl.getAttribLocation(program, "a_position"); var texcoordLocation = gl.getAttribLocation(program, "a_texCoord"); // Create a buffer to put three 2d clip space points in var positionBuffer = gl.createBuffer(); // Bind it to ARRAY_BUFFER (think of it as ARRAY_BUFFER = positionBuffer) gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); // Set a rectangle the same size as the image. setRectangle( gl, 0, 0, image.width, image.height); // provide texture coordinates for the rectangle. var texcoordBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, texcoordBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([ 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, 1.0, ]), gl.STATIC_DRAW); // Create a texture. var texture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, texture); // Set the parameters so we can render any size image. 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.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); // Upload the image into the texture. gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image); // lookup uniforms var resolutionLocation = gl.getUniformLocation(program, "u_resolution"); var textureSizeLocation = gl.getUniformLocation(program, "u_textureSize"); var kernelLocation = gl.getUniformLocation(program, "u_kernel[0]"); var kernelWeightLocation = gl.getUniformLocation(program, "u_kernelWeight"); // Define several convolution kernels var kernels = { normal: [ 0, 0, 0, 0, 1, 0, 0, 0, 0 ], gaussianBlur: [ 0.045, 0.122, 0.045, 0.122, 0.332, 0.122, 0.045, 0.122, 0.045 ], gaussianBlur2: [ 1, 2, 1, 2, 4, 2, 1, 2, 1 ], gaussianBlur3: [ 0, 1, 0, 1, 1, 1, 0, 1, 0 ], unsharpen: [ -1, -1, -1, -1, 9, -1, -1, -1, -1 ], sharpness: [ 0,-1, 0, -1, 5,-1, 0,-1, 0 ], sharpen: [ -1, -1, -1, -1, 16, -1, -1, -1, -1 ], edgeDetect: [ -0.125, -0.125, -0.125, -0.125, 1, -0.125, -0.125, -0.125, -0.125 ], edgeDetect2: [ -1, -1, -1, -1, 8, -1, -1, -1, -1 ], edgeDetect3: [ -5, 0, 0, 0, 0, 0, 0, 0, 5 ], edgeDetect4: [ -1, -1, -1, 0, 0, 0, 1, 1, 1 ], edgeDetect5: [ -1, -1, -1, 2, 2, 2, -1, -1, -1 ], edgeDetect6: [ -5, -5, -5, -5, 39, -5, -5, -5, -5 ], sobelHorizontal: [ 1, 2, 1, 0, 0, 0, -1, -2, -1 ], sobelVertical: [ 1, 0, -1, 2, 0, -2, 1, 0, -1 ], previtHorizontal: [ 1, 1, 1, 0, 0, 0, -1, -1, -1 ], previtVertical: [ 1, 0, -1, 1, 0, -1, 1, 0, -1 ], boxBlur: [ 0.111, 0.111, 0.111, 0.111, 0.111, 0.111, 0.111, 0.111, 0.111 ], triangleBlur: [ 0.0625, 0.125, 0.0625, 0.125, 0.25, 0.125, 0.0625, 0.125, 0.0625 ], emboss: [ -2, -1, 0, -1, 1, 1, 0, 1, 2 ] }; var initialSelection = 'edgeDetect2'; // Setup UI to pick kernels. var ui = document.getElementById("ui"); var select = document.createElement("select") for (var name in kernels) { var option = document.createElement("option"); option.value = name; if (name == initialSelection) { option.selected = true; } option.appendChild(document.createTextNode(name)); select.appendChild(option); } select.onchange = function(event) { drawWithKernel(this.options[this.selectedIndex].value); }; ui.appendChild(select); drawWithKernel(initialSelection); function computeKernelWeight(kernel) { var weight = kernel.reduce(function(prev, curr) { return prev + curr; }); return weight <= 0 ? 1 : weight; } function drawWithKernel(name) { webglUtils.resizeCanvasToDisplaySize(gl.canvas); // Tell WebGL how to convert from clip space to pixels gl.viewport(0, 0, gl.canvas.width, gl.canvas.height); // Clear the canvas gl.clearColor(0, 0, 0, 0); gl.clear(gl.COLOR_BUFFER_BIT); // Tell it to use our program (pair of shaders) gl.useProgram(program); // Turn on the position attribute gl.enableVertexAttribArray(positionLocation); // Bind the position buffer. gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); // Tell the position attribute how to get data out of positionBuffer (ARRAY_BUFFER) var size = 2; // 2 components per iteration var type = gl.FLOAT; // the data is 32bit floats var normalize = false; // don't normalize the data var stride = 0; // 0 = move forward size * sizeof(type) each iteration to get the next position var offset = 0; // start at the beginning of the buffer gl.vertexAttribPointer( positionLocation, size, type, normalize, stride, offset) // Turn on the teccord attribute gl.enableVertexAttribArray(texcoordLocation); // Bind the position buffer. gl.bindBuffer(gl.ARRAY_BUFFER, texcoordBuffer); // Tell the position attribute how to get data out of positionBuffer (ARRAY_BUFFER) var size = 2; // 2 components per iteration var type = gl.FLOAT; // the data is 32bit floats var normalize = false; // don't normalize the data var stride = 0; // 0 = move forward size * sizeof(type) each iteration to get the next position var offset = 0; // start at the beginning of the buffer gl.vertexAttribPointer( texcoordLocation, size, type, normalize, stride, offset) // set the resolution gl.uniform2f(resolutionLocation, gl.canvas.width, gl.canvas.height); // set the size of the image gl.uniform2f(textureSizeLocation, image.width, image.height); // set the kernel and it's weight gl.uniform1fv(kernelLocation, kernels[name]); gl.uniform1f(kernelWeightLocation, computeKernelWeight(kernels[name])); // Draw the rectangle. var primitiveType = gl.TRIANGLES; var offset = 0; var count = 6; gl.drawArrays(primitiveType, offset, count); } } function setRectangle(gl, x, y, width, height) { var x1 = x; var x2 = x + width; var y1 = y; var y2 = y + height; gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([ x1, y1, x2, y1, x1, y2, x1, y2, x2, y1, x2, y2, ]), gl.STATIC_DRAW); } main();
JS代码
复制嵌入代码
复制链接
扫码至移动设备运行
扫码至移动设备运行
Console
WebGL 图像处理 - Part.1 WebGL 图像处理 Example4 教程附录演示代码
依赖文件
添加
保存
加载更多评论
请先
登录
后再发表评论
发表评论
CWEBGL
Levl:0
2018-09-18 20:54
0
131
0
0
WebGL 图像处理 - Part.1 WebGL 图像处理 Example4 教程附录演示代码
收藏
FOKR