一回想,已经毕业两个月,来到中科软也快两个月了,业余时间学习webGL,个人感觉这个东西很有前途,分享给大家,也算是我的学习笔记吧!
下面把建立三角形和矩形的代码整理到这里:
/**
*初始化图形缓存区 缓冲区实际上是图形卡上的内存
*/
function initBuffers() {
triangleVertexPositionBuffer = gl.createBuffer();//创建三角形顶点数组
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);//绑定数值
var vertices = [
0.0, 1.0, 0.0,
-1.0, -1.0, 0.0,
1.0, -1.0, 0.0
];//定义三角形
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);//vertices填充缓存区
triangleVertexPositionBuffer.itemSize = 3;//缓存区的列
triangleVertexPositionBuffer.numItems = 3;//缓存区的行 三个独立的顶点位置(numItems),其中每一个由三个数(itemSize)组成
squareVertexPositionBuffer = gl.createBuffer();//正方形
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
vertices = [
1.0, 1.0, 0.0,
-1.0, 1.0, 0.0,
1.0, -1.0, 0.0,
-1.0, -1.0, 0.0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
squareVertexPositionBuffer.itemSize = 3;
squareVertexPositionBuffer.numItems = 4;
}
//将两个对象的顶点位置放置到图形卡上————————绘制图形
function drawScene() {
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);//告诉 WebGL画布的大小
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);//清除画布
//mat4.perspective=function(a,b,c,d,e){a=c*Math.tan(a*Math.PI/360);b=a*b;return mat4.frustum(-b,b,-a,a,c,d,e)};
mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);//为场景设置透视参数
//mat3.identity=function(a){a[0]=1;a[1]=0;a[2]=0;a[3]=0;a[4]=1;a[5]=0;a[6]=0;a[7]=0;a[8]=1;return a};
mat4.identity(mvMatrix);//
mat4.translate(mvMatrix, [-1.5, 0.0, -7.0]);//变换
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
setMatrixUniforms();//把矩阵参数传到图形卡
gl.drawArrays(gl.TRIANGLES, 0, triangleVertexPositionBuffer.numItems);//从顶点数组的第0项开始一直到第numItems个元素,将顶点数组绘制成三角形
//alert("triangle Finish!");
mat4.translate(mvMatrix, [3.0, 0.0, 0.0]);
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, squareVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
setMatrixUniforms();
gl.drawArrays(gl.TRIANGLE_STRIP, 0, squareVertexPositionBuffer.numItems);
}
请大家主意:所有操作矩阵的函数都定义在mat4对象中!各位大侠多多指教!下一课再见!
分享到:
相关推荐
数组 本文是WebGL电子书的2.16节内容。 WebGL着色器和javascript语言、C语言一样 可以声明...访问数组变量元素,直接通过数组下标就可以,比如arr[0]表示数组第一个元素,arr[1]表示数组第二个元素。 gl_Position =ve
1.1 WebGL——一个技术定义 2 1.2 3D图形学——入门 4 1.2.1 3D坐标系 4 1.2.2 网格、多边形和顶点 5 1.2.3 材质、纹理和光源 5 1.2.4 变换与矩阵 6 1.2.5 相机、透视、视口和投影 6 1.2.6 着色器 7...
交互式计算机图形学 基于WEBGL的自顶向下方法 原书第7版
SuperMap iClient3D for WebGL/WebGPU ——颜色(1) 完整代码
基于WebGL和AJAX的WEB3D应用研究——以在线3D协作交互式设计为例.pdf
《网站设计》实验教学内容与方法改革探讨——以基于WebGL的个性化产品定制平台开发为例.pdf
WebH5视频滤镜的百搭解决方案-WebGL着色器.docx
课程分享——地图Web3D可视化-WebGL、Three.js,附源码 课程概述 - 本课程讲解如何在web上实现地图3D可视化 - 学习本课程有前端基础即可,如果了解three.js更好 适用人群 有前端基础,想基于Web实现地图数据的3D...
交互式计算机图形学——基于WEBGL的自顶向下方法 第7版,Interactive Computer Graphics:A Top-Down Approach with WebGL (7th Edition) 英文版
给大家分享一套three.js课程——企业实战WEBGL视频课程
电子工业出版社教材 Edward Angel,Dave Shreiner著 张荣华、宋雨等译
给大家分享一套课程——Three.js可视化企业实战WEBGL课,2024年1月最新升级48章,附源码+课件等资料下载,课程不定期更新,包更新。
【项目资源】: 包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。 ... 【项目质量】: 所有源码都经过严格测试,...
分享课程——WebGL可视化3D绘图框架:Three.js 零基础上手实战,附软件+PPT+代码+文档资料下载。 本课程主要的功效就是让你学习完本教程后,能够写出在浏览器上流畅运行的3D程序,包括但不限于:大数据可视化,360...
###A javascript 库,用于在 WebGL 之上加速 2d 图形 (已终止的研究项目 – 2013,原型文档) 这主要侧重于在浏览器环境中生成 2d 图形,使用软件绘制视觉创意——而不是用于生产。 实际上是一个更快的 ...
第 1 章介绍 Three.js 和 WebGL 的背景资料,并通过简单的例子帮助读者实现第一个Three.js 应用。 第 2 章介绍照相机的设定。 第 3、4、5 章分别介绍几何形状、材质和网格,即如何在场景中添加物体。 第 6 章介绍...
人工智能——模拟人类智能的技术和理论,使其在计算机上展现出类似人类的思考、判断、决策、学习和交流能力。这不仅是一门技术,更是一种前沿的科学探索。 【实战项目与源码分享】 我们深入探讨了深度学习的基本...