【WebGL】《WebGL编程指南》读书笔记——第5章

一、前言

       终于到了第五章了，貌似开始越来越复杂了。

 

二、正文

        Example1：使用一个缓冲区去赋值多个顶点数据（包含坐标及点大小）

function initVertexBuffers(gl) {var verticesSizes = new Float32Array([0.0,  0.5,  10.0,  -0.5, -0.5,  20.0,  0.5, -0.5,  30.0   
  ]);var n = 3; var vertexSizeBuffer = gl.createBuffer();  if (!vertexSizeBuffer) {console.log('Failed to create the buffer object');return -1;}

  gl.bindBuffer(gl.ARRAY_BUFFER, vertexSizeBuffer);gl.bufferData(gl.ARRAY_BUFFER, verticesSizes, gl.STATIC_DRAW);var FSIZE = verticesSizes.BYTES_PER_ELEMENT;var a_Position = gl.getAttribLocation(gl.program, 'a_Position');if (a_Position < 0) {console.log('Failed to get the storage location of a_Position');return -1;}gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 3, 0);gl.enableVertexAttribArray(a_Position);  

var a_PointSize = gl.getAttribLocation(gl.program, 'a_PointSize');if(a_PointSize < 0) {console.log('Failed to get the storage location of a_PointSize');return -1;}gl.vertexAttribPointer(a_PointSize, 1, gl.FLOAT, false, FSIZE * 3, FSIZE * 2);gl.enableVertexAttribArray(a_PointSize);  gl.bindBuffer(gl.ARRAY_BUFFER, null);return n;
}

        

          Example2：使用varying变量从顶点着色器传输颜色信息给片元着色器

var VSHADER_SOURCE ='attribute vec4 a_Position;\n' +'attribute vec4 a_Color;\n' +  //attribute变量'varying vec4 v_Color;\n' +   // varying变量'void main() {\n' +'  gl_Position = a_Position;\n' +'  gl_PointSize = 10.0;\n' +'  v_Color = a_Color;\n' +  // 将attribute变量赋给varying变量'}\n';
var FSHADER_SOURCE =
'#ifdef GL_ES\n' +'precision mediump float;\n' + '#endif GL_ES\n' +
'varying vec4 v_Color;\n' +    //同名varying变量'void main() {\n' +'  gl_FragColor = v_Color;\n' + //！！！！！'}\n';
function initVertexBuffers(gl) {var verticesColors = new Float32Array([// 顶点坐标 与 颜色0.0,  0.5,  1.0,  0.0,  0.0, -0.5, -0.5,  0.0,  1.0,  0.0, 0.5, -0.5,  0.0,  0.0,  1.0, ]);var n = 3; var vertexColorBuffer = gl.createBuffer();  if (!vertexColorBuffer) {console.log('Failed to create the buffer object');return false;}

  gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer);gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW);var FSIZE = verticesColors.BYTES_PER_ELEMENT;var a_Position = gl.getAttribLocation(gl.program, 'a_Position');if (a_Position < 0) {console.log('Failed to get the storage location of a_Position');return -1;}gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 5, 0);gl.enableVertexAttribArray(a_Position);  var a_Color = gl.getAttribLocation(gl.program, 'a_Color');if(a_Color < 0) {console.log('Failed to get the storage location of a_Color');return -1;}gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 5, FSIZE * 2);gl.enableVertexAttribArray(a_Color);  return n;
}

 

       Example3：纹理（将图片的纹理赋给webgl对象）


var VSHADER_SOURCE ='attribute vec4 a_Position;\n' +'attribute vec2 a_TexCoord;\n' +  // 声明一个attribute变量'varying vec2 v_TexCoord;\n' +    // 声明一个varying变量'void main() {\n' +'  gl_Position = a_Position;\n' +'  v_TexCoord = a_TexCoord;\n' +  // attribute变量赋给varying变量'}\n';

var FSHADER_SOURCE ='#ifdef GL_ES\n' +'precision mediump float;\n' +'#endif\n' +
'uniform sampler2D u_Sampler;\n' +'varying vec2 v_TexCoord;\n' +'void main() {\n' +

