【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.pswp.cn/news/251658.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/251658.shtml
英文地址，請注明出處：http://en.pswp.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