写在前面

建议先看下第一篇webgl学习笔记一-绘图单点

第一篇文章,介绍了如何用webgl绘图一个点。接下来本文介绍的是如何绘制多个点。形成一个面。

webgl提供了一种很方便的机制,即缓冲区对象，可以一次性地向着色器传入多个顶点的数据。缓存区对象是webgl系统的一块内存区域。

绘制多个点的流程

这里重点介绍缓冲区对象使用步骤

  • 创建缓冲区对象
gl.createBuffer()
  • 绑定缓冲区对象
gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer);
  • 将数据写入缓冲区对象
    gl.bufferData(gl.ARRAY_BUFFER,vertices,gl.STATIC_DRAW);
  • 将缓冲区对象分配给一个attribute变量
    gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
  • 开启attribute变量
    gl.enableVertexAttribArray(a_Position);

demo

-html



<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<canvas id="canvas" width="200px" height="200px"></canvas>

</body>

</html>
  • JavaScript
<script>

    window.onload = function () {

        //顶点着色器程序

        var VSHADER_SOURCE =

            "attribute vec4 a_Position;" +

            "void main() {" +

            //设置坐标

            "gl_Position = a_Position; " +

            "} ";

        //片元着色器

        var FSHADER_SOURCE =

            "void main() {" +

            //设置颜色

            "gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);" +

            "}";

        //获取canvas元素

        var canvas = document.getElementById('canvas');

        //获取绘制二维上下文

        var gl = canvas.getContext('webgl');

        if (!gl) {

            console.log("Failed");

            return;

        }

        //编译着色器

        var vertShader = gl.createShader(gl.VERTEX_SHADER);

        gl.shaderSource(vertShader, VSHADER_SOURCE);

        gl.compileShader(vertShader);

        var fragShader = gl.createShader(gl.FRAGMENT_SHADER);

        gl.shaderSource(fragShader, FSHADER_SOURCE);

        gl.compileShader(fragShader);

        //合并程序

        var shaderProgram = gl.createProgram();

        gl.attachShader(shaderProgram, vertShader);

        gl.attachShader(shaderProgram, fragShader);

        gl.linkProgram(shaderProgram);

        gl.useProgram(shaderProgram);

        //获取坐标点

        var a_Position = gl.getAttribLocation(shaderProgram, 'a_Position');

        if (a_Position < 0) {

            console.log('Failed to get the storage location of a_Position');

            return;

        }

        var n = initBuffers(gl, shaderProgram);

        if (n < 0) {

            console.log('Failed to set the positions');

            return;

        }

        // 清除指定<画布>的颜色

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

        // 清空 <canvas>

        gl.clear(gl.COLOR_BUFFER_BIT);

        gl.drawArrays(gl.TRIANGLES, 0, n);

    }

    function initBuffers(gl, shaderProgram) {

        var vertices = new Float32Array([

            0.0, 0.5, -0.5, -0.5, 0.5, -0.5

        ]);

        var n = 3;//点的个数

        //创建缓冲区对象

        var vertexBuffer = gl.createBuffer();

        if (!vertexBuffer) {

            console.log("Failed to create the butter object");

            return -1;

        }

        //将缓冲区对象绑定到目标

        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

        //向缓冲区写入数据

        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

        //获取坐标点

        var a_Position = gl.getAttribLocation(shaderProgram, 'a_Position');

        //将缓冲区对象分配给a_Position变量

        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);

        //连接a_Position变量与分配给它的缓冲区对象

        gl.enableVertexAttribArray(a_Position);

        return n;

    }

</script>

写在最后

  博客

