將canvas2d的結果輸出到webgl的texture

將canvas2d的結果輸出到webgl的texture

前言

  最近在製作用canvas2d畫字型，然後轉到texture的功能，為了怕忘記，這邊做個紀錄。

內容

  範例程式碼如下

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var canvasData = ctx.getImageData(0, 0, canvas.width, canvas.height);
//webgl
var texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, canvas.width, canvas.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, Uint8Array.from(rawData.data) );
gl.bindTexture(gl.TEXTURE_2D, null);

這裡要注意canvasData所輸出的型別是"Uint8ClampedArray"， 但texImage2D能接受的是"Uint8Array"，所以要經過Uint8Array.from()來轉換!跟上一次做的將canvas的結果輸出到image不一樣的是不需要經過onload，直接執行完資料就馬上生效，不需要等callback!

參考資料

CanvasRenderingContext2D.getImageData()