传统的画2d画布就是后画的会盖在先画的上面,但是在画一些三维图形时,这很难控制

深度缓冲区的作用就是区分颜色所在的层次，防止把被遮挡住的颜色显示出来。

深度缓冲很强大,用起来很简单

开启深度缓冲(测试),注意是测试
gl.enable(gl.DEPTH_TEST);
 
清除深度缓存
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
 
 
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8"/>

    <title>Hidden Surface Removal & Depth Test</title>

</head>

<body>

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

    Please use a browser that supports "canvas"

</canvas>

<script id="vertex-shader" type="glsl">

    attribute vec4 a_Position;

    attribute vec4 a_Color;

    uniform mat4 u_ProjMatrix;

    uniform mat4 u_ViewMatrix;

    varying vec4 v_Color;

    void main() {

        gl_Position = u_ProjMatrix * u_ViewMatrix * a_Position;

        v_Color = a_Color;

    }

</script>

<script id="fragment-shader" type="glsl">

    precision mediump float;

    varying vec4 v_Color;

    void main() {

       gl_FragColor = v_Color;

    }

</script>

<script src="lib/cuon-matrix.js"></script>

<script src="lib/myutils.js"></script>

<script>

    var VERTEX_SHADER_SOURCE = document.getElementById('vertex-shader').text;

    var FRAGMENT_SHADER_SOURCE = document.getElementById('fragment-shader').text;

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

    var gl = canvas.getContext('webgl');

    if (!initShaders(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE)) {

        alert('Failed to init shaders');

    }

    var vertices = new Float32Array([

        // Three triangles on the right side

        0.75, 1.0, 0.0, 0.4, 0.4, 1.0,  // 前面的蓝色三角形

        0.25, -1.0, 0.0, 0.4, 0.4, 1.0,

        1.25, -1.0, 0.0, 1.0, 0.4, 0.4,

        0.75, 1.0, -2.0, 1.0, 1.0, 0.4, // 中间的黄色三角形

        0.25, -1.0, -2.0, 1.0, 1.0, 0.4,

        1.25, -1.0, -2.0, 1.0, 0.4, 0.4,

        0.75, 1.0, -4.0, 0.4, 1.0, 0.4, // 后面的绿色三角形

        0.25, -1.0, -4.0, 0.4, 1.0, 0.4,

        1.25, -1.0, -4.0, 1.0, 0.4, 0.4,

        // Three triangles on the left side

        -0.75, 1.0, 0.0, 0.4, 0.4, 1.0,  // 前面的蓝色三角形

        -1.25, -1.0, 0.0, 0.4, 0.4, 1.0,

        -0.25, -1.0, 0.0, 1.0, 0.4, 0.4,

        -0.75, 1.0, -2.0, 1.0, 1.0, 0.4, // 中间的黄色三角形

        -1.25, -1.0, -2.0, 1.0, 1.0, 0.4,

        -0.25, -1.0, -2.0, 1.0, 0.4, 0.4,

        -0.75, 1.0, -4.0, 0.4, 1.0, 0.4, // 后面的绿色三角形

        -1.25, -1.0, -4.0, 0.4, 1.0, 0.4,

        -0.25, -1.0, -4.0, 1.0, 0.4, 0.4

    ]);

    initVertexBuffers(gl, vertices);

    var u_ViewMatrix = gl.getUniformLocation(gl.program, 'u_ViewMatrix');

    var u_ProjMatrix = gl.getUniformLocation(gl.program, 'u_ProjMatrix');

    var viewMatrix = new Matrix4();

    viewMatrix.setLookAt(0, 0, 5, 0, 0, -100, 0, 1, 0);

    var projMatrix = new Matrix4();

    projMatrix.setPerspective(30, canvas.width / canvas.height, 1, 100);

    gl.uniformMatrix4fv(u_ViewMatrix, false, viewMatrix.elements);

    gl.uniformMatrix4fv(u_ProjMatrix, false, projMatrix.elements);

    //开启后,则按照z值排序

    // gl.enable(gl.DEPTH_TEST);

    gl.clearColor(0.0, 0.0, 0.0, 1.0);

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

    gl.drawArrays(gl.TRIANGLES, 0, 18);

    function initVertexBuffers(gl, vertices) {

        var vertexBuffer = gl.createBuffer();

        if (!vertexBuffer) {

            console.log('Failed to create buffer object');

            return -1;

        }

        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

        var FSIZE = vertices.BYTES_PER_ELEMENT;

        var a_Position = gl.getAttribLocation(gl.program, 'a_Position');

        gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, 6 * FSIZE, 0);

        gl.enableVertexAttribArray(a_Position);

        var a_Color = gl.getAttribLocation(gl.program, 'a_Color');

        gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, 6 * FSIZE, 3 * FSIZE);

        gl.enableVertexAttribArray(a_Color);

    }

