写在前面

建议先看下第一篇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. Machine Learning——吴恩达机器学习笔记（酷

    [1] ML Introduction a. supervised learning & unsupervised learning 监督学习:从给定的训练数据集中学习出一个函数(模型参数), ...

  2. 20155203 《信息安全技术》 实验2 Windows口令破解

    实验目的 了解Windows口令破解原理 对信息安全有直观感性认识 能够运用工具实现口令破解 系统环境 Windows 实验工具 LC5 SuperDic(密码字典生成器) 实验原理 口令破解方法 口 ...

  3. 20155209 2016-2017-2 《Java程序设计》第二周学习总结

    20155209 2016-2017-2 <Java程序设计>第二周学习总结 教材学习内容总结 类型总结:常用定义byte(符号%d):short(符号%d):int(符号%d):long ...

  4. 20155234 2016-2017-2第十周《Java学习笔记》学习总结

    20155234第十周<Java学习笔记>学习总结 教材学习内容总结 网络编程 在两个或两个以上的设备(例如计算机)之间传输数据.程序员所作的事情就是把数据发送到指定的位置,或者接收到指定 ...

  5. 20145226夏艺华 网络对抗技术EXP8 WEB基础实践

    20145226夏艺华 网络对抗技术EXP8 WEB基础实践 实验问题回答 1.什么是表单? 表单在网页中主要负责数据采集功能.一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CG ...

  6. 4361: isn

    4361: isn https://lydsy.com/JudgeOnline/problem.php?id=4361 分析: dp+容斥. 首先计算出每个长度有多少种子序列是非降的.这一步可以$n^ ...

  7. 同步备份工具之 rsync

    1.常用同步方法 SCP. NFS. SFTP. http. samba. rsync. drbd(基于文件系统同步,效率高) 2.rsync 介绍 rsync,英文全称是 remote synchr ...

  8. Java读取Propertity文件

    读取propertity 文件其实很简单,就是每次容易搞错文件路径,今天刚好项目又用到了,顺便记下来,以便以后参考: 目录如下: 代码如下: package com.infs.exam.process ...

  9. katalon系列十四：执行Windows命令&获取项目路径

    Katalon Studio中也可以运行Windows命令执行一些系统操作. 根据官方文档,在test case中输入命令:cmd = 'del E:\\shot\\*.xlsx E:\\shot\\ ...

  10. 导出Office365中的组及成员

    Set-ExecutionPolicy unrestricted $cred = Get-Credential  $session = New-PSSession -ConfigurationName ...