WEBGL学习【七】画布绘图

主要是对WEBGL的绘图部分进行了进一步加强的认识和理解

<!DOCTYPE HTML>

<html lang="en">

<head>

    <title>WEBGL高级编程----绘制六边形</title>

    <meta charset="utf-8">

    <script id="shader-vs" type="x-shader/x-vertex">

      attribute vec3 aVertexPosition;

      attribute vec4 aVertexColor;

      varying vec4 vColor;

      void main() {

        vColor = aVertexColor;

        gl_Position = vec4(aVertexPosition, 1.0);

      }

    </script>

    <script id="shader-fs" type="x-shader/x-fragment">

      precision mediump float;

      varying vec4 vColor;

      void main() {

        gl_FragColor = vColor;

      }

    </script>

    <!--引入我的库文件-->

    <script src="./lib/webgl-debug.js"></script>

    <script type="text/javascript">

        var gl;

        var canvas;

        var shaderProgram;

        //六边形顶点缓冲区

        var hexagonVertexBuffer;

        //坐标系缓冲区

        var xyCordBuffer;

        //三角形顶点位置缓冲区

        var triangleVertexBuffer;

        var triangleVertexBufferTwo;

        //三角形颜色缓冲区

        var triangleVertexColorBuffer;

        //三角形带1

        var stripVertexBuffer;

        //创建我的上下文句柄

        function createGLContext(canvas) {

            var names = ["webgl", "experimental-webgl"];

            var context = null;

            for (var i = 0; i < names.length; i++) {

                try {

                    context = canvas.getContext(names[i]);

                } catch (e) {

                }

                if (context) {

                    break;

                }

            }

            if (context) {

                context.viewportWidth = canvas.width;

                context.viewportHeight = canvas.height;

            } else {

                alert("Failed to create WebGL context!");

            }

            return context;

        }

        //从JavaScript代码中通过DOM加载着色器

        function loadShaderFromDOM(id) {

            var shaderScript = document.getElementById(id);

            // If we don't find an element with the specified id

            // we do an early exit

            if (!shaderScript) {

                return null;

            }

            // Loop through the children for the found DOM element and

            // build up the shader source code as a string

            var shaderSource = "";

            var currentChild = shaderScript.firstChild;

            while (currentChild) {

                if (currentChild.nodeType == 3) { // 3 corresponds to TEXT_NODE

                    shaderSource += currentChild.textContent;

                }

                currentChild = currentChild.nextSibling;

            }

            var shader;

            if (shaderScript.type == "x-shader/x-fragment") {

                shader = gl.createShader(gl.FRAGMENT_SHADER);

            } else if (shaderScript.type == "x-shader/x-vertex") {

                shader = gl.createShader(gl.VERTEX_SHADER);

            } else {

                return null;

            }

            gl.shaderSource(shader, shaderSource);

            gl.compileShader(shader);

            if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {

                alert(gl.getShaderInfoLog(shader));

                return null;

            }

            return shader;

        }

        //设置我的着色器

        function setupShaders() {

            var vertexShader = loadShaderFromDOM("shader-vs");

            var fragmentShader = loadShaderFromDOM("shader-fs");

            shaderProgram = gl.createProgram();

            gl.attachShader(shaderProgram, vertexShader);

            gl.attachShader(shaderProgram, fragmentShader);

            gl.linkProgram(shaderProgram);

            if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {

                alert("Failed to setup shaders");

            }

            gl.useProgram(shaderProgram);

            shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");

            shaderProgram.vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor");

            gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);

        }

        //设置我的缓冲区

        function setupBuffers() {

            //创建六边形

            hexagonVertexBuffer = gl.createBuffer();

            gl.bindBuffer(gl.ARRAY_BUFFER, hexagonVertexBuffer);

            var hexagonVertices = [

                -0.3, 0.6, 0.0, //v0

                -0.4, 0.8, 0.0, //v1

                -0.6, 0.8, 0.0, //v2

                -0.7, 0.6, 0.0, //v3

                -0.6, 0.4, 0.0, //v4

                -0.4, 0.4, 0.0, //v5

                -0.3, 0.6, 0.0, //v6

            ];

            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(hexagonVertices), gl.STATIC_DRAW);

            hexagonVertexBuffer.itemSize = 3;

            hexagonVertexBuffer.numberOfItems = 7;

            //绘制一个坐标系

            xyCordBuffer = gl.createBuffer();

            gl.bindBuffer(gl.ARRAY_BUFFER, xyCordBuffer);

            var xyCordVertices = [

                -1.0, 0.0, 0.0,

                1.0, 0.0, 0.0,

                0.0, -1.0, 0.0,

                0.0, 1.0, 0.0

            ];

            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(xyCordVertices), gl.STATIC_DRAW);

            xyCordBuffer.itemSize = 3;

            xyCordBuffer.numberOfItems = 4;

            //绘制一个三角形

            triangleVertexBuffer = gl.createBuffer();

            gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexBuffer);

            var triangleVertices = [

                0.3, 0.4, 0.0, //v0

                0.7, 0.4, 0.0, //v1

                0.5, 0.8, 0.0, //v2

            ];

            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW);

            triangleVertexBuffer.itemSize = 3;

            triangleVertexBuffer.numberOfItems = 3;

            //绘制一个三角形

            triangleVertexBufferTwo = gl.createBuffer();

            gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexBufferTwo);

            var triangleVerticesTwo = [

                0.0, 0.2, 0.0, //v0

                -0.2, -0.2, 0.0, //v1

                0.2, -0.2, 0.0, //v2

            ];

            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVerticesTwo), gl.STATIC_DRAW);

            triangleVertexBufferTwo.itemSize = 3;

            triangleVertexBufferTwo.numberOfItems = 3;

            //创建三角形颜色数组

            triangleVertexColorBuffer = gl.createBuffer();

            gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer);

            var colors = [

                1.0, 0.0, 0.0, 1.0, //v0

                0.0, 1.0, 0.0, 1.0, //v1

                0.0, 0.0, 1.0, 1.0  //v2

            ];

            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);

            triangleVertexColorBuffer.itemSize = 4;

            triangleVertexColorBuffer.numberOfItems = 3;

            //绘制一个三角形带1

            stripVertexBuffer = gl.createBuffer();

            gl.bindBuffer(gl.ARRAY_BUFFER, stripVertexBuffer);

            //绘制两条

            var stripVertices = [

                -0.5, 0.2, 0.0, //v0

                -0.4, 0.0, 0.0, //v1

                -0.3, 0.2, 0.0, //v2

                -0.2, 0.0, 0.0, //v3

                -0.1, 0.2, 0.0, //v4

                0.0, 0.0, 0.0, //v5

                0.1, 0.2, 0.0, //v6

                0.2, 0.0, 0.0, //v7

                0.3, 0.2, 0.0, //v8

                0.4, 0.0, 0.0, //v9

                0.5, 0.2, 0.0, //v10

                // start second strip

                -0.5, -0.3, 0.0, //v11

                -0.4, -0.5, 0.0, //v12

                -0.3, -0.3, 0.0, //v13

                -0.2, -0.5, 0.0, //v14

                -0.1, -0.3, 0.0, //v15

                0.0, -0.5, 0.0, //v16

                0.1, -0.3, 0.0, //v17

                0.2, -0.5, 0.0, //v18

                0.3, -0.3, 0.0, //v19

                0.4, -0.5, 0.0, //v20

                0.5, -0.3, 0.0  //v21

            ];

            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(stripVertices), gl.STATIC_DRAW);

            stripVertexBuffer.itemSize = 3;

            stripVertexBuffer.numberOfItems = 22;

            //创建三角形条带缓冲区（元素数组缓冲）

            stripElementBuffer = gl.createBuffer();

            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, stripElementBuffer);

            //注意顶点索引的数量与【组绕顺序】有关，默认是逆时针方向为正方向

            //【记住：如果三角形数量为奇数，就必须增加三个索引，从而会出现5个退化三角形；

            //      如果三角形数量为偶数，就必须增加两个索引， 从而会出现4个退化三角形；

            //      否则，就会出现组绕三角形的逆时针/顺时针混乱的问题【记住了嘛？】

            // 】

            var indices = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10,

                10, 11, 11,// 3 extra indices for the degenerate triangles（这里共计有五个退化了的三角形）

                11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21];

            gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);

            stripElementBuffer.numberOfItems = 25;

        }

        //绘图函数

        function draw() {

            //设置视口，清空深度缓存

            gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);

            gl.clear(gl.COLOR_BUFFER_BIT);

            // Draw the hexagon

            // We disable the vertex attrib array since we want to use a

            // constant color for all vertices in the hexagon

            //将顶点的颜色设置为一个常量

            gl.disableVertexAttribArray(shaderProgram.vertexColorAttribute);

            //将顶点颜色设置为黑色

            gl.vertexAttrib4f(shaderProgram.vertexColorAttribute, 0.0, 0.0, 1.0, 1.0);

            //把六边形的坐标传给顶点着色器

            gl.bindBuffer(gl.ARRAY_BUFFER, hexagonVertexBuffer);

            gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,

                hexagonVertexBuffer.itemSize, gl.FLOAT, false, 0, 0);

            //绘制首尾相连的图形

            gl.drawArrays(gl.LINE_STRIP, 0, hexagonVertexBuffer.numberOfItems);

            //开始传值到顶点着色器

            gl.disableVertexAttribArray(shaderProgram.vertexColorAttribute);

            //这里可以给我的坐标系指定一个常量颜色（红色）

            gl.vertexAttrib4f(shaderProgram.vertexColorAttribute, 1.0, 0.0, 0.0, 1.0);

            gl.bindBuffer(gl.ARRAY_BUFFER, xyCordBuffer);

            gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,

                xyCordBuffer.itemSize, gl.FLOAT, false, 0, 0);

            gl.drawArrays(gl.LINES, 0, xyCordBuffer.numberOfItems);

            //绘制三角形(如果要从一个颜色数组去设置顶点的颜色这里需要开启，如果要通过常量去设置颜色，这里就需要关闭)

            gl.disableVertexAttribArray(shaderProgram.vertexColorAttribute);

            gl.vertexAttrib4f(shaderProgram.vertexColorAttribute, 0.0, 1.0, 0.0, 1.0);

            gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexBuffer);

            //每一个位置信息需要triangleVertexBuffer.itemSize个参数信息来表示

            gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,

                triangleVertexBuffer.itemSize, gl.FLOAT, false, 0, 0);

            gl.drawArrays(gl.TRIANGLES, 0, triangleVertexBuffer.numberOfItems);

            //再次绘制一个三角形（用颜色数组来绘制）

            gl.enableVertexAttribArray(shaderProgram.vertexColorAttribute);

            //传递顶点位置

            gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexBufferTwo);

            gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,

                triangleVertexBufferTwo.itemSize, gl.FLOAT, false, 0, 0);

            //传递顶点颜色

            gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer);

            gl.vertexAttribPointer(shaderProgram.vertexColorAttribute,

                triangleVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0);

            gl.drawArrays(gl.TRIANGLES, 0, triangleVertexBuffer.numberOfItems);

            //开始绘制三角形带1

            /*gl.disableVertexAttribArray(shaderProgram.vertexColorAttribute);

            gl.bindBuffer(gl.ARRAY_BUFFER, stripVertexBuffer);

            gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,

                stripVertexBuffer.itemSize, gl.FLOAT, false, 0, 0);

            gl.vertexAttrib4f(shaderProgram.vertexColorAttribute, 1.0, 1.0, 0.0, 1.0);

            gl.drawArrays(gl.TRIANGLES, 0, stripVertexBuffer.numberOfItems);*/

            //begin to drawElements()

            //first put the vertexBuffer to the shader

            gl.disableVertexAttribArray(shaderProgram.vertexColorAttribute);

            gl.bindBuffer(gl.ARRAY_BUFFER, stripVertexBuffer);

            gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,

                stripVertexBuffer.itemSize, gl.FLOAT, false, 0, 0);

            gl.vertexAttrib4f(shaderProgram.vertexColorAttribute, 1.0, 1.0, 0.0, 1.0);

            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, stripElementBuffer);

            gl.drawElements(gl.TRIANGLE_STRIP, stripElementBuffer.numberOfItems, gl.UNSIGNED_SHORT, 0);

            //set the color of help line(black color )

            gl.vertexAttrib4f(shaderProgram.vertexColorAttribute, 1.0, 0.0, 0.0, 1.0);

            // Draw help lines to easier see the triangles

            // that build up the triangle-strip

            gl.drawArrays(gl.LINE_STRIP, 0, 11);

            gl.drawArrays(gl.LINE_STRIP, 11, 11);

        }

        function startup() {

            canvas = document.getElementById("myGLCanvas");

            gl = WebGLDebugUtils.makeDebugContext(createGLContext(canvas));

            setupShaders();

            setupBuffers();

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

            //逆时针方向是前面

            gl.frontFace(gl.CW);

            //激活背面剔除功能

            gl.enable(gl.CULL_FACE);

            //WEBGL剔除背面三角形

            gl.cullFace(gl.FRONT);

            draw();

        }

    </script>

