WebGL繪制與變換使用的方法是什么

本篇內容主要講解“WebGL繪制與變換使用的方法是什么”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“WebGL繪制與變換使用的方法是什么”吧!

緩沖區對象(buffer object)

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

再來看一眼相關代碼

api說明

• createBuffer: creates and initializes a WebGLBuffer storing data such as vertices or colors -- 創建和初始化一個可以存儲類似頂點和顏色數據的對象

• bindBuffer: binds a given WebGLBuffer to a target -- 將buffer對象綁定到目標對象上

• bufferData: initializes and creates the buffer object's data store -- 存儲數據到創建的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變量

解析:首先創建多個長度的數組，用來裝著色器中需要修改的頂點或是顏色信息，之后創建一個buffer,再將webgl對象和當前創建的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)

創建初始的坐標點

const u_Translate = gl.getUniformLocation(program, 'u_Translate');
// 定義頂點數據 
const positions = [ 0, 0, 0.5, 0, 0.5, 0.5, 0, 0.5, ];
// 將頂點數據寫入緩沖區 
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)

重新設置該變量的值 監聽鼠標滑動事件

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

補充說明

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

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

到此，相信大家對“WebGL繪制與變換使用的方法是什么”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！