传统的画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. Go 入门 - 包，函数和变量

    主要内容来自中文版的官方教程Go语言之旅 目的为总结要点 包,函数和变量 包 import 语法,多个用括号换行扩起,包之间不需要间隔符,用引号引起 import ( "fmt" ...

  2. python+MongoDB使用示例

    本博客起源于博主的大三NoSQL课程设计,采用python+MongoDB结合方式,将数据从txt文件导入MongoDB之中,再将其取出以作图.主要技术是采用python与MongoDB结合存储读取方 ...

  3. Spring事务控制

    我们在实际业务场景中,经常会遇到数据频繁修改读取的问题.在同一时刻,不同的业务逻辑对同一个表数据进行修改,这种冲突很可能造成数据不可挽回的错乱,所以我们需要用事务来对数据进行管理. 1. 到底什么是事 ...

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

    20155235 2016-2017-2 <Java程序设计>第十周学习总结 教材学习内容总结 计算机网络 计算机网络由若干结点和连接这些结点的链路组成.网络中的结点可以是计算机.集线器. ...

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

    20155322 2016-2017-2 <Java程序设计>第2周学习总结 教材学习内容总结 本周按照教学安排学习教材的第三章,下面简单的概括一下我的学习总结: 第三章的主要内容是有关于 ...

  6. DataGrid中的DataGridCheckBoxColumn用法 ..

    <my:DataGridCheckBoxColumn Header=" /> private void btnDeleteNote_Click(object sender, Ro ...

  7. 如何注册Uber司机(全国版最新最详细注册流程)

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://didi-uber.com/archiv ...

  8. 【CF543E】Listening to Music

    [CF543E]Listening to Music 题面 洛谷 题目大意 给你一个长度为\(n\)序列\(a_i\),和一个常数\(m\),定义一个函数\(f(l,x)\)为\([l,l+m-1]\ ...

  9. Mac 安装PHP Redis 扩展

    其实 Mac 安装 Redis 还是很简单,以下为个人搭建配置.注意:文章中的“*”代表任意版本号 安装 Redis 服务 安装 brew install redis 使用 # 启动 redis-se ...

  10. Struts 2（二）：使用Struts2

    本文简单描述如何在Eclipse中使用使用Struts2,并介绍一下Struts2的配置文件 注:Struts2默认需要Java 5.0及其以上版本的运行环境支持,Web容器需要支持Servlet 2 ...