</head>

<body onload="startup();">

<canvas id="myGLCanvas" width="500" height="500" style="border: 2px solid springgreen;"></canvas>

</body>

</html>

WEBGL学习【七】画布绘图的更多相关文章

webgl学习笔记二-绘图多点
写在前面建议先看下第一篇webgl学习笔记一-绘图单点第一篇文章,介绍了如何用webgl绘图一个点.接下来本文介绍的是如何绘制多个点.形成一个面. webgl提供了一种很方便的机制,即缓冲区对象, ...
webgl学习笔记一-绘图单点
写在前面 WebGl(全称:Web Graphics Library : web图形库) 是基于OpenGL ES 2.0的3D绘图协议. WebGL完美地解决了现有的Web交互式三维动画的两 ...
webgl学习笔记三-平移旋转缩放
写在前面建议先阅读下前面我的两篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点平移 1.关键点说明顶点着色器需要加上 uniform vec4 u_Translation ...
webgl学习笔记五-纹理
写在前面建议先阅读下前面我的三篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 webgl学习笔记三-平移旋转缩放术语 : 纹理 :图像图形装配区域 :顶点着色器顶点坐标 ...
webgl学习笔记四-动画
写在前面建议先阅读下前面我的三篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 webgl学习笔记三-平移旋转缩放下面我们将讲解下如何让一个正方形动起来~不断擦除和重绘 ...
WebGL学习(1) - 三角形
原文地址:WebGL学习(1) - 三角形还记得第一次看到canvas的粒子特效的时候,真的把我给惊艳到了,原来在浏览器也能做出这么棒的效果.结合<HTML5 Canvas核心技术>和网 ...
WebGL学习(2) - 3D场景
原文地址:WebGL学习(2) - 3D场景经过前面WebGL学习(1) - 三角形的学习,我们已经掌握了webGL的基础知识,也已经能够画出最基本的图形,比如点,线,三角形,矩形等.有了2D绘图的 ...
WebGL学习笔记二——绘制基本图元
webGL的基本图元点.线.三角形 gl.drawArrays(mode, first,count) first,代表从第几个点开始绘制即顶点的起始位置 count,代表绘制的点的数量. mode,代 ...
WebGL学习之纹理盒
原文地址:WebGL学习之纹理盒我们之前已经学习过二维纹理 gl.TEXTURE_2D,而且还使用它实现了各种效果.但还有一种立方体纹理 gl.TEXTURE_CUBE_MAP,它包含了6个纹理代表 ...
WebGL学习(3) - 3D模型
原文地址:WebGL学习(3) - 3D模型相信很多人是以创建逼真酷炫的三维效果为目标而学习webGL的吧,首先我就是

