亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

WebGL?繪制與變換使用示例詳解

 更新時間：2023年04月19日 14:38:37   作者：H_World  
這篇文章主要為大家介紹了WebGL?繪制與變換使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

緩沖區(qū)對象(buffer object)

其中的API方法的說明官方網址：WebGLRenderingContext

緊接上一篇的問題，其實通過片元著色器可以修改點的顏色，但是會發(fā)現每一次顏色的都是一樣的，兩種方式的區(qū)別就是第一種用到了緩沖區(qū)對象

解釋：buffer object,它可以一次性向著色器中傳入多個頂點數據，而緩沖區(qū)對象是WebGL中一塊內存區(qū)域，我們可以一次性向其中傳入大量的頂點數據。

再來看一眼相關代碼

api說明

  • createBuffer: creates and initializes a WebGLBuffer storing data such as vertices or colors -- 創(chuàng)建和初始化一個可以存儲類似頂點和顏色數據的對象
  • bindBuffer: binds a given WebGLBuffer to a target -- 將buffer對象綁定到目標對象上
  • bufferData: initializes and creates the buffer object's data store -- 存儲數據到創(chuàng)建的buffer對象中
  • enableVertexAttribArray: turns on the generic vertex attribute array at the specified index into the list of attribute arrays. -- 傳入的參數是一個vertex類型的數組對象，這個方法可以依次打開這個數組
  • vertexAttribPointer: binds the buffer currently bound to gl.ARRAY_BUFFER to a generic vertex attribute of the current vertex buffer object and specifies its layout. -- 將整個數組中的所有值一次性分配給一個attribute變量

解析:首先創(chuàng)建多個長度的數組，用來裝著色器中需要修改的頂點或是顏色信息，之后創(chuàng)建一個buffer,再將webgl對象和當前創(chuàng)建的buffer地址綁定一起，bufferData方法就是往buffer地址中傳入數組數據

繪制圖形

上面的例子中都是繪制一個點，只不過這個點的size可以自定義設置

webgl.drawArrays(webgl.POINTS, 0, points.length / 4)

其中的drawArrays中的第一個參數指的是不同的繪制方式

參數類型

  • gl.POINTS 點，繪制在坐標系內
  • gl.LINES 線，分別是點1和點2的線，點3和點4的線...
  • gl.LINE_STRIP 線，連接點1-點2-點3...
  • gl.LINE_LOOP 線，連接點1-點2-點3-點1，點的首尾相連
  • gl.TRIANGLES 三角形， 繪制在（點1，點2，點3）...
  • gl.TRIANGLE_STRIP 三角帶，第二個三角形和第一個三角形共享一條邊
  • gl.gl.TRIANGLE_FAN 三角扇

移動、旋轉、縮放

const VSHADER_SOURCE = `
  attribute vec4 a_Position;
  uniform vec4 u_Translate;
  void main() {
     gl_Position = u_Translate + a_Position;
  }
 `
const u_Translate = gl.getUniformLocation(gl.program, 'u_Translate')
gl.uniform4f(u_Translate, 0.5, 0.5, 0.0, 0)

創(chuàng)建初始的坐標點

const u_Translate = gl.getUniformLocation(program, 'u_Translate');
// 定義頂點數據 
const positions = [ 0, 0, 0.5, 0, 0.5, 0.5, 0, 0.5, ];
// 將頂點數據寫入緩沖區(qū) 
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
// 啟用屬性并指定數據格式 
gl.enableVertexAttribArray(aPosition); 
gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0);
// 設置平移向量 
const translation = [0.5, 0.5]; // 將平移向量傳遞給uniform變量 
gl.uniform2fv(translationUniformLocation, translation); // 繪制圖形 
gl.drawArrays(gl.TRIANGLE_FAN, 0, positions.length / 2);

u_Translate + a_Position為每一個分量相加得到一個新的vec4值。

自動旋轉

定義頂點著色器:一個頂點的信息，然后可以設置旋轉中心點的錨點，旋轉的角度，和一個需要改變的顏色

const vertexShaderSource = `
  attribute vec2 a_position;
  uniform vec2 u_rotationCenter;
  uniform float u_angle;
  varying vec3 v_color;
  void main() {
    vec2 rotatedPosition = vec2(
      cos(u_angle) * (a_position.x - u_rotationCenter.x) - sin(u_angle) * (a_position.y - u_rotationCenter.y) + u_rotationCenter.x,
      sin(u_angle) * (a_position.x - u_rotationCenter.x) + cos(u_angle) * (a_position.y - u_rotationCenter.y) + u_rotationCenter.y
    );
    gl_Position = vec4(rotatedPosition, 0, 1);
    v_color = vec3(cos(u_angle), 3.14 - cos(u_angle), cos(u_angle));
}
`

這樣在片元著色器中就需要

const fragmentShaderSource = `
  precision mediump float;
  varying vec3 v_color;
  void main() {
    gl_FragColor = vec4(v_color, 1);
  }
`

