传统的画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. SQL学习笔记：高级教程

    SQL语法 LIMIT select col from table limit number select * from table limit number LIKE select * from t ...

  3. OpenFlow1.3.3 学习记录（持续更新）

    OpenFlow1.3.3 学习记录(持续更新) 正在学习OpenFlow1.3,该篇笔记将日常更新,主要内容大致为官方文档的总结与翻译. 交换机组件 按照优先级顺序进行包匹配,如果匹配到流表项,则执 ...

  4. 覆盖Django mysql model中save方法时碰到的一个数据库更新延迟问题

    最近有一个需求,通过django的admin后台,可以人工配置5张表的数据,这些数据进行一些业务规则处理后会统一成一份数据缓存在一个cache之中供服务端业务访问,因而任何一张表的数据更新(增.删.改 ...

  5. 图论-最短路径--3、SPFA算法O(kE)

    SPFA算法O(kE) 主要思想是:     初始时将起点加入队列.每次从队列中取出一个元素,并对所有与它相邻的点进行修改,若某个相邻的点修改成功,则将其入队.直到队列为空时算法结束.     这个算 ...

  6. DSP6748学习笔记-190116

    1. PSC是什么?电源和睡眠控制器.一个PSC模块由一个全局PSC和一组本地PSC组成,那么又是什么? PSCModuleControl(SOC_PSC_0_REGS, , PSC_POWERDOM ...

  7. idea里绝对不要直接复制文件到项目中的另一处

    否则那样会将使用被复制文件的那些地方 文件名会变成复制后的那个 而路径是原来的 所以会导致找不到文件 所以绝对不要直接复制文件或者包或者目录到项目中的另一处 需要时应该新建文件 把代码复制进去 这种事 ...

  8. 【mysql经典题目】行转列

    参考:http://www.cnblogs.com/h07061108/p/mysql_questions.html#3806338 实现如下效果 CREATE TABLE IF NOT EXISTS ...

  9. js插件实现一键复制功能

    clipboard.js 可以实现纯 JS 的从浏览器复制文本到系统剪贴板的功能. 使用方法: 1. 下载 clipboard.js,并在页面中引入该插件.clipboard.js 下载地址: htt ...

  10. webgl 包围盒子

    包围盒子是鼠标选择物体的一种实现方式,当从相机出发,经过鼠标点形成的射线和物体的包围盒子相交时,就代表物体被选中