WEBGL学习【七】画布绘图
主要是对WEBGL的绘图部分进行了进一步加强的认识和理解
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>WEBGL高级编程----绘制六边形</title>
<meta charset="utf-8">
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
attribute vec4 aVertexColor;
varying vec4 vColor; void main() {
vColor = aVertexColor;
gl_Position = vec4(aVertexPosition, 1.0);
} </script> <script id="shader-fs" type="x-shader/x-fragment">
precision mediump float; varying vec4 vColor;
void main() {
gl_FragColor = vColor;
} </script> <!--引入我的库文件-->
<script src="./lib/webgl-debug.js"></script> <script type="text/javascript">
var gl;
var canvas;
var shaderProgram;
//六边形顶点缓冲区
var hexagonVertexBuffer;
//坐标系缓冲区
var xyCordBuffer;
//三角形顶点位置缓冲区
var triangleVertexBuffer;
var triangleVertexBufferTwo;
//三角形颜色缓冲区
var triangleVertexColorBuffer;
//三角形带1
var stripVertexBuffer; //创建我的上下文句柄
function createGLContext(canvas) {
var names = ["webgl", "experimental-webgl"];
var context = null;
for (var i = 0; i < names.length; i++) {
try {
context = canvas.getContext(names[i]);
} catch (e) {
}
if (context) {
break;
}
}
if (context) {
context.viewportWidth = canvas.width;
context.viewportHeight = canvas.height;
} else {
alert("Failed to create WebGL context!");
}
return context;
} //从JavaScript代码中通过DOM加载着色器
function loadShaderFromDOM(id) {
var shaderScript = document.getElementById(id); // If we don't find an element with the specified id
// we do an early exit
if (!shaderScript) {
return null;
} // Loop through the children for the found DOM element and
// build up the shader source code as a string
var shaderSource = "";
var currentChild = shaderScript.firstChild;
while (currentChild) {
if (currentChild.nodeType == 3) { // 3 corresponds to TEXT_NODE
shaderSource += currentChild.textContent;
}
currentChild = currentChild.nextSibling;
} var shader;
if (shaderScript.type == "x-shader/x-fragment") {
shader = gl.createShader(gl.FRAGMENT_SHADER);
} else if (shaderScript.type == "x-shader/x-vertex") {
shader = gl.createShader(gl.VERTEX_SHADER);
} else {
return null;
} gl.shaderSource(shader, shaderSource);
gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert(gl.getShaderInfoLog(shader));
return null;
}
return shader;
} //设置我的着色器
function setupShaders() {
var vertexShader = loadShaderFromDOM("shader-vs");
var fragmentShader = loadShaderFromDOM("shader-fs"); shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram); if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
alert("Failed to setup shaders");
} gl.useProgram(shaderProgram); shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
shaderProgram.vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor"); gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
} //设置我的缓冲区
function setupBuffers() {
//创建六边形
hexagonVertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, hexagonVertexBuffer);
var hexagonVertices = [
-0.3, 0.6, 0.0, //v0
-0.4, 0.8, 0.0, //v1
-0.6, 0.8, 0.0, //v2
-0.7, 0.6, 0.0, //v3
-0.6, 0.4, 0.0, //v4
-0.4, 0.4, 0.0, //v5
-0.3, 0.6, 0.0, //v6
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(hexagonVertices), gl.STATIC_DRAW);
hexagonVertexBuffer.itemSize = 3;
hexagonVertexBuffer.numberOfItems = 7; //绘制一个坐标系
xyCordBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, xyCordBuffer);
var xyCordVertices = [
-1.0, 0.0, 0.0,
1.0, 0.0, 0.0,
0.0, -1.0, 0.0,
0.0, 1.0, 0.0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(xyCordVertices), gl.STATIC_DRAW);
xyCordBuffer.itemSize = 3;
xyCordBuffer.numberOfItems = 4; //绘制一个三角形
triangleVertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexBuffer);
var triangleVertices = [
0.3, 0.4, 0.0, //v0
0.7, 0.4, 0.0, //v1
0.5, 0.8, 0.0, //v2
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW);
triangleVertexBuffer.itemSize = 3;
triangleVertexBuffer.numberOfItems = 3; //绘制一个三角形
triangleVertexBufferTwo = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexBufferTwo);
var triangleVerticesTwo = [
0.0, 0.2, 0.0, //v0
-0.2, -0.2, 0.0, //v1
0.2, -0.2, 0.0, //v2
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVerticesTwo), gl.STATIC_DRAW);
triangleVertexBufferTwo.itemSize = 3;
triangleVertexBufferTwo.numberOfItems = 3; //创建三角形颜色数组
triangleVertexColorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer);
var colors = [
1.0, 0.0, 0.0, 1.0, //v0
0.0, 1.0, 0.0, 1.0, //v1
0.0, 0.0, 1.0, 1.0 //v2
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
triangleVertexColorBuffer.itemSize = 4;
triangleVertexColorBuffer.numberOfItems = 3; //绘制一个三角形带1
stripVertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, stripVertexBuffer);
//绘制两条
var stripVertices = [
-0.5, 0.2, 0.0, //v0
-0.4, 0.0, 0.0, //v1
-0.3, 0.2, 0.0, //v2
-0.2, 0.0, 0.0, //v3
-0.1, 0.2, 0.0, //v4
0.0, 0.0, 0.0, //v5
0.1, 0.2, 0.0, //v6
0.2, 0.0, 0.0, //v7
0.3, 0.2, 0.0, //v8
0.4, 0.0, 0.0, //v9
0.5, 0.2, 0.0, //v10 // start second strip
-0.5, -0.3, 0.0, //v11
-0.4, -0.5, 0.0, //v12
-0.3, -0.3, 0.0, //v13
-0.2, -0.5, 0.0, //v14
-0.1, -0.3, 0.0, //v15
0.0, -0.5, 0.0, //v16
0.1, -0.3, 0.0, //v17
0.2, -0.5, 0.0, //v18
0.3, -0.3, 0.0, //v19
0.4, -0.5, 0.0, //v20
0.5, -0.3, 0.0 //v21
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(stripVertices), gl.STATIC_DRAW);
stripVertexBuffer.itemSize = 3;
stripVertexBuffer.numberOfItems = 22; //创建三角形条带缓冲区（元素数组缓冲）
stripElementBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, stripElementBuffer);
//注意顶点索引的数量与【组绕顺序】有关，默认是逆时针方向为正方向
//【记住：如果三角形数量为奇数，就必须增加三个索引，从而会出现5个退化三角形；
// 如果三角形数量为偶数，就必须增加两个索引， 从而会出现4个退化三角形；
// 否则，就会出现组绕三角形的逆时针/顺时针混乱的问题【记住了嘛？】
// 】
var indices = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
10, 11, 11,// 3 extra indices for the degenerate triangles（这里共计有五个退化了的三角形）
11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21]; gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW); stripElementBuffer.numberOfItems = 25;
} //绘图函数
function draw() {
//设置视口，清空深度缓存
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
gl.clear(gl.COLOR_BUFFER_BIT); // Draw the hexagon
// We disable the vertex attrib array since we want to use a
// constant color for all vertices in the hexagon
//将顶点的颜色设置为一个常量
gl.disableVertexAttribArray(shaderProgram.vertexColorAttribute);
//将顶点颜色设置为黑色
gl.vertexAttrib4f(shaderProgram.vertexColorAttribute, 0.0, 0.0, 1.0, 1.0);
//把六边形的坐标传给顶点着色器
gl.bindBuffer(gl.ARRAY_BUFFER, hexagonVertexBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,
hexagonVertexBuffer.itemSize, gl.FLOAT, false, 0, 0);
//绘制首尾相连的图形
gl.drawArrays(gl.LINE_STRIP, 0, hexagonVertexBuffer.numberOfItems); //开始传值到顶点着色器
gl.disableVertexAttribArray(shaderProgram.vertexColorAttribute);
//这里可以给我的坐标系指定一个常量颜色（红色）
gl.vertexAttrib4f(shaderProgram.vertexColorAttribute, 1.0, 0.0, 0.0, 1.0);
gl.bindBuffer(gl.ARRAY_BUFFER, xyCordBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,
xyCordBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.drawArrays(gl.LINES, 0, xyCordBuffer.numberOfItems); //绘制三角形(如果要从一个颜色数组去设置顶点的颜色这里需要开启，如果要通过常量去设置颜色，这里就需要关闭)
gl.disableVertexAttribArray(shaderProgram.vertexColorAttribute);
gl.vertexAttrib4f(shaderProgram.vertexColorAttribute, 0.0, 1.0, 0.0, 1.0);
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexBuffer);
//每一个位置信息需要triangleVertexBuffer.itemSize个参数信息来表示
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,
triangleVertexBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.drawArrays(gl.TRIANGLES, 0, triangleVertexBuffer.numberOfItems); //再次绘制一个三角形（用颜色数组来绘制）
gl.enableVertexAttribArray(shaderProgram.vertexColorAttribute);
//传递顶点位置
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexBufferTwo);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,
triangleVertexBufferTwo.itemSize, gl.FLOAT, false, 0, 0);
//传递顶点颜色
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer);
gl.vertexAttribPointer(shaderProgram.vertexColorAttribute,
triangleVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.drawArrays(gl.TRIANGLES, 0, triangleVertexBuffer.numberOfItems); //开始绘制三角形带1
/*gl.disableVertexAttribArray(shaderProgram.vertexColorAttribute);
gl.bindBuffer(gl.ARRAY_BUFFER, stripVertexBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,
stripVertexBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.vertexAttrib4f(shaderProgram.vertexColorAttribute, 1.0, 1.0, 0.0, 1.0);
gl.drawArrays(gl.TRIANGLES, 0, stripVertexBuffer.numberOfItems);*/ //begin to drawElements()
//first put the vertexBuffer to the shader
gl.disableVertexAttribArray(shaderProgram.vertexColorAttribute);
gl.bindBuffer(gl.ARRAY_BUFFER, stripVertexBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,
stripVertexBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.vertexAttrib4f(shaderProgram.vertexColorAttribute, 1.0, 1.0, 0.0, 1.0);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, stripElementBuffer);
gl.drawElements(gl.TRIANGLE_STRIP, stripElementBuffer.numberOfItems, gl.UNSIGNED_SHORT, 0); //set the color of help line(black color )
gl.vertexAttrib4f(shaderProgram.vertexColorAttribute, 1.0, 0.0, 0.0, 1.0);
// Draw help lines to easier see the triangles
// that build up the triangle-strip
gl.drawArrays(gl.LINE_STRIP, 0, 11);
gl.drawArrays(gl.LINE_STRIP, 11, 11);
} function startup() {
canvas = document.getElementById("myGLCanvas");
gl = WebGLDebugUtils.makeDebugContext(createGLContext(canvas));
setupShaders();
setupBuffers();
gl.clearColor(1.0, 1.0, 1.0, 1.0); //逆时针方向是前面
gl.frontFace(gl.CW);
//激活背面剔除功能
gl.enable(gl.CULL_FACE);
//WEBGL剔除背面三角形
gl.cullFace(gl.FRONT); draw();
}
</script> </head> <body onload="startup();">
<canvas id="myGLCanvas" width="500" height="500" style="border: 2px solid springgreen;"></canvas>
</body> </html>
WEBGL学习【七】画布绘图的更多相关文章
- webgl学习笔记二-绘图多点
写在前面 建议先看下第一篇webgl学习笔记一-绘图单点 第一篇文章,介绍了如何用webgl绘图一个点.接下来本文介绍的是如何绘制多个点.形成一个面. webgl提供了一种很方便的机制,即缓冲区对象, ...
- webgl学习笔记一-绘图单点
写在前面 WebGl(全称:Web Graphics Library : web图形库) 是基于OpenGL ES 2.0的3D绘图协议. WebGL完美地解决了现有的Web交互式三维动画的两 ...
- webgl学习笔记三-平移旋转缩放
写在前面 建议先阅读下前面我的两篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 平移 1.关键点说明 顶点着色器需要加上 uniform vec4 u_Translation ...
- webgl学习笔记五-纹理
写在前面 建议先阅读下前面我的三篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 webgl学习笔记三-平移旋转缩放 术语 : 纹理 :图像 图形装配区域 :顶点着色器顶点坐标 ...
- webgl学习笔记四-动画
写在前面 建议先阅读下前面我的三篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 webgl学习笔记三-平移旋转缩放 下面我们将讲解下如何让一个正方形动起来~不断擦除和重绘 ...
- WebGL学习(1) - 三角形
原文地址:WebGL学习(1) - 三角形 还记得第一次看到canvas的粒子特效的时候,真的把我给惊艳到了,原来在浏览器也能做出这么棒的效果.结合<HTML5 Canvas核心技术>和网 ...
- WebGL学习(2) - 3D场景
原文地址:WebGL学习(2) - 3D场景 经过前面WebGL学习(1) - 三角形的学习,我们已经掌握了webGL的基础知识,也已经能够画出最基本的图形,比如点,线,三角形,矩形等.有了2D绘图的 ...
- WebGL学习笔记二——绘制基本图元
webGL的基本图元点.线.三角形 gl.drawArrays(mode, first,count) first,代表从第几个点开始绘制即顶点的起始位置 count,代表绘制的点的数量. mode,代 ...
- WebGL学习之纹理盒
原文地址:WebGL学习之纹理盒 我们之前已经学习过二维纹理 gl.TEXTURE_2D,而且还使用它实现了各种效果.但还有一种立方体纹理 gl.TEXTURE_CUBE_MAP,它包含了6个纹理代表 ...
- WebGL学习(3) - 3D模型
原文地址:WebGL学习(3) - 3D模型 相信很多人是以创建逼真酷炫的三维效果为目标而学习webGL的吧,首先我就是
随机推荐
- JAVA集合泛型，类型擦除，类型通配符上限之类的知识点
感觉定义要比PYTHON严谨很多,一切源于静态语言的特点吧.. 于是语法上就复杂很多,值不值得呢? 参考测试URL: http://www.cnblogs.com/lwbqqyumidi/p/3837 ...
- [Java]对字符串中的每一个单词个数进行统计
这是来自一道电面的题. 单词统计非常easy想到用Map来统计,于是想到了用HashMap. 可是我却没有想到用split来切割单词,想着用遍历字符的方式来推断空格.人家面试官就说了,假设单词之间不止 ...
- ASP内置对象—Request、Response 、Server、Application 、ObjectContent （二）
Response (应答)对象 Request 对象.用于在HTTP请求期间,訪问不论什么client浏览器传递给server的信息,包含通过URL传递的參数信息.使用GET方法或POST方法传递的H ...
- linux程序设计——多线程（第十二章）
12.8 多线程 之前,总是让程序的主线程只创建一个线程.这节将演示怎样在同一个程序中创建多个线程,然后怎样以不同于其启动顺序将它们合并在一起.此外,还演示多线程编程时easy出现的时序问题. ...
- 【FastDev4Android框架开发】打造QQ6.X最新版本号側滑界面效果(三十八)
转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50253925 本文出自:[江清清的博客] (一).前言: [好消息] ...
- 去哪网实习总结：JavaWeb配置404页面（JavaWeb）
本来是以做数据挖掘的目的进去哪网的,结构却成了系统开发. .. 只是还是比較认真的做了三个月,老师非常认同我的工作态度和成果... 实习立即就要结束了,总结一下几点之前没有注意过的变成习惯和问题.分享 ...
- Swift Int to String
最近在项目中用到 swift, 涉及到 Int 转 String 类型,需要保留两位数,所以去研究了一下,做个记录 1.通常情况下1.1 Int转 String let intValue1 = 2 l ...
- mysql 操作提示 1366 Incorrect string value
一.报错说明 数据库此字段的字符集与整理字符集是否与SQL语句传递数据的字符集相同:不相同则会引发MySQL1366错误. 二.产生原因 windows 安装MySql 的时候选择的是默认的编码,创建 ...
- 大数字运算——1、BigInteger
package com.wh.BigInteger; import java.math.BigInteger; import java.util.Arrays; /** * @author 王恒 * ...
- jumpserver install
本文来源jumpserver官网 一步一步安装 环境 系统: CentOS 7 IP: 192.168.244.144 关闭 selinux 和防火墙 # CentOS 7 $ setenforce ...