先思考个问题, 想实现遮罩怎么办?

<!doctype html>

<html>

<head>

<meta charset="utf-8" />

<title>Stencil Buffer</title>

<script id="shader-vs" type="x-shader/x-vertex">

precision highp float;

attribute vec3 aPos;

attribute vec4 aColor;

varying vec4 vColor;

void main(void){

    gl_Position = vec4(aPos, 1);

    vColor = aColor;

}

</script>

<script id="shader-fs" type="x-shader/x-fragment">

precision highp float;

varying vec4 vColor;

void main(void) {

    gl_FragColor = vColor;

}

</script>

<script id="shader-vs-2" type="x-shader/x-vertex">

precision highp float;

attribute vec3 aPos;

attribute vec2 aTextureCoords;

varying vec2 vTextureCoord;

void main(void){

    gl_Position = vec4(aPos, 1.0);

    vTextureCoord = aTextureCoords;

}

</script>

<script id="shader-fs-2" type="x-shader/x-fragment">

precision highp float;

varying vec2 vTextureCoord;

uniform sampler2D uSampler;

void main(void) {

    gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));

    if (gl_FragColor.a == 0.0) {

        discard;

    }

}

</script>

</head>

<body>

<canvas id="canvas" width="400" height="400" ></canvas>

<script>

var gl;

var canvas = document.getElementById('canvas');

var glProgram = null;

var glProgram2 = null;

var samplerUniform = null;

var maskTexture;

function getGLContext() {

    var glContextNames = ['webgl', 'experimental-webgl'];

    for (var i = 0; i < glContextNames.length; i ++) {

        try {

            gl = canvas.getContext(glContextNames[i], {

                stencil: true

            });

        } catch (e) {}

        if (gl) {

            gl.clearColor(74 / 255, 115 / 255, 94 / 255, 1.0);

            gl.clear(gl.COLOR_BUFFER_BIT | gl.STENCIL_BUFFER_BIT);

            gl.viewport(0, 0, canvas.width, canvas.height);

            gl.enable(gl.STENCIL_TEST);

            break;

        }

    }

}

function initShaders(vsShaderId, fsShaderId) {

    //get shader source

    var vs_source = document.getElementById(vsShaderId).innerHTML;

    var fs_source = document.getElementById(fsShaderId).innerHTML;

    //compile shaders

    var vertexShader = makeShader(vs_source, gl.VERTEX_SHADER);

    var fragmentShader = makeShader(fs_source, gl.FRAGMENT_SHADER);

    //create program

    var glProgram = gl.createProgram();

    //attach and link shaders to the program

    gl.attachShader(glProgram, vertexShader);

    gl.attachShader(glProgram, fragmentShader);

    gl.linkProgram(glProgram);

    if (!gl.getProgramParameter(glProgram, gl.LINK_STATUS)) {

        alert("Unable to initialize the shader program.");

    }

    //use program

    // gl.useProgram(glProgram);

    return glProgram;

}

function makeShader(src, type) {

    //compile the vertex shader

    var shader = gl.createShader(type);

    gl.shaderSource(shader, src);

    gl.compileShader(shader);

    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {

        alert("Error compiling shader: " + gl.getShaderInfoLog(shader));

    }

    return shader;

}

// vertex representing the triangle

var vertex = [

    -.5, -.2,  0,

    .5,  -.2,  0,

    0,   .6,   0

];

var stencilVertex = [

    -.2, -.5,  0,

    .4,  -.5,  0,

    .3,   .6,   0

];