webgl学习笔记二-绘图多点的更多相关文章

  1. WebGL学习笔记二——绘制基本图元

    webGL的基本图元点.线.三角形 gl.drawArrays(mode, first,count) first,代表从第几个点开始绘制即顶点的起始位置 count,代表绘制的点的数量. mode,代 ...

  2. WebGL学习笔记二

    前一章就是第二章主要学的是通过WebGL实现先是在webGL内赋值,但是不实用后来通过定义attribute和uniform存储限定符来将javascript中的数据传到webGL中,大致的流程是1. ...

  3. webgl学习笔记一-绘图单点

    写在前面   WebGl(全称:Web Graphics Library : web图形库) 是基于OpenGL ES 2.0的3D绘图协议.   WebGL完美地解决了现有的Web交互式三维动画的两 ...

  4. webgl学习笔记五-纹理

    写在前面 建议先阅读下前面我的三篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 webgl学习笔记三-平移旋转缩放 术语 : 纹理 :图像 图形装配区域 :顶点着色器顶点坐标 ...

  5. webgl学习笔记四-动画

    写在前面 建议先阅读下前面我的三篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 webgl学习笔记三-平移旋转缩放   下面我们将讲解下如何让一个正方形动起来~不断擦除和重绘 ...

  6. webgl学习笔记三-平移旋转缩放

    写在前面 建议先阅读下前面我的两篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 平移 1.关键点说明 顶点着色器需要加上 uniform vec4 u_Translation ...

  7. WPF的Binding学习笔记(二)

    原文: http://www.cnblogs.com/pasoraku/archive/2012/10/25/2738428.htmlWPF的Binding学习笔记(二) 上次学了点点Binding的 ...

  8. AJax 学习笔记二(onreadystatechange的作用)

    AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...

  9. [Firefly引擎][学习笔记二][已完结]卡牌游戏开发模型的设计

    源地址:http://bbs.9miao.com/thread-44603-1-1.html 在此补充一下Socket的验证机制:socket登陆验证.会采用session会话超时的机制做心跳接口验证 ...

随机推荐

  1. AvalonEdit-基于WPF的代码显示控件

    AvalonEdit是基于WPF的代码显示控件,项目地址:https://github.com/icsharpcode/AvalonEdit,支持C#,javascript,C++,XML,HTML, ...

  2. 20155211 2016-2017-2《Java程序设计》课程总结

    20155211 2016-2017-2<Java程序设计>课程总结 (按顺序)每周作业链接汇总 预备作业1:对师生关系的理解 预备作业2:熟能生巧及学习c语言的心的 预备作业3:关于假期 ...

  3. 20155318 《Java程序设计》实验三 （敏捷开发与XP实践）实验报告

    20155318 <Java程序设计>实验三 (敏捷开发与XP实践)实验报告 实验内容 XP基础 XP核心实践 相关工具 实验步骤 (一)敏捷开发与XP 软件工程是把系统的.有序的.可量化 ...

  4. 20155322 2017-2018-1《信息安全系统设计》第九周 Linux命令：pwd命令学习与简单实现

    pwd命令学习 功能 Linux中用 pwd 命令来查看"当前工作目录"的完整路径. 格式 pwd [选项] 实例 用 pwd 命令查看默认工作目录的完整路径: 用 pwd 命令查 ...

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

    20155334 2016-2017-2 <Java程序设计>第十周学习总结 教材学习内容总结 1.计算机网络概述 (1)路由器和交换机组成了核心的计算机网络,计算机只是这个网络上的节点以 ...

  6. banwagon vps装wordpress

    http://www.banwagong.com/213.html http://www.banwagong.com/225.html http://www.banwagong.com/230.htm ...

  7. [BZOJ4002][JLOI2015]有意义的字符串-[快速乘法+矩阵乘法]

    Description 传送门 Solution 由于这里带了小数,直接计算显然会爆掉,我们要想办法去掉小数. 而由于原题给了暗示:b2<=d<=(b+1)2,我们猜测可以利用$(\fra ...

  8. 解决非controller使用，@Autowired或者@Resource注解注入Mapper接口为null的问题

    知识点:在service层中注入其它的service接口或者mapper接口都是可以的 但是在封装的Utils工具类中或者非controller普通类中使用@Autowired@Resource注解注 ...

  9. Django模型层：单表操作

    一 ORM简介 查询数据层次图解:如果操作mysql,ORM是在pymysq之上又进行了一层封装

  10. Sublime Text3.0的安装

    Sublime Text是一款轻量级的易于使用的前端编写软件,个人比较推荐. 找到Sublime的官网,下载对应的版本后,点击安装.安装完成后需要下载相应的插件才能进行更加 有效率的开发工作.编写前端 ...