v_color屬性是從頂點著色器中綁定而來的

// 設置旋轉中心和旋轉角度
const rotationCenter = [0.25, 0.25];
let angle = 0
function render() {
  // 更新旋轉角度
  angle += 0.01
  if (angle === 3.1415926) {
    angle = 0
  }
  // 將旋轉中心和旋轉角度傳遞給uniform變量
  webgl.uniform2fv(rotationCenterUniformLocation, rotationCenter)
  webgl.uniform1f(angleUniformLocation, angle)
  draw()
  // 繪制圖形
  webgl.drawArrays(webgl.TRIANGLE_FAN, 0, 4);
  // 請求瀏覽器調用下一幀動畫
  requestAnimationFrame(render)
}
// 開始動畫
render()

縮放

demo實現：根據滑動鼠標控制三角形中的縮放大小

代碼實現

var vertexShaderSource = `
  attribute vec3 aVertexPosition;
  uniform float uScale;
  void main() {
    gl_Position = vec4(aVertexPosition * uScale, 1.0);
  }
`

頂點著色器中定義了uniform的變量uScale,比例因子，通過之后的代碼中

const scaleUniformLocation = webgl.getUniformLocation(webgl.program, "uScale")
webgl.uniform1f(scaleUniformLocation, scale)

重新設置該變量的值 監(jiān)聽鼠標滑動事件

canvas.addEventListener("wheel", function (event: any) {
  scale += event.deltaY / 1000
})

補充說明

變換中主要用到是矩陣的知識，矩陣按儲存方式分為按行矩陣和按列矩陣，而WebGL中主要是按列矩陣

那么使用矩陣可以 <新坐標> = <變換矩陣> * <舊坐標>

以上就是WebGL 繪制與變換使用示例詳解的詳細內容，更多關于WebGL繪制變換的資料請關注腳本之家其它相關文章！

相關文章

  • 鼠標經過tr時,改變tr當前背景顏色

    鼠標經過tr時,改變tr當前背景顏色

    本篇文章主要介紹了鼠標經過tr時,改變tr當前背景顏色的示例代碼，需要的朋友可以過來參考下，希望對大家有所幫助
    2014-01-01
  • JavaScript實現導入導出excel的示例代碼

    JavaScript實現導入導出excel的示例代碼

    這篇文章主要為大家詳細介紹了如何利用JavaScript語言實現導入導出excel文件的功能，文中的示例代碼講解詳細，感興趣的小伙伴可以了解一下
    2022-07-07
  • 微信小程序判斷手機號是否合法的實例代碼

    微信小程序判斷手機號是否合法的實例代碼

    我們在微信小程序開發(fā)的時候,手機號的驗證是經常需要操作的,那么如何驗證手機號呢?這篇文章主要給大家介紹了關于微信小程序判斷手機號是否合法的相關資料,需要的朋友可以參考下
    2021-09-09
  • js分頁顯示div的內容

    js分頁顯示div的內容

    對于div內容過高的情況，我們可以用js控制div分頁
    2008-07-07
  • JS實現表單全選以及取消全選實例

    JS實現表單全選以及取消全選實例

    這篇文章主要為大家詳細介紹了JS實現表單全選以及取消全選實例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-03-03
  • Three.js利用orbit controls插件（軌道控制）控制模型交互動作詳解

    Three.js利用orbit controls插件（軌道控制）控制模型交互動作詳解

    這篇文章主要給大家介紹了關于Three.js利用orbit controls插件，也就是軌道控制來控制模型交互動作的相關資料，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。
    2017-09-09
  • JavaScript中String對象的方法介紹

    JavaScript中String對象的方法介紹

    本文主要對JavaScript中String對象的方法進行介紹。具有一定的參考價值，下面跟著小編一起來看下吧
    2017-01-01
  • JavaScript Array對象詳解

    JavaScript Array對象詳解

    這篇文章主要為大家詳細介紹了JavaScript function函數種類，知識點很全面，包括普通函數、匿名函數、閉包函數，感興趣的小伙伴們可以參考一下
    2016-03-03
  • 簡單了解JavaScript中常見的反模式

    簡單了解JavaScript中常見的反模式

    這篇文章主要介紹了簡單了解JavaScript中常見的反模式，反模式 是指對反復出現的設計問題的常見的無力而低效的設計模式，俗話說就是重蹈覆轍。 這篇文章描述了 JavaScript 中常見的一些反模式，以及避免它們的辦法。,需要的朋友可以參考下
    2019-06-06
  • JavaScript實現仿新浪微博大廳和騰訊微博首頁滾動特效源碼

    JavaScript實現仿新浪微博大廳和騰訊微博首頁滾動特效源碼

    最近看到朋友用JavaScript實現仿新浪微博大廳和未登錄騰訊微博首頁滾動效果，朋友使用jquery實現的，在網上看到有用js制作的也比較好，于是把我的內容整理分享給大家，具體詳解請看本文
    2015-09-09

最新評論