function setupBufferAndDraw(){

    // draw the mask image as stencil

    gl.useProgram(program2);

    var maskVertex = [

         -1, -1, 0,

         1,  -1, 0,

         1,   1, 0,

         -1, -1, 0,

         1,   1, 0,

         -1,  1, 0

    ];

    var maskTexCoords = [

        0, 0,

        1, 0,

        1, 1,

        0, 0,

        1, 1,

        0, 1

    ];

    var maskBuffer = gl.createBuffer();

    gl.bindBuffer(gl.ARRAY_BUFFER, maskBuffer);

    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(maskVertex), gl.STATIC_DRAW);

    var aMaskVertexPosition = gl.getAttribLocation(program2, 'aPos');

    gl.vertexAttribPointer(aMaskVertexPosition, 3, gl.FLOAT, false, 0, 0);

    gl.enableVertexAttribArray(aMaskVertexPosition);

    // texture coordinate data

    var maskTexCoordBuffer = gl.createBuffer();

    gl.bindBuffer(gl.ARRAY_BUFFER, maskTexCoordBuffer);

    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(maskTexCoords), gl.STATIC_DRAW);

    var vertexTexCoordAttribute = gl.getAttribLocation(program2, "aTextureCoords");

    gl.enableVertexAttribArray(vertexTexCoordAttribute);

    gl.vertexAttribPointer(vertexTexCoordAttribute, 2, gl.FLOAT, false, 0, 0);

    // Always pass test

    gl.stencilFunc(gl.ALWAYS, 1, 0xff);

    gl.stencilOp(gl.KEEP, gl.KEEP, gl.REPLACE);

    gl.stencilMask(0xff);

    gl.clear(gl.STENCIL_BUFFER_BIT);

    // No need to display the triangle

    gl.colorMask(0, 0, 0, 0);

    gl.activeTexture(gl.TEXTURE0);

    gl.bindTexture(gl.TEXTURE_2D, maskTexture);

    gl.uniform1i(samplerUniform, 0);

    gl.drawArrays(gl.TRIANGLES, 0, maskVertex.length / 3);

    // return;

    gl.useProgram(program);

    // Pass test if stencil value is 1

    gl.stencilFunc(gl.EQUAL, 1, 0xFF);

    gl.stencilMask(0x00);

    gl.colorMask(1, 1, 1, 1);

    // draw the clipped triangle

    var color = [

        1, 0, 0, 1,

        0, 1, 0, 1,

        0, 0, 1, 1

    ];

    var colorBuffer = gl.createBuffer();

    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);

    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(color), gl.STATIC_DRAW);

    var aColorPosition = gl.getAttribLocation(program, 'aColor');

    gl.vertexAttribPointer(aColorPosition, 4, gl.FLOAT, false, 0, 0);

    gl.enableVertexAttribArray(aColorPosition);

    var vertexBuffer = gl.createBuffer();

    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertex), gl.STATIC_DRAW);

    var aVertexPosition = gl.getAttribLocation(program, 'aPos');

    gl.vertexAttribPointer(aVertexPosition, 3, gl.FLOAT, false, 0, 0);

    gl.enableVertexAttribArray(aVertexPosition);

    gl.clear(gl.COLOR_BUFFER_BIT);

    gl.drawArrays(gl.TRIANGLES, 0, vertex.length / 3);

}

function createTexture(source) {

    var texture = gl.createTexture();

    gl.bindTexture(gl.TEXTURE_2D, texture);

    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);

    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);

    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);

    gl.bindTexture(gl.TEXTURE_2D, null);

    return texture;

}

window.onload = function () {

    getGLContext();

    program = initShaders('shader-vs', 'shader-fs');

    program2 = initShaders('shader-vs-2', 'shader-fs-2');

    samplerUniform = gl.getUniformLocation(program2, 'uSampler');

    var img = new Image();

    img.onload = function () {

        maskTexture = createTexture(this);

        setupBufferAndDraw();

    };

    img.src = '../images/mask-png8.png';

}

</script>

</body>

</html>

　　

