传统的画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. cgywin下 hadoop运行 问题

    1 cgywin下安装hadoop需要配置JAVA_home变量 ,  此时使用 window下安装的jdk就可以  ,但是安装路径不要带有空格.否则会不识别. 2  在Window下启动Hadoop ...

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

    20155204 2016-2017-2 <Java程序设计>第4周学习总结 教材学习内容总结 继承是类与类之间的联系,接口是方法与类之间的联系,多态就是指利用接口和继承来派生许多类. 有 ...

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

    20155226 2016-2017-2 <Java程序设计>第10周学习总结 教材学习内容总结 网络编程 网络编程就是在两个或两个以上的设备(例如计算机)之间传输数据. 程序员所作的事情 ...

  4. 20155305乔磊2016-2017-2《Java程序设计》第三周学习总结

    20155305乔磊 2016-2017-2 <Java程序设计>第三周学习总结 教材学习内容总结 对象(Object):存在的具体实体,具有明确的状态和行为 类(Class):具有相同属 ...

  5. 20155328 2016-2017-2 《Java程序设计》第四周学习总结

    学号 2016-2017-2 <Java程序设计>第四周学习总结 教材学习内容总结 继承:避免多各类间重复定义行为,extends关键字表示继承后再扩充原本没有的行为.如果没有使用exte ...

  6. 20155336 《Java程序设计》实验二 （Java面向对象程序设计）实验报告

    20155336 <Java程序设计>实验二 (Java面向对象程序设计)实验报告 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉 ...

  7. C#：在AnyCPU模式下使用CefSharp

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 本篇博客讲述如何在AnyCPU模式下使用CefSharp 因为在某些情况下,不得不用AnyCPU,但是CefS ...

  8. sql server 按月对数据表进行分区

    当某张数据表数据量较大时,我们就需要对该表进行分区处理,以下sql语句,会将数据表按月份,分为12个分区表存储数据,废话不多说,直接上脚本: use [SIT_L_TMS] --开启 XP_CMDSH ...

  9. 《Angular4从入门到实战》学习笔记

    <Angular4从入门到实战>学习笔记 腾讯课堂:米斯特吴 视频讲座 二〇一九年二月十三日星期三14时14分 What Is Angular?(简介) 前端最流行的主流JavaScrip ...

  10. Spring Cloud（三）：服务提供与调用 Eureka【Finchley 版】

    Spring Cloud(三):服务提供与调用 Eureka[Finchley 版]  发表于 2018-04-15 |  更新于 2018-05-07 |  上一篇文章我们介绍了 Eureka 服务 ...