WEBGL學習【四】模型檢視矩陣
<html lang="zh-CN"> <!--伺服器執行地址：http://127.0.0.1:8080/webgl/LearnNeHeWebGL/NeHeWebGL4.html--> <head> <title>NeHe's WebGL</title> <meta charset="UTF-8"/> <!--引入需要的庫檔案--> <script type="text/javascript" src="Oak3D_v_0_5.js"></script> <!--片元著色器；為JavaScript片段指定一個ID編號，後面我可以更具這個ID編號來獲取這段片元著色器的JavaScript片段程式碼--> <script id="shader-fs" type="x-shader/x-fragment"> precision mediump float; varying vec4 vColor; void main(void) { gl_FragColor = vColor; } </script> <!--頂點著色器；後面可以通過ID編號來獲取這段頂點著色器程式碼--> <script id="shader-vs"type="x-shader/x-vertex"> attribute vec3 aVertexPosition; attribute vec4 aVertexColor; uniform mat4 uMVMatrix; uniform mat4 uPMatrix; varying vec4 vColor; void main(void) { gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0); vColor = aVertexColor; } </script> <script type="text/javascript"> var gl; //初始化WEBGL function initGL(canvas) { try { //獲取WEBGL上下文 gl = canvas.getContext("experimental-webgl"); //gl這個上下文中存放了一些屬性（canvas的寬度、長度和其他相關屬性資料） //設定我的視口的寬度和高度 gl.viewportWidth = canvas.width; gl.viewportHeight = canvas.height; } catch (e) { } //如果獲取失敗 if (!gl) { alert("Could not initialise WebGL, sorry :-("); } } //獲取我的著色器物件 function getShader(gl, id) { //根據id獲取著色器源程式程式碼 var shaderScript = document.getElementById(id); if (!shaderScript) { return null; } var str = ""; var k = shaderScript.firstChild; while (k) { if (k.nodeType == 3) { str += k.textContent; } k = k.nextSibling; } var shader; //1.根據著色器的型別建立相應的著色器物件 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; } //2.向著色器物件中指定相應的GLSL ES原始碼（以字串的形式傳遞進去） gl.shaderSource(shader, str); //3.開始編譯著色器（編譯成為二進位制的可執行檔案） gl.compileShader(shader); //檢查下著色器的狀態（是否編譯成功） if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { alert(gl.getShaderInfoLog(shader)); return null; } return shader; } //一個著色器物件必須包含一個頂點著色器和一個片元著色器 var shaderProgram; //初始化著色器 function initShaders() { //獲取我的頂點著色器和片元著色器 var fragmentShader = getShader(gl, "shader-fs"); var vertexShader = getShader(gl, "shader-vs"); //每一個program中可以存放一個頂點著色器和一個片元著色器 //4.建立我的程式物件 shaderProgram = gl.createProgram(); //5.為程式物件分配著色器物件 gl.attachShader(shaderProgram, vertexShader); gl.attachShader(shaderProgram, fragmentShader); //6.連結程式物件 /** * 1.可以保證頂點著色器和片元著色器同名並且是同類型的 * 2.attribute，uniform和varying變數個數不超過著色器的上限 */ gl.linkProgram(shaderProgram); //檢測是否連線成功 if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { alert("Could not initialise shaders"); } //7.告訴WEBGL要使用的程式物件 gl.useProgram(shaderProgram); //指定一個新的屬性；gl.enableVertexAttribArray，我們使用它來告訴WebGL我們會用一個數組來為屬性賦值 //頂點的位置資訊 shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition"); gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute); //獲取我的頂點著色器中的attribute顏色變數 shaderProgram.textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor"); gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute); //從program中取得另外的兩個屬性值（模型檢視投影矩陣） shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix"); shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix"); } //定義了我的模型檢視矩陣和投影矩陣 var mvMatrix; var pMatrix; //在這裡實現我的矩陣的進棧和出棧操作 var mvMatrixStack = []; function myPushMatrix() { var copy = new okMat4(); mvMatrix.clone(copy); mvMatrixStack.push(copy); } function myPopMatrix() { if (mvMatrixStack.length == 0) { throw "Invalid popMatrix!"; } mvMatrix = mvMatrixStack.pop(); } //把我們新設定的模型檢視投影矩陣傳給頂點著色器中的uniform變數 function setMatrixUniforms() { gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix.toArray()); gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix.toArray()); } //定義我的三角形和矩形緩衝區頂點位置 var pyramidVertexPositionBuffer; var cubeVertexPositionBuffer; //定義我的三角形和矩形緩衝區的頂點顏色 var pyramidVertexColorBuffer; var cubeVertexColorBuffer; //定義我的立方體索引下標 var cubeVertexIndexBuffer; //緩衝區的初始化 function initBuffers() { //1.新建三角形頂點緩衝區物件 pyramidVertexPositionBuffer = gl.createBuffer(); //2.繫結目標物件到緩衝區 gl.bindBuffer(gl.ARRAY_BUFFER, pyramidVertexPositionBuffer); //初始化我的頂點陣列 var vertices = [ // Front face 0.0, 1.0, 0.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, // Right face 0.0, 1.0, 0.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, // Back face 0.0, 1.0, 0.0, 1.0, -1.0, -1.0, -1.0, -1.0, -1.0, // Left face 0.0, 1.0, 0.0, -1.0, -1.0, -1.0, -1.0, -1.0, 1.0 ]; //3.緩衝區物件中寫入資料 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); //計算頂點陣列的大小和頂點個數 pyramidVertexPositionBuffer.itemSize = 3; pyramidVertexPositionBuffer.numItems = 12; //1.建立我的顏色緩衝區 pyramidVertexColorBuffer = gl.createBuffer(); //2.繫結我的顏色緩衝區到目標物件 gl.bindBuffer(gl.ARRAY_BUFFER, pyramidVertexColorBuffer); //初始化我的顏色陣列(對每一個頂點指定相應的顏色) var colors = [ //注意保證在同一個頂點上面的顏色要相同 // Front face 1.0, 0.0, 0.0, 1.0, 0.0, 1.0, 0.0, 1.0, 0.0, 0.0, 1.0, 1.0, // Right face 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 1.0, 0.0, 1.0, 0.0, 1.0, // Back face 1.0, 0.0, 0.0, 1.0, 0.0, 1.0, 0.0, 1.0, 0.0, 0.0, 1.0, 1.0, // Left face 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 1.0, 0.0, 1.0, 0.0, 1.0 ]; //3.向緩衝區物件中寫入資料 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW); //計算三角形頂點顏色陣列的大小和頂點個數 pyramidVertexColorBuffer.itemSize = 4; pyramidVertexColorBuffer.numItems = 12; //1.新建矩形頂點緩衝區物件 cubeVertexPositionBuffer = gl.createBuffer(); //2.繫結目標物件到緩衝區 gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer); //立方體的頂點位置陣列 vertices = [ // Front face(123第一個三角形， 134第二個三角形) -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0, // Back face -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0, 1.0, -1.0, -1.0, // Top face -1.0, 1.0, -1.0, -1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, -1.0, // Bottom face -1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, -1.0, 1.0, -1.0, -1.0, 1.0, // Right face 1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0, // Left face -1.0, -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0, 1.0, -1.0 ]; //3.向緩衝區物件中寫入資料 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); //計算矩形頂點陣列每一項資料的大小，和頂點個數（有四個不同的頂點位置，每個頂點由3個數字組成） cubeVertexPositionBuffer.itemSize = 3; cubeVertexPositionBuffer.numItems = 24; //1.建立我的立方體的頂點顏色緩衝區 cubeVertexColorBuffer = gl.createBuffer(); //2.繫結目標物件到緩衝區 gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexColorBuffer); //定義我的矩形的顏色陣列 colors = [ [1.0, 0.0, 0.0, 1.0], // Front face[red] [1.0, 1.0, 0.0, 1.0], // Back face[yellow] [0.0, 1.0, 0.0, 1.0], // Top face[green] [1.0, 0.5, 0.5, 1.0], // Bottom face[] [1.0, 0.0, 1.0, 1.0], // Right face[] [0.0, 0.0, 1.0, 1.0] // Left face[blue] ]; //對於矩形的四個頂點賦予相同的顏色 //每一個面的四個頂點都是同樣的顏色 /*** * 1.0, 0.0, 0.0, 1.0 * 1.0, 0.0, 0.0, 1.0 * 1.0, 0.0, 0.0, 1.0 * 1.0, 0.0, 0.0, 1.0 * 1.0, 1.0, 0.0, 1.0 * 1.0, 1.0, 0.0, 1.0 * 1.0, 1.0, 0.0, 1.0 * 1.0, 1.0, 0.0, 1.0 * ……………………………… * 0.0, 0.0, 1.0, 1.0 * 0.0, 0.0, 1.0, 1.0 * 0.0, 0.0, 1.0, 1.0 * 0.0, 0.0, 1.0, 1.0 * @type {Array} */ var unpackedColors = []; for (var i in colors) { var color = colors[i]; for (var j=0; j < 4; j++) { unpackedColors = unpackedColors.concat(color); } } //3.向緩衝區物件中寫入資料 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(unpackedColors), gl.STATIC_DRAW); //計算我的正方形的頂點陣列 cubeVertexColorBuffer.itemSize = 4; cubeVertexColorBuffer.numItems = 24; //開始定義我的頂點位置陣列 //1.建立我的頂點索引緩衝區物件 cubeVertexIndexBuffer = gl.createBuffer(); //2.繫結目標物件到緩衝區 gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer); //設定我的頂點索引陣列 var cubeVertexIndices = [ 0, 1, 2, 0, 2, 3, // Front face 4, 5, 6, 4, 6, 7, // Back face 8, 9, 10, 8, 10, 11, // Top face 12, 13, 14, 12, 14, 15, // Bottom face 16, 17, 18, 16, 18, 19, // Right face 20, 21, 22, 20, 22, 23 // Left face ]; //3.向緩衝區物件寫入資料 gl.相關推薦
WEBGL學習【四】模型檢視矩陣
<html lang="zh-CN"> <!--伺服器執行地址：http://127.0.0.1:8080/webgl/LearnNeHeWebGL/NeHeWebGL4.html--> <head> <title>N
【轉】模型檢視矩陣和投影矩陣（webgl筆記）
這段時間在做遊戲3D場景生成和2D/3D切換的時候對模型檢視矩陣和投影矩陣很頭疼，直到看到這篇文章才豁然開朗，這篇文章講的非常詳細易懂，特地轉來。 可以關注我的個人主頁：http://alanzjl.sinaapp.com 最近在學習WebGL技術的過程中，我補充了一些
Python學習 【四】：正則表達式
pan 直觀 不包含 得到 regex 很好 可能 for pattern 一、正則表達式基礎 1.簡介 正則表達式並不是Python的一部分。正則表達式是用於處理字符串的強大工具，擁有自己獨特的語法以及一個獨立的處理引擎，效率上可能不如str自帶的方法，但功能十分強大
WEBGL學習【五】紋理貼圖
<html lang="zh-CN"> <!--伺服器執行地址：http://127.0.0.1:8080/webgl/LearnNeHeWebGL/NeHeWebGL4.html--> <head> <title>N
深度學習【19】ncnn安卓搭建並使用自己的模型
ncnn安卓搭建並使用自己的模型 github上面已經給了一個ncnn的安卓例子，地址：https://github.com/dangbo/ncnn-mobile clone 這個專案後用Android studio就可以開啟（12.19更新：這個專案已經更
spring boot 2.1學習筆記【四】屬性配置
spring boot 2.1系列文章目錄 文章目錄 常規屬性配置 @value 啟動引數 application.properties 型別安全的屬性配置（強烈推薦）
【redis學習之四】Redis的過期鍵處理及鍵淘汰策略
在redis中可以通過如下命令設定鍵的生存時間或生命週期： EXPIRE KEY TTL 命令用於將key的生存時間設定為ttl秒 PEXPIRE KEY TTL 命令用於將key的生存時間設定為ttl毫秒 EXPIREAT KEY TIMESTAMP
【Hadoop學習之四】HDFS HA搭建（QJM）
環境 虛擬機器：VMware 10 Linux版本：CentOS-6.5-x86_64 客戶端：Xshell4 FTP：Xftp4 jdk8 hadoop-3.1.1 由於NameNode對於整個HDFS叢集重要性，為避免NameNode單點故障，在叢集裡建立2個或以上NameNode（不
蝸龍徒行-Spark學習筆記【四】Spark叢集中使用spark-submit提交jar任務包實戰經驗
一、所遇問題 由於在IDEA下可以方便快捷地執行scala程式，所以先前並沒有在終端下使用spark-submit提交打包好的jar任務包的習慣，但是其只能在local模式下執行，在網上搜了好多帖子設定VM引數都不能啟動spark叢集，由於實驗任務緊急只能暫時
【Katalon學習二十】指令碼檢視Script View
除了手動檢視之外，Katalon Studio還允許專家使用者以程式設計的方式在測試用例的指令碼檢視中編寫自動化測試。具有Groovy/Java背景的使用者可以根據需要輕鬆地修改測試指令碼。 給出一個示例測試用例，其步驟如下: 開啟瀏覽器 瀏覽網站 單擊某個控制元件
大前端學習筆記整理【四】LESS基礎
第一次接觸CSS預編譯，然後對比後發現其實less的上手容易度確實比sass高不少，再加上公司專案也是使用的less。所以想想還是根據網上的各種教程，整理出來了一些比較基礎的、而且比較能讓我們這種初學者快速上手的例子。 菜雞一隻，程式碼要是有錯或者表達不清的地方，請各位批評指正！ 那麼，現在我們就開始正文部分
【OpenCV影象處理入門學習教程四】基於LoG運算元的影象邊緣檢測
一、基於LoG運算元的影象邊緣檢測原圖：1.LoG運算元與自定義濾波運算元進行比較的結果：2.LoG運算元的結果：3.自定義3*31 1 1 1 －8 1 1 1 1 濾波結果：二、程式碼解析下面是一段基於LoG運算元的影象邊緣檢測的程式碼，同時會生成兩個結果，一個是LoG運算元的結果，第二個是自
【Linux核心學習筆記四】記憶體管理-夥伴系統
1.夥伴系統演算法描述 linux系統採用夥伴系統演算法來解決外碎片問題。主要做法是記錄現存的空閒連續頁框塊的情況，以儘量避免為滿足對小塊的請求而分割大的空閒塊。 夥伴系統演算法中，把所有的空閒頁框分為11個組，每個組對應一個連結串列，每個連結串列分
深度學習【1】ubuntu中利用h5py儲存訓練好的keras 神經網路模型
利用h5py儲存的模型所佔的空間非常小。在利用h5py儲存keras訓練好的模型之前需要先安裝h5py，具體的安裝過程可參考我關於h5py安裝的博文：http://blog.csdn.net/linmingan/article/details/50736300 利用h5py
【程式碼】thinkphp檢視模型查詢失敗提示：ERR: 1146:Table ‘db.pr_order_view’ doesn’t exist
想用thinkphp的檢視模型進行關聯查詢，結果出現了這樣兒的問題（log日誌記錄）：ERR: 1146:Table 'db.pr_order_view' doesn't exist，我就納悶兒，檢視模型怎麼出來的sql是這樣兒的呢，檢視模型如下： /** * 訂單
深度學習【3】keras：儲存keras學習好的深度神經網路模型引數為二進位制和txt檔案
http://blog.csdn.net/linmingan/article/details/50906141 由於工程需要，儲存為hdf5的keras權值在c/c++中的讀取比較不方便。因此將keras中的權值剝離出來，並儲存為二進位制檔案或者txt檔案。在進行程式碼的編
【opencv學習筆記四】opencv3.4.0圖形使用者介面highgui函式解析
在筆記二中我們已經知道了，在highgui資料夾下的正是opencv圖形使用者介面功能結構，我們這篇部落格所說的便是D:\Program Files\opencv340\opencv\build\include\opencv2\highgui\highgui.hpp中的函數了
010-shiro與spring web項目整合【四】緩存Ehcache、Redis
principal eba view event ica inter element edi value 一、Ehcache shiro每次授權都會通過realm獲取權限信息，為了提高訪問速度需要添加緩存，第一次從realm中讀取權限數據，之後不再讀取，這裏Shiro和E
【BZOJ5015】[Snoi2017]禮物 矩陣乘法
del limit 編號 load 合數 向量 個數 zoj 題解 【BZOJ5015】[Snoi2017]禮物 Description 熱情好客的請森林中的朋友們吃飯，他的朋友被編號為 1～N，每個到來的朋友都會帶給他一些禮物：。其中，第一個朋友會帶給他 1 個，
【四】MongoDB索引管理
過期 則無 面向 ssa 距離 comment fields 字段名 不包含 一、索引介紹 在mongodb中，索引用來支持高效查詢。如果沒有索引，mongodb必須在整個集合中掃描每個文檔來查找匹配的文檔。但是如果建立合適的索引，mongodb就可以通過索引來限制檢查的文