WebGL高级进阶之路-滤镜grayscale实现

来源：互联网发布：企业网络架构方案编辑：程序博客网时间：2024/06/05 02:25

前言

WebGL比较核心的两大着色器, 顶点着色器、片元着色器, 它俩肩负重任。顶点着色器负责顶点的坐标位置、大小定义, 片元着色器负责颜色效果。

先看看我们要实现的效果, 开下胃（奸笑~~）

这里写图片描述

HTML

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8"></head><body><div style="float: left; margin-right: 10px">    <img src="../../resources/keepUp.png"></div><!--这是图片的大小。原图原比例画图--><canvas id="webgl" width="431" height="335" style="background-color: #0d72da"></canvas></body></html>

JavaScript

<script>    var canvasElement=document.getElementById('webgl');    var gl=canvasElement.getContext('webgl');    //顶点着色器源码    var vertexShaderSource = '' +        'attribute vec4 a_Position;'+//顶点位置坐标        'attribute vec2 a_TexCoord;' +//纹理坐标        'varying vec2 v_TexCoord;'+//插值后纹理坐标        'void main(){' +        'gl_Position = a_Position;' +//逐顶点处理        'v_TexCoord = a_TexCoord;' +//纹理坐标插值计算        '}';    //片元着色器源码    var fragShaderSource = '' +        'precision highp float;' +//所有float类型数据的精度是lowp        'varying vec2 v_TexCoord;'+//接收插值后的纹理坐标        'uniform sampler2D u_Sampler;' +//纹理图片像素数据        'void main(){' +        //采集纹素        'vec4 texture = texture2D(u_Sampler,v_TexCoord);' +        //计算RGB三个分量光能量之和，也就是亮度        'float luminance = 0.299*texture.r+0.587*texture.g+0.114*texture.b;' +        //逐片元赋值，RGB相同均为亮度值，用黑白两色表达图片的明暗变化        'gl_FragColor = vec4(luminance,luminance,luminance,1);' +        '}';    //初始化着色器    var program = initShader(gl,vertexShaderSource,fragShaderSource);    /**     * 从program对象获取相关的变量     * attribute变量声明的方法使用getAttribLocation()方法     * uniform变量声明的方法使用getAttribLocation()方法     **/    var a_Position = gl.getAttribLocation(program,'a_Position');    var a_TexCoord = gl.getAttribLocation(program,'a_TexCoord');    var u_Sampler = gl.getUniformLocation(program,'u_Sampler');    /**     * 四个顶点坐标数据data，z轴为零     * 定义纹理贴图在WebGL坐标系中位置     **/    var data=new Float32Array([        -1, 1,//左上角——v0        -1,-1,//左下角——v1        1,  1,//右上角——v2        1, -1 //右下角——v3    ]);    /**     * 创建UV纹理坐标数据textureData     **/    var textureData = new Float32Array([        0,1,//左上角——uv0        0,0,//左下角——uv1        1,1,//右上角——uv2        1,0 //右下角——uv3    ]);    /**     * 加载纹理图像像素数据     **/    var image = new Image();    image.onload = texture;    image.src = '../../resources/keepUp.png';    /**     创建缓冲区buffer，向顶点着色器传入顶点位置数据data     **/    var buffer=gl.createBuffer();    gl.bindBuffer(gl.ARRAY_BUFFER,buffer);    gl.bufferData(gl.ARRAY_BUFFER,data,gl.STATIC_DRAW);    gl.vertexAttribPointer(a_Position,2,gl.FLOAT,false,0,0);    gl.enableVertexAttribArray(a_Position);    /**     创建缓冲区textureBuffer，向顶点着色器传入顶点纹理坐标数据textureData     **/    var textureBuffer=gl.createBuffer();    gl.bindBuffer(gl.ARRAY_BUFFER,textureBuffer);    gl.bufferData(gl.ARRAY_BUFFER,textureData,gl.STATIC_DRAW);    gl.vertexAttribPointer(a_TexCoord,2,gl.FLOAT,false,0,0);    gl.enableVertexAttribArray(a_TexCoord);    /**     创建缓冲区textureBuffer，传入图片纹理数据，然后执行绘制方法drawArrays()     **/    function texture() {        var texture = gl.createTexture();//创建纹理图像缓冲区        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true); //纹理图片上下反转        gl.activeTexture(gl.TEXTURE0);//激活0号纹理单元TEXTURE0        gl.bindTexture(gl.TEXTURE_2D, texture);//绑定纹理缓冲区        //设置纹理贴图填充方式(纹理贴图像素尺寸大于顶点绘制区域像素尺寸)        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);        //设置纹理贴图填充方式(纹理贴图像素尺寸小于顶点绘制区域像素尺寸)        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);        //以下配置就不需要要求图片的尺寸了        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);        //设置纹素格式，jpg格式对应gl.RGB        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);        gl.uniform1i(u_Sampler, 0);//纹理缓冲区单元TEXTURE0中的颜色数据传入片元着色器        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);    }    /**     初始化函数initShader()     **/    function initShader(gl,vertexShaderSource,fragmentShaderSource){        var vertexShader = gl.createShader(gl.VERTEX_SHADER);        var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);        gl.shaderSource(vertexShader,vertexShaderSource);        gl.shaderSource(fragmentShader,fragmentShaderSource);        gl.compileShader(vertexShader);        gl.compileShader(fragmentShader);        var program = gl.createProgram();        gl.attachShader(program,vertexShader);        gl.attachShader(program,fragmentShader);        gl.linkProgram(program);        gl.useProgram(program);        return program;    }</script>

阅读全文

0 0