Drawing an image using WebGL - html5 canvas - Stack Overflow
文章推薦指數: 80 %
2D Image Processing With WebGL - javascript - Stack Overflow
Home
Public
Questions
Tags
Users
Companies
Collectives
ExploreCollectives
Teams
StackOverflowforTeams
–Startcollaboratingandsharingorganizationalknowledge.
CreateafreeTeam
WhyTeams?
Teams
CreatefreeTeam
Collectives™onStackOverflow
Findcentralized,trustedcontentandcollaboratearoundthetechnologiesyouusemost.
Learnmore
Teams
Q&Aforwork
Connectandshareknowledgewithinasinglelocationthatisstructuredandeasytosearch.
Learnmore
DrawinganimageusingWebGL
AskQuestion
Asked
9years,8monthsago
Modified
5years,4monthsago
Viewed
21ktimes
12
5
PleasecouldanyoneexplainhowtodrawanimageonaWebGLcanvas?Atthemoment,onaregular'2d'canvas,I'musingthis:
varcanvas=document.getElementById("canvas");
varcxt=canvas.getContext('2d');
img.onload=function(){
cxt.drawImage(img,0,0,canvas.width,canvas.height);
}
img.src="data:image/jpeg;base64,"+base64var;
WithWebGLitseemsyouhavetousetextures,etc.CananyoneexplainhowIwouldadaptthiscodeforWebGL?Thanksforthehelp!:)
html5-canvaswebgl
Share
Improvethisquestion
Follow
editedSep3,2012at16:53
MikkoOhtamaa
75.7k4646goldbadges227227silverbadges373373bronzebadges
askedSep3,2012at15:53
JoeyMoraniJoeyMorani
23.5k3232goldbadges8181silverbadges128128bronzebadges
Addacomment
|
2Answers
2
Sortedby:
Resettodefault
Highestscore(default)
Datemodified(newestfirst)
Datecreated(oldestfirst)
26
IfitwasuptomeI'ddoitwithaunitquadandamatrixlikethis
Giventheseshaders
vertexshader
attributevec2a_position;
uniformmat3u_matrix;
varyingvec2v_texCoord;
voidmain(){
gl_Position=vec4(u_matrix*vec3(a_position,1),1);
//becausewe'reusingaunitquadwecanjustuse
//thesamedataforourtexcoords.
v_texCoord=a_position;
}
fragmentshader
precisionmediumpfloat;
//ourtexture
uniformsampler2Du_image;
//thetexCoordspassedinfromthevertexshader.
varyingvec2v_texCoord;
voidmain(){
gl_FragColor=texture2D(u_image,v_texCoord);
}
I'dcreateaunitquadandthenfillouta3x3matrixtotranslate,rotate,andscaleitwhereIneededittobe
vardstX=20;
vardstY=30;
vardstWidth=64;
vardstHeight=64;
//convertdstpixelcoordstoclipspacecoords
varclipX=dstX/gl.canvas.width*2-1;
varclipY=dstY/gl.canvas.height*-2+1;
varclipWidth=dstWidth/gl.canvas.width*2;
varclipHeight=dstHeight/gl.canvas.height*-2;
//buildamatrixthatwillstretchour
//unitquadtoourdesiredsizeandlocation
gl.uniformMatrix3fv(u_matrixLoc,false,[
clipWidth,0,0,
0,clipHeight,0,
clipX,clipY,1,
]);
"usestrict";
window.onload=main;
functionmain(){
varimage=newImage();
//usingadataURLbecausestackoverflow
image.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAKT2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4AUkSYqIQkQSoghodkVUcERRUUEG8igiAOOjoCMFVEsDIoK2AfkIaKOg6OIisr74Xuja9a89+bN/rXXPues852zzwfACAyWSDNRNYAMqUIeEeCDx8TG4eQuQIEKJHAAEAizZCFz/SMBAPh+PDwrIsAHvgABeNMLCADATZvAMByH/w/qQplcAYCEAcB0kThLCIAUAEB6jkKmAEBGAYCdmCZTAKAEAGDLY2LjAFAtAGAnf+bTAICd+Jl7AQBblCEVAaCRACATZYhEAGg7AKzPVopFAFgwABRmS8Q5ANgtADBJV2ZIALC3AMDOEAuyAAgMADBRiIUpAAR7AGDIIyN4AISZABRG8lc88SuuEOcqAAB4mbI8uSQ5RYFbCC1xB1dXLh4ozkkXKxQ2YQJhmkAuwnmZGTKBNA/g88wAAKCRFRHgg/P9eM4Ors7ONo62Dl8t6r8G/yJiYuP+5c+rcEAAAOF0ftH+LC+zGoA7BoBt/qIl7gRoXgugdfeLZrIPQLUAoOnaV/Nw+H48PEWhkLnZ2eXk5NhKxEJbYcpXff5nwl/AV/1s+X48/Pf14L7iJIEyXYFHBPjgwsz0TKUcz5IJhGLc5o9H/LcL//wd0yLESWK5WCoU41EScY5EmozzMqUiiUKSKcUl0v9k4t8s+wM+3zUAsGo+AXuRLahdYwP2SycQWHTA4vcAAPK7b8HUKAgDgGiD4c93/+8//UegJQCAZkmScQAAXkQkLlTKsz/HCAAARKCBKrBBG/TBGCzABhzBBdzBC/xgNoRCJMTCQhBCCmSAHHJgKayCQiiGzbAdKmAv1EAdNMBRaIaTcA4uwlW4Dj1wD/phCJ7BKLyBCQRByAgTYSHaiAFiilgjjggXmYX4IcFIBBKLJCDJiBRRIkuRNUgxUopUIFVIHfI9cgI5h1xGupE7yAAygvyGvEcxlIGyUT3UDLVDuag3GoRGogvQZHQxmo8WoJvQcrQaPYw2oefQq2gP2o8+Q8cwwOgYBzPEbDAuxsNCsTgsCZNjy7EirAyrxhqwVqwDu4n1Y8+xdwQSgUXACTYEd0IgYR5BSFhMWE7YSKggHCQ0EdoJNwkDhFHCJyKTqEu0JroR+cQYYjIxh1hILCPWEo8TLxB7iEPENyQSiUMyJ7mQAkmxpFTSEtJG0m5SI+ksqZs0SBojk8naZGuyBzmULCAryIXkneTD5DPkG+Qh8lsKnWJAcaT4U+IoUspqShnlEOU05QZlmDJBVaOaUt2ooVQRNY9aQq2htlKvUYeoEzR1mjnNgxZJS6WtopXTGmgXaPdpr+h0uhHdlR5Ol9BX0svpR+iX6AP0dwwNhhWDx4hnKBmbGAcYZxl3GK+YTKYZ04sZx1QwNzHrmOeZD5lvVVgqtip8FZHKCpVKlSaVGyovVKmqpqreqgtV81XLVI+pXlN9rkZVM1PjqQnUlqtVqp1Q61MbU2epO6iHqmeob1Q/pH5Z/YkGWcNMw09DpFGgsV/jvMYgC2MZs3gsIWsNq4Z1gTXEJrHN2Xx2KruY/R27iz2qqaE5QzNKM1ezUvOUZj8H45hx+Jx0TgnnKKeX836K3hTvKeIpG6Y0TLkxZVxrqpaXllirSKtRq0frvTau7aedpr1Fu1n7gQ5Bx0onXCdHZ4/OBZ3nU9lT3acKpxZNPTr1ri6qa6UbobtEd79up+6Ynr5egJ5Mb6feeb3n+hx9L/1U/W36p/VHDFgGswwkBtsMzhg8xTVxbzwdL8fb8VFDXcNAQ6VhlWGX4YSRudE8o9VGjUYPjGnGXOMk423GbcajJgYmISZLTepN7ppSTbmmKaY7TDtMx83MzaLN1pk1mz0x1zLnm+eb15vft2BaeFostqi2uGVJsuRaplnutrxuhVo5WaVYVVpds0atna0l1rutu6cRp7lOk06rntZnw7Dxtsm2qbcZsOXYBtuutm22fWFnYhdnt8Wuw+6TvZN9un2N/T0HDYfZDqsdWh1+c7RyFDpWOt6azpzuP33F9JbpL2dYzxDP2DPjthPLKcRpnVOb00dnF2e5c4PziIuJS4LLLpc+Lpsbxt3IveRKdPVxXeF60vWdm7Obwu2o26/uNu5p7ofcn8w0nymeWTNz0MPIQ+BR5dE/C5+VMGvfrH5PQ0+BZ7XnIy9jL5FXrdewt6V3qvdh7xc+9j5yn+M+4zw33jLeWV/MN8C3yLfLT8Nvnl+F30N/I/9k/3r/0QCngCUBZwOJgUGBWwL7+Hp8Ib+OPzrbZfay2e1BjKC5QRVBj4KtguXBrSFoyOyQrSH355jOkc5pDoVQfujW0Adh5mGLw34MJ4WHhVeGP45wiFga0TGXNXfR3ENz30T6RJZE3ptnMU85ry1KNSo+qi5qPNo3ujS6P8YuZlnM1VidWElsSxw5LiquNm5svt/87fOH4p3iC+N7F5gvyF1weaHOwvSFpxapLhIsOpZATIhOOJTwQRAqqBaMJfITdyWOCnnCHcJnIi/RNtGI2ENcKh5O8kgqTXqS7JG8NXkkxTOlLOW5hCepkLxMDUzdmzqeFpp2IG0yPTq9MYOSkZBxQqohTZO2Z+pn5mZ2y6xlhbL+xW6Lty8elQfJa7OQrAVZLQq2QqboVFoo1yoHsmdlV2a/zYnKOZarnivN7cyzytuQN5zvn//tEsIS4ZK2pYZLVy0dWOa9rGo5sjxxedsK4xUFK4ZWBqw8uIq2Km3VT6vtV5eufr0mek1rgV7ByoLBtQFr6wtVCuWFfevc1+1dT1gvWd+1YfqGnRs+FYmKrhTbF5cVf9go3HjlG4dvyr+Z3JS0qavEuWTPZtJm6ebeLZ5bDpaql+aXDm4N2dq0Dd9WtO319kXbL5fNKNu7g7ZDuaO/PLi8ZafJzs07P1SkVPRU+lQ27tLdtWHX+G7R7ht7vPY07NXbW7z3/T7JvttVAVVN1WbVZftJ+7P3P66Jqun4lvttXa1ObXHtxwPSA/0HIw6217nU1R3SPVRSj9Yr60cOxx++/p3vdy0NNg1VjZzG4iNwRHnk6fcJ3/ceDTradox7rOEH0x92HWcdL2pCmvKaRptTmvtbYlu6T8w+0dbq3nr8R9sfD5w0PFl5SvNUyWna6YLTk2fyz4ydlZ19fi753GDborZ752PO32oPb++6EHTh0kX/i+c7vDvOXPK4dPKy2+UTV7hXmq86X23qdOo8/pPTT8e7nLuarrlca7nuer21e2b36RueN87d9L158Rb/1tWeOT3dvfN6b/fF9/XfFt1+cif9zsu72Xcn7q28T7xf9EDtQdlD3YfVP1v+3Njv3H9qwHeg89HcR/cGhYPP/pH1jw9DBY+Zj8uGDYbrnjg+OTniP3L96fynQ89kzyaeF/6i/suuFxYvfvjV69fO0ZjRoZfyl5O/bXyl/erA6xmv28bCxh6+yXgzMV70VvvtwXfcdx3vo98PT+R8IH8o/2j5sfVT0Kf7kxmTk/8EA5jz/GMzLdsAAAAgY0hSTQAAeiUAAICDAAD5/wAAgOkAAHUwAADqYAAAOpgAABdvkl/FRgAAAM9JREFUeNrs2+EJgzAQBtBccTIXcQ8HcA8XcbV0gjZiONKS9/1VAnl43KExaq2lJxHRt0B/4tvF1v5eZfIAAAAAAICZE60+2erz53EN3cC2r11zghIAAAAAAAAzzwGllJ/u89lzghIAAAAAAAATZ8nus71zRPb6SgAAAAAAAJgDnif7fUH2+koAAAAAAACYA/Jy4/u9OUAJAAAAAACAMYkb9/z1OcHzuJwTBAAAAAAAAB7OAa0+v+3r0P8GW33eEwAAAAAAAAB8zBsAAP//AwB6eysS2pA5KAAAAABJRU5ErkJggg==";//MUSTBESAMEDOMAIN!!!
image.onload=function(){
render(image);
}
}
functionrender(image){
//GetAWebGLcontext
varcanvas=document.getElementById("c");
vargl=canvas.getContext("webgl");
if(!gl){
return;
}
//setupGLSLprogram
varprogram=webglUtils.createProgramFromScripts(gl,["2d-vertex-shader","2d-fragment-shader"]);
gl.useProgram(program);
//lookupwherethevertexdataneedstogo.
varpositionLocation=gl.getAttribLocation(program,"a_position");
//lookupuniformlocations
varu_imageLoc=gl.getUniformLocation(program,"u_image");
varu_matrixLoc=gl.getUniformLocation(program,"u_matrix");
//providetexturecoordinatesfortherectangle.
varpositionBuffer=gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER,newFloat32Array([
0.0,0.0,
1.0,0.0,
0.0,1.0,
0.0,1.0,
1.0,0.0,
1.0,1.0]),gl.STATIC_DRAW);
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation,2,gl.FLOAT,false,0,0);
vartexture=gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D,texture);
//Settheparameterssowecanrenderanysizeimage.
gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_S,gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_T,gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MAG_FILTER,gl.NEAREST);
//Uploadtheimageintothetexture.
gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,gl.RGBA,gl.UNSIGNED_BYTE,image);
vardstX=20;
vardstY=30;
vardstWidth=64;
vardstHeight=64;
//convertdstpixelcoordstoclipspacecoords
varclipX=dstX/gl.canvas.width*2-1;
varclipY=dstY/gl.canvas.height*-2+1;
varclipWidth=dstWidth/gl.canvas.width*2;
varclipHeight=dstHeight/gl.canvas.height*-2;
//buildamatrixthatwillstretchour
//unitquadtoourdesiredsizeandlocation
gl.uniformMatrix3fv(u_matrixLoc,false,[
clipWidth,0,0,
0,clipHeight,0,
clipX,clipY,1,
]);
//Drawtherectangle.
gl.drawArrays(gl.TRIANGLES,0,6);
}
canvas{
border:1pxsolidblack;
}
延伸文章資訊
- 1WebGL Image Processing
To draw images in WebGL we need to use textures. Similarly to the way WebGL expects clip space co...
- 2Drawing an image using WebGL - html5 canvas - Stack Overflow
2D Image Processing With WebGL - javascript - Stack Overflow
- 3jongomez/numgl: Image processing with WebGL. - GitHub
Apply image processing algorithms using WebGL. Supports pictures, videos, webcam streams and user...
- 4Using textures in WebGL - Web APIs | MDN
To load the texture from the image file, it then creates an Image object and assigns the src to t...
- 5Image Processing with WebGL - Medium
Image processing with HTML Canvas. Before delving into WebGL rendering, I think it's worth briefl...