传统的画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. 在Eclipse上编写Go项目

     Note for users in China Note: if you are behind the Great Firewall of China, you are very likely to ...

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

    20155306 2006-2007-2 <Java程序设计>第1周学习总结 教材学习内容总结 第一章 Java有三大平台:Java EE, Java SE, Java ME Java S ...

  3. 20155316 实验三《敏捷开发与XP实践》实验报告

    实验1 实验内容 在IDEA中使用工具(Code->Reformate Code)把下面代码重新格式化,再研究一下Code菜单,找出一项让自己感觉最好用的功能.提交截图,加上自己学号水印. pu ...

  4. ubuntu下刻录优盘的命令

    fdisk -l  找到优盘为/dev/sdb4 sudo dd if=/home/alex/Desktop/kali-linux-2016.1-amd64.iso of=/dev/sdb4

  5. aspnetcore 2.1 发布到树莓派3linux的艰辛路程

    发布至docker for windows. 提示: image operating system "windows" cannot be used on this platfor ...

  6. ConfigurationManager 读写AppSettings键值对

    using System; using System.Configuration; namespace ConsoleApplication1 { class Program { static voi ...

  7. 【LG4067】[SDOI2016]储能表

    [LG4067][SDOI2016]储能表 题面 洛谷 题解 这种$n$.$m$出奇的大的题目一看就是数位$dp$啦 其实就是用一下数位$dp$的套路 设$f[o][n][m][k]$表示当前做到第$ ...

  8. 9.15 DP合集水表

    9.15 DP合集水表 显然难了一些啊. 凸多边形的三角剖分 瞄了一眼题解. 和蛤蛤的烦恼一样,裸的区间dp. 设f[i][j]表示i~j的点三角剖分最小代价. 显然\(f[i][i+1]=0,f[i ...

  9. eclipse jetty debug

    一.    1, Eeclipse中选择 Run --> External Tools --> External Tools Configurations 然后new一个Program项. ...

  10. 微服务介绍及Asp.net Core实战项目系列之微服务介绍

    0.目录 整体架构目录:ASP.NET Core分布式项目实战-目录 一.微服务选型 在做微服务架构的技术选型的时候,我们以“无侵入”和“社区活跃”为主要的考量点,将来升级为原子服务架构.量子服务架构 ...