效果：

代码：

<!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. sqlserver变量的生周期

    在声明一个变量后,一旦遇到分号或者go,生命周期就结 DECLARE @num1 int --go ; --go print @num1; --print @num1:

  2. INSERT 语句总结

    一.基本语句 1.向指定的列中插入值(在插入批量数据时方式2优于方式1) <!--插入一条值--> INSERT INTO t1(field1,field2) VALUE(v001,v00 ...

  3. ActiveMQ queue 代码示例

    生产者: package com.111.activemq; import javax.jms.Connection; import javax.jms.ConnectionFactory; impo ...

  4. Visual Staudio 2015 打开指定文件，定位到指定文件目录下

    Visual Staudio 2015 项目定位文件位置 每次使用的Visual Staudio 2015 写代码的时候总是打开了.cs文件或xaml文件时, 还要手动去找该 文件位置,每次都要翻好大 ...

  5. 初始HTML

    了解HTML 1.1       HTML的作用 HTML就是用来制作网页 1.2       什么是HTML HTML是英文HyperText Markup Language的首字母缩写,即超文本标 ...

  6. Linux iptables命令详解

    iptables命令主要是设置防火墙信息的 常见命令参数 Usage: iptables -[AD] chain rule-specification [options] iptables -I ch ...

  7. linux 下crontab相关定时触发的配置规则

    linux 下crontab相关定时触发的配置规则: 1.基本格式 :* * * * * command(分 时 日 月 周 命令)2.取值范围:分钟1-59 每分钟用*或者 */1表示小时1-23( ...

  8. Mysql进阶-day3

    多实例介绍: mysql多实例就是一台服务器开启多个不同的服务端口(3306,3307),运行多个MySQL服务进程,这些服务进程通过不同的socket监听不同的服务端口来提供各自的服务端口. 这些m ...

  9. 对一串用":"和";"拼接的汉字字符串排序

    近日在项目中遇到一个需求,要求显示的下拉菜单select选项的汉字字符进行排序,项目是前后端分离Ajax交互的,前端页面初始化时请求后端拿到菜单数据.项目中的所有菜单数据均是后端提供的. 场景是后端请 ...

  10. https nginx 设置

    https://www.digitalocean.com/community/tutorials/how-to-create-an-ssl-certificate-on-nginx-for-ubunt ...