WebGl 一个缓冲区传递颜色和坐标(矩形)
效果:
代码:
<!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 一个缓冲区传递颜色和坐标(矩形)的更多相关文章
- WebGl 多缓冲区传递颜色和坐标(矩形)
效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- WebGl 利用缓冲区对象画多个点
效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- 推荐一个iOS关于颜色的库-Wonderful
Wonderful 这个库主要是与UIColor息息相连的,其中一共包含四个子文件,UIColor+Wonderful,UIColor+Separate,SXColorGradientView,SXM ...
- Intent(三)向下一个活动传递数据
向下传递活动很简单,可以我采用putExtra()方法的重载,把我们想要传递的数据暂时放在intent中,启动活动时从这里取就可以了. 首先我们在MainActivity(主活动)显式声明intent ...
- 如何在linux Shell脚本里面把一个数组传递到awk内部进行处理
前段时间和几位同事讨论过一个问题:Shell脚本里面怎样把一个数组传递到awk内部进行处理? 当时没有找到方法.前两天在QQ群里讨论awk的时候,无意间又聊起这个话题.机缘巧合之下找到一个思路,特此分 ...
- Intent 隐式跳转,向下一个活动传递数据,向上一个活动返回数据。
一.每个Intent只能指定一个action,多个Category. 使用隐式跳转,我们不仅可以跳转到自己程序内的活动,还可以启动其他程序的活动.使得Android多个程序之间的功能共享成为可能. 例 ...
- Android开发:向下一个activity传递数据,返回数据给上一个activity
1.向下一个activity传递数据 activity1 Button button=(Button) findViewById(R.id.button1); button.setOnClickLis ...
- WPF 一个简单的颜色选择器
原文:WPF 一个简单的颜色选择器 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/BYH371256/article/details/8340999 ...
- Android基础Activity篇——Intent向下一个活动传递数据
1.向下一个活动传递数据 String data ="bilibilbilbilbili"; Intent intent1=new Intent(this,secondActivi ...
随机推荐
- Ubuntu 安装 PhpMyAdmin 图文教程
Ubuntu 安装 PhpMyAdmin 管理 MySQL 数据库 PhpMyAdmin 是一个用 PHP 编写的软件工具,可以通过 web方式控制和操作 MySQL 数据库.通过 phpMyAdmi ...
- 对WebSocket技术的学习与探索(一)
WebSocket 简要介绍 WebSocket protocol 是HTML5一种新的协议. 它实现了浏览器与服务器全双工通信(full-duple). 一开始的握手需要借助HTTP请求完成. We ...
- what's up ? docker, all right.
Docker install 下载对应安装包,离线安装 Docker 需要 docker-engine.docker-engine-selinux.libtool-ltdl这三个软件包. 下面以安装 ...
- margin的用法
margin塌陷问题 当时说到了盒模型,盒模型包含着margin,为什么要在这里说margin呢?因为元素和元素在垂直方向上margin里面有坑. 我们来看一个例子: html结构: <div ...
- 关于Unity3d的世界空间和本地空间的一点思考
最近才开始学Unity3d,被这个本地空间和世界空间搞得有点晕头转向的.于是花了一点时间随便写了一点代码加深理解.代码如下: public class MoveX : MonoBehaviour { ...
- linux 三大利器 grep sed awk 正则表达式
正则表达式目标 正则表达式单字符: 特定字符 范围字符:单个字符[ ] :代表查找单个字符,括号内为字符范围 数字字符:[0-9],[259] 查找 0~9 和 2.5 .9 中的任意一个字符 小写字 ...
- Linux命令--系统管理
shutdown命令 Linux shutdown命令可以用来进行关机程序,并且在关机以前传送讯息给所有使用者正在执行的程序,shutdown 也可以用来重开机. 使用权限:系统管理者. 语法 shu ...
- Directed Graphs
有向图 Introduction 就是边是有方向的,像单行道那样,也有很多典型的应用. 点的出度指从这个点发出的边的数目,入度是指向点的边数.当存在一条从点 v 到点 w 的路径时,称点 v 能够到达 ...
- 一次xss的黑盒挖掘和利用过程
挖掘过程一: 自从上一次投稿,已经好久好久没写文章了.今天就着吃饭的时间,写篇文章,记录下自己学习xss这么久的心得.在我看来.Xss就是javascript注入,你可以在js语法规定的范畴内做任何事 ...
- Guava包学习---Maps
Maps包方法列表: 还是泛型创建Map: public static <K, V> HashMap<K, V> newHashMap() { return new HashM ...