随机推荐

[bzoj3307]雨天的尾巴_线段树合并
雨天的尾巴 bzoj-3307 题目大意:N个点,形成一个树状结构.有M次发放,每次选择两个点x,y对于x到y的路径上(含x,y)每个点发一袋Z类型的物品.完成所有发放后,每个点存放最多的是哪种物品. ...
洛谷 P2633 Count on a tree
P2633 Count on a tree 题目描述给定一棵N个节点的树,每个点有一个权值,对于M个询问(u,v,k),你需要回答u xor lastans和v这两个节点间第K小的点权.其中last ...
js面向对象多种创建对象方法小结
转自js面向对象多种创建对象方法小结 1.对象字面量 var clock={ hour:12, minute:10, second:10, showTime:function(){ alert(th ...
C#版winform实现UrlEncode
在Asp.net中可以使用Server.HTMLEncode和Server.URLEncode 将文本或URL的特殊字符编码,但在控制台或Winform程序中没有办法使用到这些方法, 解决办法:右击项 ...
安装10gR2的硬件要求
1.至少1G的RAM. 2.RAM与swap关系: RAM swap 512M以上 2*RAM (非常奇怪.至少1G的RAM.还写512的 ...
Linux 管道是什么？原理
简单点就是说,一个命令的结果作为另外一个命令(结果)的输入 . 管道是linux提供的一种常见的进程通信工具,也是很多shell命令能够灵活组合产生强大用途的一个重要工具. 管道是什么? 管道,顾名思 ...
BNU 51638 Air Hockey 三分二分法
Air Hockey 无聊的过河船同学和无聊的胀鱼同学非常喜欢打桌上冰球(其实只是喜欢听球碰撞时的声音).在无聊的一天,无聊的过河船同学想到了一个无聊的玩法:两人同时将两个球放桌面上,同时击出,然 ...
ETL （数据仓库技术）
ETL,是英文 Extract-Transform-Load 的缩写,用来描述将数据从来源端经过抽取(extract).转换(transform).加载(load)至目的端的过程.ETL一词较常用在数 ...
shp系列（四）——利用C++进行Shx文件的读（打开）
1.shx文件的基本情况 shx文件又叫索引文件,主要包含坐标文件的索引信息,文件中每个记录包含对应的坐标文件记录距离坐标文件的初始位置的偏移量.通过索引文件可以很方便地在坐标文件中定位到指定目标的坐 ...
AWS S3 对象存储服务
虽然亚马逊云非常牛逼,虽然亚马逊云财大气粗,虽然亚马逊用的人也非常多,可是这个文档我简直无法接受,特别是客服,令人发指的回复速度,瞬间让人无语,可是毕竟牛逼.忍了,躺一次坑而已 1.图片上传 1.1 ...

WEBGL学习【七】画布绘图

WEBGL学习【七】画布绘图的更多相关文章

随机推荐

热门专题