WebGL?繪制與變換使用示例詳解
更新時間：2023年04月19日 14:38:37 作者：H_World
這篇文章主要為大家介紹了WebGL?繪制與變換使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
緩沖區(qū)對象(buffer object)
其中的API方法的說明官方網(wǎng)址：WebGLRenderingContext
緊接上一篇的問題，其實通過片元著色器可以修改點的顏色，但是會發(fā)現(xiàn)每一次顏色的都是一樣的，兩種方式的區(qū)別就是第一種用到了緩沖區(qū)對象
解釋：buffer object,它可以一次性向著色器中傳入多個頂點數(shù)據(jù)，而緩沖區(qū)對象是WebGL中一塊內(nèi)存區(qū)域，我們可以一次性向其中傳入大量的頂點數(shù)據(jù)。
再來看一眼相關(guān)代碼
api說明
createBuffer: creates and initializes aWebGLBufferstoring data such as vertices or colors -- 創(chuàng)建和初始化一個可以存儲類似頂點和顏色數(shù)據(jù)的對象bindBuffer: binds a givenWebGLBufferto a target -- 將buffer對象綁定到目標(biāo)對象上bufferData: initializes and creates the buffer object's data store -- 存儲數(shù)據(jù)到創(chuàng)建的buffer對象中enableVertexAttribArray: turns on the generic vertex attribute array at the specified index into the list of attribute arrays. -- 傳入的參數(shù)是一個vertex類型的數(shù)組對象，這個方法可以依次打開這個數(shù)組vertexAttribPointer: binds the buffer currently bound togl.ARRAY_BUFFERto a generic vertex attribute of the current vertex buffer object and specifies its layout. -- 將整個數(shù)組中的所有值一次性分配給一個attribute變量
解析:首先創(chuàng)建多個長度的數(shù)組，用來裝著色器中需要修改的頂點或是顏色信息，之后創(chuàng)建一個buffer,再將webgl對象和當(dāng)前創(chuàng)建的buffer地址綁定一起，bufferData方法就是往buffer地址中傳入數(shù)組數(shù)據(jù)
繪制圖形
上面的例子中都是繪制一個點，只不過這個點的size可以自定義設(shè)置
webgl.drawArrays(webgl.POINTS, 0, points.length / 4)
其中的drawArrays中的第一個參數(shù)指的是不同的繪制方式
參數(shù)類型
gl.POINTS點，繪制在坐標(biāo)系內(nèi)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三角扇
移動、旋轉(zhuǎn)、縮放
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)建初始的坐標(biāo)點
const u_Translate = gl.getUniformLocation(program, 'u_Translate'); // 定義頂點數(shù)據(jù) const positions = [ 0, 0, 0.5, 0, 0.5, 0.5, 0, 0.5, ]; // 將頂點數(shù)據(jù)寫入緩沖區(qū) gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW); // 啟用屬性并指定數(shù)據(jù)格式 gl.enableVertexAttribArray(aPosition); gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0); // 設(shè)置平移向量 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值。
自動旋轉(zhuǎn)
定義頂點著色器:一個頂點的信息，然后可以設(shè)置旋轉(zhuǎn)中心點的錨點，旋轉(zhuǎn)的角度，和一個需要改變的顏色
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屬性是從頂點著色器中綁定而來的
// 設(shè)置旋轉(zhuǎn)中心和旋轉(zhuǎn)角度
const rotationCenter = [0.25, 0.25];
let angle = 0
function render() {
// 更新旋轉(zhuǎn)角度
angle += 0.01
if (angle === 3.1415926) {
angle = 0
}
// 將旋轉(zhuǎn)中心和旋轉(zhuǎn)角度傳遞給uniform變量
webgl.uniform2fv(rotationCenterUniformLocation, rotationCenter)
webgl.uniform1f(angleUniformLocation, angle)
draw()
// 繪制圖形
webgl.drawArrays(webgl.TRIANGLE_FAN, 0, 4);
// 請求瀏覽器調(diào)用下一幀動畫
requestAnimationFrame(render)
}
// 開始動畫
render()
縮放
demo實現(xiàn)：根據(jù)滑動鼠標(biāo)控制三角形中的縮放大小
代碼實現(xiàn)
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)
重新設(shè)置該變量的值 監(jiān)聽鼠標(biāo)滑動事件
canvas.addEventListener("wheel", function (event: any) {
scale += event.deltaY / 1000
})
補充說明
變換中主要用到是矩陣的知識，矩陣按儲存方式分為按行矩陣和按列矩陣，而WebGL中主要是按列矩陣
那么使用矩陣可以 <新坐標(biāo)> = <變換矩陣> * <舊坐標(biāo)>
以上就是WebGL 繪制與變換使用示例詳解的詳細(xì)內(nèi)容，更多關(guān)于WebGL繪制變換的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
本文主要介紹了Javascript尾遞歸編程的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
這篇文章主要介紹了Bootstrap3學(xué)習(xí)筆記(二)之排版的相關(guān)資料,非常具有參考價值，特此分享腳本之家平臺，供大家參考2016-05-05
這篇文章主要為大家詳細(xì)介紹了AjaxUpLoad.js實現(xiàn)文件上傳功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-03-03
這篇文章主要介紹了javascript實現(xiàn)切換td中的值的方法,需要的朋友可以參考下2014-12-12
JavaScript使用math.js進(jìn)行精確計算操作示例
這篇文章主要介紹了JavaScript使用math.js進(jìn)行精確計算操作,結(jié)合實例形式分析了開源庫math.js進(jìn)行高精度數(shù)學(xué)運算相關(guān)操作技巧,需要的朋友可以參考下2018-06-06
這篇文章主要為大家詳細(xì)介紹了JavaScript如何利用SpeechSynthesis實現(xiàn)文字轉(zhuǎn)語音即文本朗讀的功能,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-10-10
淺析JavaScript中break、continue和return的區(qū)別
這篇文章主要介紹了JavaScript中break、continue和return的區(qū)別,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-11-11
這篇文章主要介紹了移動端和PC端在使用定位過程中需要注意的事項,包括系統(tǒng)GPS打開、定位權(quán)限、頁面授權(quán)等,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-02-02
js實現(xiàn)小球在頁面規(guī)定的區(qū)域運動
這篇文章主要為大家詳細(xì)介紹了js控制小球在規(guī)定范圍運動，碰到邊界就改變運動方向，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
Javascript操作select是表單中比較常見的，大家可以在網(wǎng)上搜索到很多的相關(guān)資料，接下來為大家詳細(xì)介紹下，JS動態(tài)操作select中的各種方法，感興趣的朋友可以參考下2013-10-10