// texture2D(sampler2D sampler, vec2 coord)
  // (纹理单元编号，纹理坐标) 这里是赋值的关键'  gl_FragColor = texture2D(u_Sampler, v_TexCoord);\n' + '}\n';function main() {  var canvas = document.getElementById('webgl');var gl = getWebGLContext(canvas);if (!gl) {console.log('Failed to get the rendering context for WebGL');return;}if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {console.log('Failed to intialize shaders.');return;}// 设置顶点缓存var n = initVertexBuffers(gl);if (n < 0) {console.log('Failed to set the vertex information');return;}
gl.clearColor(0.0, 0.0, 0.0, 1.0);// 设置纹理if (!initTextures(gl, n)) {console.log('Failed to intialize the texture.');return;}
}function initVertexBuffers(gl) {var verticesTexCoords = new Float32Array([//webgl顶点坐标, 纹理坐标相应点-0.5,  0.5,   0.0, 1.0,-0.5, -0.5,   0.0, 0.0,0.5,  0.5,   1.0, 1.0,0.5, -0.5,   1.0, 0.0,]);var n = 4; 
// 创建缓存区对象var vertexTexCoordBuffer = gl.createBuffer();if (!vertexTexCoordBuffer) {console.log('Failed to create the buffer object');return -1;}

  gl.bindBuffer(gl.ARRAY_BUFFER, vertexTexCoordBuffer);gl.bufferData(gl.ARRAY_BUFFER, verticesTexCoords, gl.STATIC_DRAW);var FSIZE = verticesTexCoords.BYTES_PER_ELEMENT;var a_Position = gl.getAttribLocation(gl.program, 'a_Position');if (a_Position < 0) {console.log('Failed to get the storage location of a_Position');return -1;}gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 4, 0);gl.enableVertexAttribArray(a_Position);  


  // 将纹理坐标分配给该存储位置并开启var a_TexCoord = gl.getAttribLocation(gl.program, 'a_TexCoord');if (a_TexCoord < 0) {console.log('Failed to get the storage location of a_TexCoord');return -1;}  gl.vertexAttribPointer(a_TexCoord, 2, gl.FLOAT, false, FSIZE * 4, FSIZE * 2);gl.enableVertexAttribArray(a_TexCoord);  return n;
}function initTextures(gl, n) {
// Step1：设置纹理对象var texture = gl.createTexture();   if (!texture) {console.log('Failed to create the texture object');return false;}// Step2: 获取u_Sampler（取样器）存储位置var u_Sampler = gl.getUniformLocation(gl.program, 'u_Sampler');if (!u_Sampler) {console.log('Failed to get the storage location of u_Sampler');return false;}

// Step3: 创建图片对象var image = new Image();  if (!image) {console.log('Failed to create the image object');return false;}
image.onload = function(){ loadTexture(gl, n, texture, u_Sampler, image); };image.src = '../resources/sky.jpg';return true;
}function loadTexture(gl, n, texture, u_Sampler, image) {
// Step1：对图像进行y轴反转gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);  

  // Step2: 开启0号纹理单元（textunit0~7）
  gl.activeTexture(gl.TEXTURE0);
// Step3: 绑定纹理对象（target，texture）   
  // target可以是：gl.TEXTURE或gl.TEXTURE_CUBE_MAP
  gl.bindTexture(gl.TEXTURE_2D, texture);// Step4: 设置纹理参数(target,pname,param)
// gl.TEXTURE_MAG_FILTER (纹理放大) 默认值： gl.LINEAR
  // gl.TEXTURE_MIN_FILTER (纹理缩小) 默认值： gl.NEAREST_MIPMAP_LINEAR
  // gl.TEXTURE_WRAP_S (纹理水平填充)  默认值： gl.REPEAT(平铺式) 
  //                                         gl.MIRRORED_REPEAT (镜像对称)
  //                                         gl.CLAMP_TO_EDGE (使用纹理图像边缘值)
  // gl.TEXTURE_WRAP_T (纹理垂直填充)  默认值： gl.REPEAT
 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
// Step5：配置纹理图片(target,level,internalformat,format,type,image)
  // level: 0
  // internalformat：图像的内部格式
  // format: 纹理数据的格式，必须与internalformat一致
  // type: 纹理数据的类型
  // image：包含纹理的图像的image对象gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image); 
// Step6：将0号纹理传递至取样器gl.uniform1i(u_Sampler, 0);gl.clear(gl.COLOR_BUFFER_BIT);  gl.drawArrays(gl.TRIANGLE_STRIP, 0, n); 
}

 

三、结尾

       以上代码均来自《WebGL编程指南》。

 

转载于:https://www.cnblogs.com/lovecsharp094/p/7718719.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/251658.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

ngnix反向代理

ngnix反向代理

https://blog.csdn.net/sherry_chan/article/details/79055211转载于:https://www.cnblogs.com/lwj820876312/p/9115308.html
阅读更多...
框架设计：实现数据的按需更新与插入的改进--用数据对比进一步说明

框架设计：实现数据的按需更新与插入的改进--用数据对比进一步说明

2019独角兽企业重金招聘Python工程师标准>>> 在发布完&#xff1a;框架设计&#xff1a;实现数据的按需更新与插入的改进 之后&#xff1a; 有网友表示不理解&#xff0c;于是这里给出一篇简单的说明对比&#xff0c;表示下改进后好处。 一&#xff1a;场景一&#…
阅读更多...
Java异常详解及如何处理

Java异常详解及如何处理

来源&#xff1a;Java异常详解及如何处理 简介 程序运行时&#xff0c;发生的不被期望的事件&#xff0c;它阻止了程序按照程序员的预期正常执行&#xff0c;这就是异常。异常发生时&#xff0c;是任程序自生自灭&#xff0c;立刻退出终止&#xff0c;还是输出错误给用户&…
阅读更多...
端口以及服务常用cmd

端口以及服务常用cmd

netstat -ano 列出所有端口的情况 netstat -aon|findstr "49157" 查出特定端口的情况 tasklist|findstr "2720" 查看是哪个进程或者程序占用了PID端口的程序 打开任务管理器&#xff0c;切换到进程选项卡&#xff…
阅读更多...
python学习笔记（二十八）日志模块

python学习笔记（二十八）日志模块

我们在写程序的时候经常会打一些日志来帮助我们查找问题&#xff0c;这次学习一下logging模块&#xff0c;在python里面如何操作日志。介绍一下logging模块&#xff0c;logging模块就是python里面用来操作日志的模块&#xff0c;logging模块中主要有4个类&#xff0c;分别负责不…
阅读更多...
TransactionScope 的基本原理简介

TransactionScope 的基本原理简介

C# 的事务编程 1 Db事务 DbConnection 中创建基于当前连接的 DbTransaction 2 使用TransactionScope ,创建环境事务 一旦创建&#xff0c;在这个环境包含的DbConnection 实例 都会根据连接字符串中的 Sqlserver 连接字符串支持&#xff0c;是否自动附加当前环境事务. 连接字符…
阅读更多...
Canvas 生成交互动画

Canvas 生成交互动画

2019独角兽企业重金招聘Python工程师标准>>> 今天介绍的是一个HTML5交互动画效果&#xff0c;难以置信。HTML5虽说还有很多东西在改进&#xff0c;但现在所能实现的 效果的程度我想是诸位很难想象得到的&#xff0c;实在是发展得太快了。 查看详情 转载于:https://m…
阅读更多...
Spark记录-Scala数据类型

Spark记录-Scala数据类型

Scala与Java具有相同的数据类型&#xff0c;具有相同的内存占用和精度。以下是提供Scala中可用的所有数据类型的详细信息的表格&#xff1a; 序号数据类型说明1Byte8位有符号值&#xff0c;范围从-128至1272Short16位有符号值&#xff0c;范围从-32768至327673Int32位有符号值&…
阅读更多...
二分搜索技术

二分搜索技术

2019独角兽企业重金招聘Python工程师标准>>> 分治法的基本思想&#xff1a;将一个规模为n的问题&#xff0c;分解为k个规模较小的子问题&#xff0c;这些子问题互相独立且与原问题相同。递归的解这些子问题&#xff0c;然后将各个子问题的解合并得到原问题的解。 经…
阅读更多...
数据库连接情况查询

数据库连接情况查询

--sp_who 可以指定数据库名&#xff0c;查询指定数据库的连接情况 sp_who go select DB_NAME(database_id) dbname, login_name, t1.session_id, t1.request_id, t2.status, t1.start_time, host_name from sys.dm_exec_requests t1inner join sys.dm_exec_sessions t2 on…
阅读更多...
apachacxf项目使用@WebService报错

apachacxf项目使用@WebService报错

首先去除已经导入的包那是因为我们要导入javaee的api,首先点击最下面这个选择自己电脑上的路径然后就会自动导入上面的包,同时在jar库上也会出现转载于:https://www.cnblogs.com/fengnan/p/9311949.html
阅读更多...
windows下redis 开机自启动

windows下redis 开机自启动

1&#xff0c;在redis的目录下执行&#xff08;执行后就作为windows服务了&#xff09;redis-server --service-install redis.windows.conf 2&#xff0c;安装好后需要手动启动redisredis-server --service-start 3&#xff0c;停止服务redis-server --service-stop 4&#xf…
阅读更多...
Java中的属性和方法

Java中的属性和方法

题目 实体类 测试类 转载于:https://www.cnblogs.com/maoxiuying/p/9130361.html
阅读更多...
《JavaScript》高级程序设计---第3章

《JavaScript》高级程序设计---第3章

3.基本概念 松散类型:所谓松散类型就是可以用来保存任何类型的数据。给未经声明的变量赋值在严格模式下会导致抛出ReferenceError错误。Object本质上由一组无序的名值对组成。未经初始化的默认值就会取得undefined值。True和False都不是Boolean值&#xff0c;只是标识符。如果…
阅读更多...
2019-06-13 Java学习日记之MySql

2019-06-13 Java学习日记之MySql

数据库概述&#xff1a; 1、什么是数据库&#xff0c;数据库有什么作用&#xff1f; 数据库就是存储数据的仓库&#xff0c;气本质是一个文件系统&#xff0c;数据按照特定的格式将数据存储起来&#xff0c;用户可以对数据库中的数据进行增加&#xff0c;修改&#xff0c;删除及…
阅读更多...
jquery 文件预览功能

jquery 文件预览功能

$(function() {$("#pic").click(function () {$("#upload").click(); //隐藏了input:file样式后&#xff0c;点击头像就可以本地上传$("#upload").on("change",function(){var objUrl getObjectURL(this.files[0]) ; //获取图片的路径…
阅读更多...
笔试小结---线程、进程

笔试小结---线程、进程

多进程:进程是资源分配的基本单位&#xff0c;它是程序执行时的一个实例。程序运行时&#xff0c;系统就会创建一个进程&#xff0c;并为它分配资源&#xff0c;然后把该进程放入进程就绪队列&#xff0c;进程调度器选中它的时候就会为它分配CPU时间&#xff0c;程序开始真正运…
阅读更多...
Spring security （一）架构框架-Component、Service、Filter分析

Spring security （一）架构框架-Component、Service、Filter分析

想要深入spring security的authentication &#xff08;身份验证&#xff09;和access-control&#xff08;访问权限控制&#xff09;工作流程&#xff0c;必须清楚spring security的主要技术点包括关键接口、类以及抽象类如何协同工作进行authentication 和access-control的实…
阅读更多...
windows下手动安装composer

windows下手动安装composer

1.下载compser.phar 地址 https://getcomposer.org/download/ 2.新建composer.bat 文件&#xff0c;写入“php "%~dp0composer.phar" %*” 3.把composer.bat composer.phar 两个文件放入 4.向环境变量里面写人“;D:\phpStudy\php\php-5.4.45;D:\phpStudy\php\php-5…
阅读更多...
写更漂亮的javascript

写更漂亮的javascript

用更合理的方式写 JavaScript 目录 声明变量对象数组字符串函数箭头函数模块迭代器和生成器属性变量提升比较运算符和等号代码块注释空白逗号分号类型转换命名规则声明变量 1.1 使用let和const代替var 不会变的声明用const//bad var $cat $(.cat)//good const $cat $(.cat)…
阅读更多...
最新文章

Copyright @ 2022~2023