//案例3.绘制三角形,将顶点数据存到缓冲区对象(gl.ARRAY_BUFFER)中,然后顶点着色器从里面读数据(3个顶点)
//顶点着色器中去掉gl_PointSize = 10.0,绘制三角不能设置顶点的大小
//gl.drawArrays(gl.TRIANGLES,0,n);第一个参数改为三角,因为此时不是绘制点了 var vShader = `
attribute vec4 a_Position;
void main(){
gl_Position = a_Position;
}
`;
var fShader = `
void main(){
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`; function main(){
//获取canvas元素
var canvas = document.getElementById('webgl'); //获取webgl上下文
var gl = getWebGLContext(canvas); if(!gl){
console.log('Failed to get the rendering context for WebGL!');
return;
}
//初始化着色器
if(!initShaders(gl,vShader,fShader)){
console.log('Failed to initialize shaders.');
return;
} var n = initVertexBuffers(gl);
if(n < ){
console.log('Failed to set the positions of the vertices!');
return;
} //用指定颜色填充webgl容器,就是设置背景
gl.clearColor(0.4, 0.5, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.TRIANGLES,,n); function initVertexBuffers(gl){
var vertices = new Float32Array([
0.0,0.5,-0.5,-0.5,0.5,-0.5
]);
var n = ;//点的个数 //创建缓冲区对象
var vertexBuffer = gl.createBuffer();
if(!vertexBuffer){
console.log('Failed to create the buffer object!');
return -;
} //将缓冲区对象绑定到目标ARRAY_BUFFER
gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer);
//往ARRAY_BUFFER
gl.bufferData(gl.ARRAY_BUFFER,vertices,gl.STATIC_DRAW); //获取shaderProgram中attribute变量‘a_Position’的地址
var a_Position = gl.getAttribLocation(gl.program,'a_Position');
if (a_Position < ) {
console.log('Failed to get the storage location of a_Position');
return -;
}
//将缓冲区对象分配给a_Position变量
gl.vertexAttribPointer(a_Position,,gl.FLOAT,false,,);
//开启着色器对缓冲区数据的访问
gl.enableVertexAttribArray(a_Position);
return n;
}
} main();

其实,绘制三角形和之前的绘制三个点的代码很相似,只是:

在顶点着色器里面,我们不能设置点的size了(gl_PointSize);

绘图函数将从gl.drawArrays(gl.POINTS,0,n)变成gl.drawArrays(gl.TRIANGLES,0,n);

效果如下:

WebGL编程指南案例解析之绘制三角形的更多相关文章

  1. WebGL编程指南案例解析之绘制一个点

    <!DOCTYPE html> <html> <head> <title>webgl</title> <style type=&quo ...

  2. WebGL编程指南案例解析之绘制四边形

    //案例4,绘制矩形,和三角形类似,但是注意因为一个矩形有4个顶点,按照两个三角形绘制矩形的话,顶点顺序要注意 var vShader = ` attribute vec4 a_Position; v ...

  3. WebGL编程指南案例解析之绘制三个点

    //案例2.绘制3个点,将顶点数据存到缓冲区对象(gl.ARRAY_BUFFER)中,然后顶点着色器从里面读数据(3个顶点) //着色器将对这些顶点进行逐个解析, //第一个顶点给到顶点着色器,赋值给 ...

  4. WebGL编程指南案例解析之平移和旋转的矩阵实现

    手写各种矩阵: //矩阵 var vShader = ` attribute vec4 a_Position; uniform mat4 u_xformMatrix; void main(){ gl_ ...

  5. WebGL编程指南案例解析之3D视图视区问题

    var VSHADER_SOURCE = 'attribute vec4 a_Position;\n' + 'attribute vec4 a_Color;\n' + 'uniform mat4 u_ ...

  6. WebGL编程指南案例解析之多数据存储于一个缓冲区以及着色器通信

    //顶点着色器往片元着色器传值 //多个参数值存于一个缓冲对象中 var vShader = ` attribute vec4 a_Position; attribute float a_PointS ...

  7. WebGL编程指南案例解析之平移和旋转的math库实现

    这里说的math库实现,指的是,通过一般的加减乘除(角度计算)来更新坐标值. 因为涉及到坐标的变化,所以这里都是基于对顶点着色器的修改 平移: var vShader = ` attribute ve ...

  8. WebGL编程指南案例解析之纹理叠加

    var vShader = ` attribute vec4 a_Position; attribute vec2 a_TexCoord; varying vec2 v_TexCoord; void ...

  9. WebGL编程指南案例解析之加载纹理(贴图)

    var vShader = ` attribute vec4 a_Position; attribute vec2 a_TexCoord; varying vec2 v_TexCoord; void ...

随机推荐

  1. Flask系列之源码分析(一)

    目录: 涉及知识点 Flask框架原理 简单示例 路由系统原理源码分析 请求流程简单源码分析 响应流程简单源码分析 session简单源码分析 涉及知识点 1.装饰器 闭包思想 def wapper( ...

  2. Deep Learning(2)

    二.Deep Learning的基本思想和方法 实际生活中,人们为了解决一个问题,如对象的分类(对象可是是文档.图像等),首先必须做的事情是如何来表达一个对象,即必须抽取一些特征来表示一个对象,如文本 ...

  3. Xcel 测试版使用手册

    基于无任何文笔可言,所以直接上使用方法吧. 1.引用dll,如何引用dll请谷歌. 2.使用 //实例化对象 LT.XMLExcel.XlsxOption xOption = new LT.XMLEx ...

  4. VS2010/MFC编程入门之十七(对话框:文件对话框)

    上一讲鸡啄米介绍的是消息对话框,本节讲解文件对话框.文件对话框也是很常用的一类对话框. 文件对话框的分类       文件对话框分为打开文件对话框和保存文件对话框,相信大家在Windows系统中经常见 ...

  5. 学号20155311 2016-2017-2 《Java程序设计》第5周学习总结

    学号20155311 2016-2017-2 <Java程序设计>第5周学习总结 教材学习内容总结 由于我的ios系统出了一些问题,所以git idea jdk我都重新在windows系统 ...

  6. this指向 - 浏览器环境

    1.全局上下文中的 this <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  7. ABP官方文档翻译 0.0 ABP官方文档翻译目录

    一直想学习ABP,但囿于工作比较忙,没有合适的契机,当然最重要的还是自己懒.不知不觉从毕业到参加工作七年了,没留下点儿什么,总感觉很遗憾,所以今天终于卯足劲鼓起勇气开始写博客.有些事能做的很好,但要跟 ...

  8. 【Android】使用BaseAdapter实现复杂的ListView【转】

    本文转载自:http://blog.csdn.net/jueblog/article/details/11857281 步骤 使用BaseAdapter实现复杂的ListView的步骤: 1. 数据你 ...

  9. 51Nod 1557 两个集合(二分)

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1557 题意: 小X有n个互不相同的整数: p1,p2,...,pn .他 ...

  10. Android -- service的开启方式, start开启和绑定开启服务,调用服务的的方法, aidl调用远程服务

    1. 概述 bindService() 绑定服务  可以得到服务的代理人对象,间接调用服务里面的方法. 绑定服务: 间接调用服务里面的方法.           如果调用者activity被销毁了, ...