效果：

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>WebGl  一个缓冲区传递颜色和坐标（矩形）</title>

</head>

<body>

<canvas id="myCanvas" width="500" height="300" style='border:1px solid red'></canvas>

</body>

<script>

    window.onload = function () {

        //获取上下文

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

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

        //定义矩形数据 并 将其储存在缓存对象

        var vertices = [

            -0.5,0.5,0.0,    0.0,0.0,1.0,//(x,y,z)(r,g,b)分别代表坐标和颜色

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

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

            0.5,0.5,0.0,     1.0,0.0,1.0,

        ];

        var indices = [3,2,1,3,1,0];

        var vertex_buffer = gl.createBuffer();

        gl.bindBuffer(gl.ARRAY_BUFFER,vertex_buffer);

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

        var Index_Buffer = gl.createBuffer();

        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,Index_Buffer);//注意  是  ELEMENT_ARRAY_BUFFER  不是  ARRAY_BUFFER

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

        //bufferData 参数详解

        //数据类型，可以是 gl.ARRAY_BUFFER , gl.ELEMENT_ARRAY_BUFFER

        //数据

        //缓冲类型，有这么几种可以供我们选择 GL_STREAM_DRAW , GL_STATIC_DRAW ,GL_DYNAMIC_DRAW

        //缓冲区的数据偶尔变动用GL_STREAM_DRAW ，缓冲区的数据不变用GL_STATIC_DRAW，缓冲区数据经常变动用GL_DYNAMIC_DRAW

        //创建和编译着色器程序

        var vertCode = 'attribute vec3 coordinates;'+

            'attribute vec3 color;'+

            'varying vec3 vColor;'+

            'void main(void) {' +

            ' gl_Position = vec4(coordinates, 1.0);' +

            'vColor = color;'+

            '}';

        var fragCode = 'precision mediump float;'+

            'varying vec3 vColor;'+

            'void main(void) {'+

            'gl_FragColor = vec4(vColor, 1.0);'+

            '}';

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

        gl.shaderSource(vertShader, vertCode);

        gl.compileShader(vertShader);

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

        gl.shaderSource(fragShader, fragCode);

        gl.compileShader(fragShader);

        var shaderProgram = gl.createProgram();

        gl.attachShader(shaderProgram, vertShader);

        gl.attachShader(shaderProgram, fragShader);

        gl.linkProgram(shaderProgram);

        gl.useProgram(shaderProgram);

        //与缓冲区对象相关联着色器程序

        // vertices中每个元素的字节数 ,这里是 float 类型, 所以是 4 个字节

        var bytes = new Float32Array(vertices).BYTES_PER_ELEMENT;

        var coord = gl.getAttribLocation(shaderProgram, "coordinates");

        gl.vertexAttribPointer(coord, 3, gl.FLOAT, false, bytes*6, 0);

        gl.enableVertexAttribArray(coord);

        var color = gl.getAttribLocation(shaderProgram, "color");

        gl.vertexAttribPointer(color, 3, gl.FLOAT, false, bytes*6, bytes*3) ;

        gl.enableVertexAttribArray(color);

        //绘制所需的对象

        gl.clearColor(0.5, 0.5, 0.5, 0.9);

        gl.enable(gl.DEPTH_TEST);

        gl.clear(gl.COLOR_BUFFER_BIT);

        gl.viewport(0,0,canvas.width,canvas.height);

        gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT,0);

    }

    // vertexAttribPointer(location, int size, enum type, bool normalized, long stride, long offset) 参数详解

    //Location − 它指定一个属性变量的存储位置。根据这个方案，必须通过由getAttribLocation()方法返回的值

    //Size − 它指定在缓冲对象每顶点部件的数量

    //Type − 它指定数据的类型

    //Normalized − 这是一个布尔值。如果为真，非浮动数据被归一化到[0,1]。否则，它被归一化到[-1,1]

    //Stride − 它指定不同顶点数据元素之间的字节数，或默认为零步幅（字节）

    //Offset − 它指定在缓冲器对象，以指示数据从顶点的哪个存储字节偏移(字节)

</script>

</html>

