Drawing an image using WebGL - html5 canvas - Stack Overflow

文章推薦指數: 80 %
投票人數:10人

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,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";//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; } attributevec2a_position; uniformvec2u_resolution; uniformmat3u_matrix; varyingvec2v_texCoord; voidmain(){ gl_Position=vec4(u_matrix*vec3(a_position,1),1); v_texCoord=a_position; } precisionmediumpfloat; //ourtexture uniformsampler2Du_image; //thetexCoordspassedinfromthevertexshader. varyingvec2v_texCoord; voidmain(){ gl_FragColor=texture2D(u_image,v_texCoord); } Here'ssomearticlesthatwillexplainthethematrixmath Share Improvethisanswer Follow editedDec18,2016at15:09 answeredSep4,2012at17:32 gmangman 91.5k2929goldbadges230230silverbadges345345bronzebadges 2 CanIaskyouwhatkindofscriptisthis->?Iwouldlovetodrawimagesaswellasyoudobutthisscripisaddingsometexttopages.Isitpossibletorunthiscodejustwithwebgllibrarywithoutyourscript? – PetrBečka Mar25,2016at16:27 Seethisarticle.AddingthatcodetotheexamplewouldjustcluttertheexamplesoIneveradditIjustlinktoit – gman Mar25,2016at16:55 Addacomment  |  12 Hereisaself-containedscriptthatdoeswhatyouwant,ifthathelps.Allyouneedtoprovideisimage.jpg. Share Improvethisanswer Follow answeredSep12,2012at21:34 AndorAndor 36833silverbadges1111bronzebadges 3 1 ThankyouAndor!Thisisverycool.IamtryingtodoasimplethingbutinaWorkerasallmycodeisinaworker.Iamtryingtotaketwoimages,scalefirstto64x64andscalesecondtobe16x16andoverlapthem,withsecondimageontopandinthebottomrightcorner.Iusedyourcodeherebutitisdrawingupsidedown-codepen.io/anon/pen/wzvkar – Noitidart Sep3,2016at10:06 ThereasonI'mtryingtoforcethisisbecauseIammakingafirefoxtargetedappandneedtodothissimpleworkinaworkerinFirefox.AllmycodeisinworkerandcurrentlyOffscreenCanvasonlysupportswebgl. – Noitidart Sep3,2016at10:16 2 @NoitidartIt'smissingacalltoctx3d.pixelStorei(ctx3d.UNPACK_FLIP_Y_WEBGL,true); – diegocr Jul9,2021at17:47 Addacomment  |  YourAnswer ThanksforcontributingananswertoStackOverflow!Pleasebesuretoanswerthequestion.Providedetailsandshareyourresearch!Butavoid…Askingforhelp,clarification,orrespondingtootheranswers.Makingstatementsbasedonopinion;backthemupwithreferencesorpersonalexperience.Tolearnmore,seeourtipsonwritinggreatanswers. Draftsaved Draftdiscarded Signuporlogin SignupusingGoogle SignupusingFacebook SignupusingEmailandPassword Submit Postasaguest Name Email Required,butnevershown PostYourAnswer Discard Byclicking“PostYourAnswer”,youagreetoourtermsofservice,privacypolicyandcookiepolicy Nottheansweryou'relookingfor?Browseotherquestionstaggedhtml5-canvaswebgloraskyourownquestion. TheOverflowBlog UnlockyourfullprogrammingpotentialwithTheKeyV2.0 Securityneedstoshiftleftintothesoftwaredevelopmentlifecycle FeaturedonMeta HowmighttheStagingGround&thenewAskWizardworkontheStackExchange... Overhaulingourcommunity'sclosurereasonsandguidance AnA/Btesthasgonelivefora"Trending"sortoptionforanswers Linked 1 ConvertingDDS(DXT3)texturetoImageDatausingWebGL 1 HowcanIdrawandprojectavideofromanHTML5playerontoa3DplaneinWebGL? 0 WebGLimagenotrenderingbutnotgivinganyerror -2 WebGLDrawinganimage Related 8 ConvertingbytestoanimagefordrawingonaHTML5canvas 145 IsthereanyreasonforusingWebGLinsteadof2DCanvasfor2Dgames/apps? 0 IsaneventtriggeredwhenanHTMLlinkelement()containingbase64dataashrefisready? 1 toDataURL()smallscreens,smallsavedimage 0 OptimizingsimplePixiJSstage 1 Howtodrawfreelyinacanvasinhtml5whichisoverlayabovevideo? 1 WebGL:Howtooverlayamovingtextureontopofanothertexture? 0 Tryingtocompressimgviacanvas.toDataURL HotNetworkQuestions Whatisthemeaningofheadlessnotes? Howtoavoiddeliberateinconsistenciesseeminglikelazyorbadwriting? WouldyourunfasteronMars? HowdoesWSL/WSL2/WSLgworkwithoutsystemd? Bikehelmetexpiration Mutualfundhistoricprices,seen@GoogleandYahoo,don'tmatchmyactivity Nprisonerslockedincells Wasthereachesspiece—elephant,knightorrook—renderedasabeinglookingintotwodirections? Whatwouldpreventthegenocideofalegitimatelydangerousrace? Howtofindthepasswordspacegivenseveralrestrictions? HowareStarTrekmedicaldevicesattachedtotheneck? Arethereanybeastseligibleforthedruid'sWildShapefeaturethathaveLegendaryorLairActions? CanRussiabesuedoverbreakinggascontracts? HowcanIapplybinarysearchtofindtwoadjacentincreasingelementsinanunsortedarray? IsWallythere? Isthisasecureapproachtostoreamasterpassword? Whoarethese"MillennialFolk"beingreferredto? HowcanIreducethenoisemyCPUmakes? Whydon'tvirusesreachbroadconcentrationoutdoorsinacitylikeallergens? DidStarTrek:PicardgetnewwritersforSeason2? LEDforwardcurrentvsforwardvoltage Howtocorrectlyclampaslidingframelessglassdoorpanelintheclamps? IsthereaDold-Kantheoremforcircleactions? Anyideawhatthis3-enginebeautyis? morehotquestions Questionfeed SubscribetoRSS Questionfeed TosubscribetothisRSSfeed,copyandpastethisURLintoyourRSSreader. Yourprivacy Byclicking“Acceptallcookies”,youagreeStackExchangecanstorecookiesonyourdeviceanddiscloseinformationinaccordancewithourCookiePolicy. Acceptallcookies Customizesettings  



請為這篇文章評分?