写在前面

建议先看下第一篇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. 【 C 】高级字符串查找之查找标记（token）函数 strtok介绍

    我的csdn博客 一个字符串常常包含几个单独的部分,它们彼此被分隔开来.每次为了处理这些部分,你首先必须把它们从字符串中抽取出来. 这个任务有#include<string.h>中的str ...

  2. 10 Quality Free Flat Icon Sets for Your Designs

    Subscribe It’s clear that flat design has gained great popularity in recent years. This is hardly su ...

  3. 20155210潘滢昊 2016-2017-2《Java程序设计》第一周学习总结

    20155210 2016-2017-2<Java程序设计>第一周学习总结 教材学习内容总结 1.1.1: 本节主要讲了Java的由来,1995年5月23日是Java公认的诞生日.还有版本 ...

  4. 20155308 实验四 Android开发基础

    20155308 实验四 Android开发基础 实验内容 基于Android Studio开发简单的Android应用并部署测试; 了解Android.组件.布局管理器的使用: 掌握Android中 ...

  5. Linux 用C语言实现简单的shell(1)

    发一波福利,操作系统的实验内容,大家可以借鉴一下,不过我的代码可能也存在一定的问题. 因为在一开始老师是一节一节课教的,当时并不知道后面还会用输入输出重定向,管道等一系列问题,我的兴趣也不在这个方面也 ...

  6. nginx重启无法找到PId的解决办法

    nginx停止的时候,出现了如下错误 nginx: [error] open() "/export/servers/nginx/logs/nginx.pid" failed (2: ...

  7. day6 角点检测

    1.Harris角点检测 # coding=utf-8 import cv2 import numpy as np filename = 'pic5.png' #1.读入一个灰度图像 img = cv ...

  8. cogs2554 [福利]可持久化线段树

    cogs2554 [福利]可持久化线段树 原题链接 每次修改复制一遍就行了... 1A!!! // It is made by XZZ #include<cstdio> #include& ...

  9. AWVS11提取规则文件

    在这里给大家分享一个获取AWVS规则文件的思路.  目前我提取的是17年4月份的扫描规则.   后面如果规则更新,可以自行提取 官网:   https://www.acunetix.com/vulne ...

  10. 在docker中执行linux shell命令

    在docker中执行shell命令,需要在命令前增加sh -c,例如: docker run ubuntu sh -c 'cat /data/a.txt > b.txt' 否则,指令无法被正常解 ...