webgl 模板缓冲的更多相关文章

  1. WebGL学习笔记（十五）：模板缓冲

    可以用来干啥? 模板缓冲一般用来实现一些地面反射投影和类似镜子的特殊效果,如下: 开启模板缓冲 默认情况下,模板缓冲是关闭的,模板缓冲如果处于关闭状态,运行模板相关的代码不会报错,但是不会出现预期的效 ...

  2. Shader 模板缓冲和模板测试

    http://blog.sina.com.cn/s/blog_6e159df70102xa67.html 模板缓冲的概念 Unity官方的Shader文档根本没有提到这个玩意,这个概念也是看到了UGU ...

  3. 进一步使用 模板缓冲（stencil）

    最近做课题的时候需要计算一个 view(就是一次渲染得到的帧) 下的重叠像素个数(两个物体或更多的物体重叠). 最开始我的想法是渲染一个物体输出一张纹理,这样对比物体之间的纹理就知道重叠了.但是这样当 ...

  4. windows API下的模板缓冲（stencil buffer）

    在windows API搭建的OpenGL窗口中使用模板缓冲,需要在像素格式描述表中设置stencil buffer位宽为8,这样窗口会自动生成stencil buffer,然后可以在opengl环境 ...

  5. webgl 深度缓冲

    传统的画2d画布就是后画的会盖在先画的上面,但是在画一些三维图形时,这很难控制 深度缓冲区的作用就是区分颜色所在的层次,防止把被遮挡住的颜色显示出来. 深度缓冲很强大,用起来很简单 开启深度缓冲(测试 ...

  6. WebGL学习笔记（十六）：遮罩

    这里总结下几种WebGL中实现遮罩的方法. 模板缓冲 模板缓冲可以实现渲染剔除,但是我们之前的学习里,剔除范围是基于上一次渲染的结果,且上一次的渲染也会进行显示,这样的话并不适合用来实现遮罩. 我们想 ...

  7. OpenGL ES 中的模板测试

    模板测试的主要功能是丢弃一部分片元,相对于深度检测来说,模板测试提出的片元数量相对较少.模板测试发生在剪裁测试之后,深度测试之前. 使用模板测试时很重要的代码提示: 1.glClear( GL_STE ...

  8. WebGL自学教程——WebGL演示样本：开始

    最终开始WebGL样品演示,...... 开始 使用WebGL步骤,非常easy: 1. 获得WebGL的渲染环境(也叫渲染上下文). 2. 发挥你的想象力,利用<WebGL參考手冊>中的 ...

  9. WebGL自学教程——WebGL演示样例：開始

    最终開始WebGL的演示样例了,...... 開始 使用WebGL的步骤,非常easy: 1. 获得WebGL的渲染环境(也叫渲染上下文). 2. 发挥你的想象力,利用<WebGL參考手冊> ...

随机推荐

  1. android 解决小米手机上选择照片路径为null情况

    昨天测试帅哥说他手机选择图库崩溃了,这是一个上传头像的功能,相信很多应用都有这个功能,于是我就把手机拿过来打log看了下返回的路径 为null,在网上搜索了下解决方案,现在把解决方案记录下: 这是在o ...

  2. VC++环境下单文档SDI与OpenGL多视图分割窗口的实现-类似3DMAX的主界面

    本文主要讲述如何在VC++环境下实现单文档SDI与OpenGL多视图分割窗口,最终的界面类似3DMAX的主界面.首先给出我实现的效果图: 整个实现过程网络上有很多零散的博文,请各位自行搜索,在基于对话 ...

  3. UART, SPI, IIC的详解及三者的区别和联系

    UART.SPI.IIC是经常用到的几个数据传输标准,下面分别总结一下: UART(Universal Asynchronous Receive Transmitter):也就是我们经常所说的串口,基 ...

  4. Python2.7-filecmp

    filecmp 模块,定义了比较文件或目录的函数,比较文件只会有 True 和 False 两种结果,比较目录会返回目录下相同的文件,不同的文件,出错的文件.比较文件也可以用 difflib 模块,d ...

  5. CSS grid layout

      CSS网格布局用于将页面分割成数个主要区域,或者用来定义组件内部元素间大小.位置和图层之间的关系. 像表格一样,网格布局让我们能够按行或列来对齐元素. 但是,使用CSS网格可能还是比CSS表格更容 ...

  6. Android开发环境的发展以及重装系统之后在myeclipse重配Android开发环境。

    android的开发环境早期要自己去去官网下SDK,ADT,AVD等.不仅在一开始要面临国内防火墙的阻拦,四处奔波之后都下载好了,还得自己Linked,可谓困难重重.随着android开发的火热,上面 ...

  7. VBA 上传数据与查找数据 while循环 和 for循环

    Option Explicit  上传数据Private Sub CommandButton1_Click() If MsgBox("请确认数据是否准确,是否确认上传?", vbC ...

  8. test_maven_实现表单验证

    这篇文章是我的上一篇文章的续集,如未看过,可看一下,上面的test_maven再继续看这个 这篇文章主要是阐述使用struts实现表单验证的功能. 1.首先了解actionContext:Action ...

  9. BroadcastReceiver广播相关 - 转

    BroadcastReceiver广播接收者用于接收系统或其他程序(包括自己程序)发送的广播. 一.注册广播 在android中,我们如果想接收到广播信息,必须自定义我们的广播接收者.要写一个类来继承 ...

  10. Spring3 访问静态资源

    <mvc:resources location="/jquery/" mapping="/jquery/**"/> <mvc:resource ...