WebGl 一个缓冲区传递颜色和坐标（矩形）的更多相关文章

  1. WebGl 多缓冲区传递颜色和坐标（矩形）

    效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  2. WebGl 利用缓冲区对象画多个点

    效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  3. 推荐一个iOS关于颜色的库-Wonderful

    Wonderful 这个库主要是与UIColor息息相连的,其中一共包含四个子文件,UIColor+Wonderful,UIColor+Separate,SXColorGradientView,SXM ...

  4. Intent(三)向下一个活动传递数据

    向下传递活动很简单,可以我采用putExtra()方法的重载,把我们想要传递的数据暂时放在intent中,启动活动时从这里取就可以了. 首先我们在MainActivity(主活动)显式声明intent ...

  5. 如何在linux Shell脚本里面把一个数组传递到awk内部进行处理

    前段时间和几位同事讨论过一个问题:Shell脚本里面怎样把一个数组传递到awk内部进行处理? 当时没有找到方法.前两天在QQ群里讨论awk的时候,无意间又聊起这个话题.机缘巧合之下找到一个思路,特此分 ...

  6. Intent 隐式跳转，向下一个活动传递数据，向上一个活动返回数据。

    一.每个Intent只能指定一个action,多个Category. 使用隐式跳转,我们不仅可以跳转到自己程序内的活动,还可以启动其他程序的活动.使得Android多个程序之间的功能共享成为可能. 例 ...

  7. Android开发：向下一个activity传递数据，返回数据给上一个activity

    1.向下一个activity传递数据 activity1 Button button=(Button) findViewById(R.id.button1); button.setOnClickLis ...

  8. WPF 一个简单的颜色选择器

    原文:WPF 一个简单的颜色选择器 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/BYH371256/article/details/8340999 ...

  9. Android基础Activity篇——Intent向下一个活动传递数据

    1.向下一个活动传递数据 String data ="bilibilbilbilbili"; Intent intent1=new Intent(this,secondActivi ...

随机推荐

  1. Android实现图片下载并保存SD卡

    一.首先获取图片 //第一种获取图片的方法 String filePath = downloadUrl; //以下是取得图片的方法 取得的是InputStream,直接从InputStream生成bi ...

  2. ubuntu下面解压tar.gz包报错：tar命令报错： gzip: stdin: not in gzip format tar: Child returned status 1 tar: Error

    原因: 压缩包文件不完整(损坏或者其他原因) 比如今天下载的tomcat8,使用ubuntu的命令下载的 curl -O http://apache.mirrors.ionfish.org/tomca ...

  3. Sql server字段排序，如果字段是字符型的数字

    SELECT id , rownum FROM test ))),) ASC 1.如果想要根据字符型的数字排序,不建议转换成数字类型在order by,因为数据存在字符时,可能转换失败. 2.使用RI ...

  4. rabbitmq集群方案

    RabbitMQ的集群方案有以下几种: 1.普通的集群 exchange,buindling再所有的节点上都会保存一份,但是queue只会存储在其中的一个节点上,但是所有的节点都会存储一份queue的 ...

  5. Exchange 2007 前端 IIS 内存占用过高

    已经碰见了好几次,在Exchange2007的场景中,前端角色所在服务器的w3wp.exe进程总是占用大量内存,以至于触发反压组件,停止了正常的邮件流投递,造成业务中断. 终于下决心查一下到底问题问题 ...

  6. [BZOJ 3514]Codechef MARCH14 GERALD07加强版 (CHEF AND GRAPH QUERIES)

    [BZOJ3514] Codechef MARCH14 GERALD07加强版 (CHEF AND GRAPH QUERIES) 题意 \(N\) 个点 \(M\) 条边的无向图,\(K\) 次询问保 ...

  7. PDF文件如何转成markdown格式

    百度上根据pdf转makrdown为关键字进行搜索,结果大多数是反过来的转换,即markdown文本转PDF格式. 但是PDF转markdown的解决方案很少. 正好我工作上有这个需求,所以自己实现了 ...

  8. 使用python 操作liunx的svn，方案一

    在服务器中要做几个操作,使用命令操作svn,svn文件的创建,svn文件更新,并把指定demo路径,移动到创建的文件夹中,进行提交, # -*- coding:utf-8 -*- import pys ...

  9. 2、Sublime Text 3 快捷键（实用，快速换行等）

    选择类 Ctrl+D :选中光标所占的文本,继续操作则会选中下一个相同的文本. Alt+F3:选中文本按下快捷键,即可一次性选择全部的相同文本进行同时编辑.举个栗子:快速选中并更改所有相同的变量名.函 ...

  10. 【bzoj3456】 城市规划

    题目 一句话题意,无向连通图计数 技不如人,甘拜下风 设\(f_i\)表示\(i\)个节点构成的无向连通图数量 之后...之后就不会了 于是抄题解 考虑容斥 \[f_i=t_i-\sum_{j=1}^ ...