</script>

</body>

</html>

　　

 

webgl 深度缓冲的更多相关文章

  1. webgl 模板缓冲

    先思考个问题, 想实现遮罩怎么办? <!doctype html> <html> <head> <meta charset="utf-8" ...

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

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

  3. WebGL中深度碰撞方法总结

    z-fighting问题是三维渲染中常见的问题,本文根据实际工作中遇到的一些场景,进行了系统的总结 一个实际工作中的问题 当两个面离得太近就会发生深度碰撞问题,比如: 遇到深度检测问题,最重要的是先搞 ...

  4. WebGL入门教程(一)-初识webgl

    一.WebGL和传统网页的区别: 普通网页组成成分:HTML.JavaScript: WebGL网页组成成分:HTML5.JavaScript和GLSL ES(着色器语言 OpenGL ES): 二. ...

  5. 分享我收集的引擎、图形学、WebGL方面的电子资料

    本文分享我这一年以来收集的我认为比较经典的电子资料,希望能对大家有所帮助! 本文会不断更新! 目录 WebGL Insights OpenGL Insights Game Programming Pa ...

  6. WebGL学习(2) - 3D场景

    原文地址:WebGL学习(2) - 3D场景 经过前面WebGL学习(1) - 三角形的学习,我们已经掌握了webGL的基础知识,也已经能够画出最基本的图形,比如点,线,三角形,矩形等.有了2D绘图的 ...

  7. WebGL之延迟着色

    什么是延迟着色(Deferred Shading)?它是相对于正常使用的正向着色(Forward Shading)而言的,正向着色的工作模式:遍历光源,获取光照条件,接着遍历物体,获取物体的几何数据, ...

  8. OpenGL中的深度、深度缓存、深度测试及保存成图片

    1.深度 所谓深度,就是在openGL坐标系中,像素点Z坐标距离摄像机的距离.摄像机可能放在坐标系的任何位置,那么,就不能简单的说Z数值越大或越小,就是越靠近摄像机. 2.深度缓冲区 深度缓冲区原理就 ...

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

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

随机推荐

  1. websocket简单入门

    今天说起及时通信的时候,突然被问到时用推的方式,还是定时接受的方式,由于之前页面都是用传统的ajax处理,可能对ajax的定时获取根深蒂固了,所以一时之间没有相同怎么会出现推的方式呢?当被提及webs ...

  2. 20155202张旭 2016-2017-2 《Java程序设计》第2周学习总结

    20155202张旭 2016-2017-2 <Java程序设计>第2周学习总结 教材学习内容总结 第一,二章知识小节: git log 命令来查看 :提交历史 查看当前所处位置: pwd ...

  3. 20155212 2016-2017-2 《Java程序设计》第4周学习总结

    20155212 2016-2017-2 <Java程序设计>第4周学习总结 教材学习内容总结 Chapter 6 继承基本上就是避免多个类间重复定义共同行为. private成员会被继承 ...

  4. Week6课下作业

    课本练习p2.96 p2.97 浮点数 float 单精度浮点数(32位) double 双精度浮点数(64位) 练习对应书上内容P78--P81页 知识点是IEEE浮点表示 符号(sign):s决定 ...

  5. NetWork——关于HTTP、HTTPS的知识总结

    . )根据用户的当前的网络质量来判断下载什么质量的图片. 最后,如果觉得有所收获,请点下面的赞多多支持~谢谢各位

  6. day 1 异常基本功能

    1.什么是异常?程序出现的错误 In [1]: open('xxx.txt') ------------------------------------------------------------ ...

  7. 19、Java并发编程：线程间协作的两种方式：wait、notify、notifyAll和Condition

    Java并发编程:线程间协作的两种方式:wait.notify.notifyAll和Condition 在前面我们将了很多关于同步的问题,然而在现实中,需要线程之间的协作.比如说最经典的生产者-消费者 ...

  8. Mac OS 上 VIM 8.0 安装体验

    VIM 8.0 赶在中秋前发布 The best way to install Vim on Unix is to use the sources. This requires a compiler ...

  9. 【linux报错】-bash: xhost: command not found

    参考自:http://blog.csdn.net/csdnones/article/details/51513163,感谢原作者解决了我的问题. 执行xhost +,报以下错误,原因是因未没有安装相关 ...

  10. 手撕一个 Galgame 神器——Shub-Niggurath Project

    一.想法 Galgame 我们大概可以分为好用的 Galgame 和好玩的 Galgame,但是如果你把好玩的 Galgame 拿来用的话,有时候会十分让人着急.如果你躺在床上,一只手还在按压键盘实际 ...