How to use data textures in WebGL - Stack Overflow

Addressing individual pixels in a texture in WebGL1 uses this formula vec2 pixelCoord = vec2(x, y); vec2 textureDimension ... 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 HowtousedatatexturesinWebGL AskQuestion Asked 2years,4monthsago Modified 2years,4monthsago Viewed 2ktimes 4 2 IhavebeenworkingthroughWebGLtutorialslikewebglfundamentalsandhaverunintoastumblingpoint-IbelievethatIwillneedtouseatexturethatIcreatetopassinformationdirectlytothefragmentshader,butIcan'tseemtoindexthetextureproperly. Thegoalistopassinformationaboutlightsources(locationandcolor)thatwillbefactoredintothefragmentcolor.Ideallythisinformationisdynamicinbothvalueandlength. Reproduction I'vecreatedasimplifiedversionoftheprobleminthisfiddle:WebGL-DataTextureTesting Here'ssomeofthecode. Inaone-timesetupwecreateatexture,fillitwithdata,andapplywhatseemtobethemostfool-proofsettingsonthattexture(nomips,nobytepackingissues[?]) //lookupuniforms vartextureLocation=gl.getUniformLocation(program,"u_texture"); //Createatexture. vartexture=gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D,texture); //filltexturewith1x3pixels constlevel=0; constinternalFormat=gl.RGBA;//I'vealsotriedtoworkwithgl.LUMINANCE //butitfeelshardertodebug constwidth=1; constheight=3; constborder=0; consttype=gl.UNSIGNED_BYTE; constdata=newUint8Array([ //R,G,B,A(unused)//:'texel'index(?) 64,0,0,0,//:0 0,128,0,0,//:1 0,0,255,0,//:2 ]); constalignment=1;//shouldbeuneccessaryforthistexture,but gl.pixelStorei(gl.UNPACK_ALIGNMENT,alignment);//Idon'tthinkthisishurting gl.texImage2D(gl.TEXTURE_2D,level,internalFormat,width,height,border, internalFormat,type,data); //setthefilteringsowedon'tneedmipsandit'snotfiltered gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MAG_FILTER,gl.NEAREST); 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); Inthedrawsequence(whichonlyhappensoncebutconceivablycouldrepeat)wereinforcethattheprogramshoulduseourtexture //Telltheshadertousetextureunit0foru_texture gl.activeTexture(gl.TEXTURE0);//addedthisandfollowinglinetobeextrasurewhichtextureisbeingused... gl.bindTexture(gl.TEXTURE_2D,texture); gl.uniform1i(textureLocation,0); Finally,inthefragmentshader,wearetryingtojustreliablyuseone'texel'asameansofconveyinginformation.Ican'tseemtomakeheadsortailsofhowtoretrievethevaluesthatIstoredinthetexturereliably. precisionmediumpfloat; //Thetexture. uniformsampler2Du_texture; voidmain(){ vec4sample_00=texture2D(u_texture,vec2(0,0)); //Thissamplegenerallyappearstobecorrect. //ChangingtheprovideddatafortheBchanneloftexel //index0seemstoaddblueasexpected vec4sample_01=texture2D(u_texture,vec2(0,1)); vec4sample_02=texture2D(u_texture,vec2(0,2)); //ThesesamplesarehowIexpectedthistoworksince //thewidthofthetextureissetto1 //Forsomereason01and02bothshowthesamecolor vec4sample_10=texture2D(u_texture,vec2(1,0)); vec4sample_20=texture2D(u_texture,vec2(2,0)); //Thesesamplesarejusttherefortesting-Idon'tthink //thattheyshouldwork //choosewhichsampletodisplay vec4sample=sample_00; gl_FragColor=vec4(sample.x,sample.y,sample.z,1); } Question(s) Isusingatexturethebestwaytodothis?Ihaveheardoftheabilitytopassarraysofvectorsaswell,buttexturesseemtobemorecommon. Howareyousupposedtocreatethetexture?(particularlywhenIspecify'width'and'height'shouldIbereferringtoresultingtexeldimensionsorthenumberofgl.UNSIGNED_BYTEelementsthatIwillusetoconstructthetexture??texImage2Ddocumentation) Howareyousupposedtoindexintothetextureinafragmentshaderwhennotusing'varying'types?(i.e.Ijustwantthevalueofoneormoreparticulartexels-nointerpolation[havinglittletonothingtodowithvertices]) OtherResources I'vereadasmuchasIcanaboutthisforthetimebeing.Here'sanon-exhaustivelist: JMIMadisonsuggeststhattheyhavefigureditout,butthesolutionisburiedinamountainofproject-specificcode Thewebglfundamentalstutorialsgetclose-usinga3x2datatexture-butitusesinterpolationanddoesn'tseemtotranslatewelltomyusecase Here'ssomeonetalkingabouttryingtousevec3arrays AndofcourseI'vebeentryingtocomparemyworkwithsomeOpenGLdocumentation(texImage2Dandtexture2d) EditHere'sanotherresourceIjustfound:HassleswitharrayaccessinWebGL,andacoupleofworkarounds.Makesmehopeful. Thisisreallybuggingme. Thanksinadvance! shaderwebgltextures Share Improvethisquestion Follow editedMar10,2020at16:40 Rabbid76 181k2525goldbadges103103silverbadges151151bronzebadges askedMar10,2020at9:02 oclykeoclyke 35011goldbadge22silverbadges1212bronzebadges 2 Whynotpassthethelightsasanarraytoauniformsuniformvec3lights[4];Alsolookinguptexturepixelsisviaunitcoordsnotpixelcoords.egtexture2D(tex,vec2(0,2))shouldbetexture2D(tex,vec2(0,0.5)) – Blindman67 Mar10,2020at12:46 Seethistutorial:webglfundamentals.org/webgl/lessons/webgl-pulling-vertices.html – gman Mar10,2020at14:48 Addacomment  |  2Answers 2 Sortedby: Resettodefault Highestscore(default) Trending(recentvotescountmore) Datemodified(newestfirst) Datecreated(oldestfirst) 6 AddressingindividualpixelsinatextureinWebGL1usesthisformula vec2pixelCoord=vec2(x,y); vec2textureDimension=vec2(textureWidth,textureHeight) vec2texcoord=(pixelCoord+0.5)/textureDimensions; vec4pixelValue=texture2D(someSamplerUniform,texcoord); Becausetexturecoordinatesarebyedges.Ifyouhavea2x1texture 1.0+-------+-------+ ||| |A|B| ||| 0.0+-------+-------+ 0.00.51.0 ThetexturecoordinateatcenterofpixelA=0.25,0.5.ThetexturecoordinateatthecenterofpixelBis0.75,0.5 Ifyoudon'tfollowtheforumlaaboveandusejustpixelCoord/textureDimensionsthenyou'repointinginbetweenpixelsandmatherrorswillgetyouonepixelortheother. Ofcourseifyou'reusingtexturesfordatayoualsoprobablywanttosetgl.NEARESTfiltering. InWebGL2youcanjustusetexelFetch ivec2pixelCoord=ivec2(x,y); intmipLevel=0; vec4pixelValue=texelFetch(someSamplerUniform,texcoord,mipLevel); Aworkingexampleofusingtexturesfordataishere Isusingatexturethebestwaytodothis?Ihaveheardoftheabilitytopassarraysofvectorsaswell,buttexturesseemtobemorecommon. Todowhat?Itwasn'tclearwhatyou'retryingtodo.Iseverypixelgoingtohaveadifferentlightsource? Howareyousupposedtocreatethetexture?(particularlywhenIspecify'width'and'height'shouldIbereferringtoresultingtexeldimensionsorthenumberofgl.UNSIGNED_BYTEelementsthatIwillusetoconstructthetexture??texImage2Ddocumentation) Dowhateveriseasiestorrequired.Forexampleifyouhave5piecesofdataperthingyouwanttopulloutImightputeachpieceofdataonaseparaterowinthetexture.Icanthendo vec4datum1=texture2D(dataTexture,vec2(indexTexCoordX,rowTexCoordY0); vec4datum2=texture2D(dataTexture,vec2(indexTexCoordX,rowTexCoordY1); vec4datum3=texture2D(dataTexture,vec2(indexTexCoordX,rowTexCoordY2); vec4datum4=texture2D(dataTexture,vec2(indexTexCoordX,rowTexCoordY3); WhereindexTexCoordXandrowTexCoordY0-3arecomputedfromtheforumlaabove.rowTexCoordY0-3migthevenbeconstants. Textureshavealimitindimensionsthoughsoifyouhavemoredatathenwillfitinonedimensionthenyou'llhavetopackthedatatighteranddomoremathtopullitout. Beawaretextureshavecachessoideallyyouwantthedatayoupullouttobeneardatayoupreviouslypulledout.Ifyoueverytimeyoujumpacrossthetextureforthenextvalueyourperformancewilldrop.(thoughofcourseitmaystillbefasterthenanalternativesolutiondependingonwhatyou'redoing) Howareyousupposedtoindexintothetextureinafragmentshaderwhennotusing'varying'types?(i.e.Ijustwantthevalueofoneormoreparticulartexels-nointerpolation[havinglittletonothingtodowithvertices]) Theonlychanginginputstoafragmentshaderarevaryings,gl_FragCoord(thecoordinatepixelbeingwrittento)andgl_PointCoord,onlyavailablewhendrawingPOINTS.Soyouhavetouseoneofthoseotherwiseallothervaluesareconstantforallpixels. Share Improvethisanswer Follow editedMar11,2020at1:01 answeredMar10,2020at14:58 gmangman 93.2k2929goldbadges237237silverbadges352352bronzebadges 1 1 TheYintoBlindman'sYang.Yourexplanationofmy'edgeselection'oftexturevaluesputsmeatease-IthoughtIwasgoingcrazy!Verynicecomplementtothealternativesolutionofusinguniformarrays.Isincerelyappreciateyoursupportofnewcomerswiththetutorials. – oclyke Mar11,2020at0:37 Addacomment  |  2 Useuniformarrays Thelinkedarticleissomewhatold.WebGLhassupportforuniformarraysviauniform[1234][if]vwhichhasgoodbrowsersupport Itisnotagoodideatouseatexturetostorefloatingpointdatawhenyoucansimplyuseauniformarraytoholddynamicdatasuchaslights. TheexamplebellowusingwebGL(NOTwebGL2whichisthebetteroption)hastwouniformarrays //definenumberoflights #defineLIGHTS5 uniformvec3lights[LIGHTS]; uniformvec3lightCols[LIGHTS]; Theyaresetviagl.uniform3fv.Notethatthevstandsforvector(Clanguagearray) Thiswillsaveyouhavingtosendredundantdata(thealphabyte)andworkwithfloatingpointprecisionratherthantexturebytes(orviaextensionyoucanhavefloatingpointtextures) Alsoyoucansendonlythearrayitemsthatchangeratherthanallthedataeachtime. constLIGHTS=15;//Numberoflights.MUSTBE!!!!INT>=1 constEXPOSURE=1;//Scaleronfinalpixelcolour constshaders={ getlocations(){return["A_vertex","U_lights","U_lightCols"]},//PrefixA_orU_usedbyJSnameisafter_ getvertex(){return` attributevec2vertex; varyingvec2map; voidmain(){ map=vertex*0.5+0.5;//mapunit0-1overquad gl_Position=vec4(vertex,0,1); }`; }, getfragment(){return` precisionmediumpfloat; #defineLIGHTS${LIGHTS} #defineEXPOSURE${EXPOSURE.toFixed(1)} uniformvec3lights[LIGHTS]; uniformvec3lightCols[LIGHTS]; varyingvec2map; voidmain(){ vec3light=vec3(0); for(inti=0;i Share Improvethisanswer Follow editedMar10,2020at16:45 answeredMar10,2020at16:00 Blindman67Blindman67 47.1k99goldbadges6464silverbadges122122bronzebadges 4 1 arraysofuniformsareafundamentalfeaturesofWebGLandhaveworkedsinceversion1.0.ThereisnoversionofWebGLwherearraysofuniformsarenotsupportedsonoideawhyyoufeltyouneededtowrite"hasgoodbrowsersupport".EverybrowserthathaseversupportedWebGLhasbeenabletodothis. – gman Mar10,2020at19:05 @gmanThatisnotwhattheOPappearstobethinking,Iwrotemyanswerbecauseoftheeditlink,indicatingthattheOPmaythinkthatuniformscannotbearrays.AlsotheOPhasanotherlinkinregardtouniformarrays"...tryingtousevec3arrays"furthersuggestingthatusingatextureisnottheOPspreferredoption.TheOPwantstopasslightpositionandcolor,bothofwhicharenotwellsuitedforstorageina8bitRGBAformatwithoutalotofmessingabout. – Blindman67 Mar10,2020at20:37 @Blindman67thanksfortheadvice-seemslikeuniformarraysarethecorrectsolutionformyproject.Theexampleisveryhelpfultoo.Iwasnotthrilledaboutbeinglimitedto8-bitvaluessothisisgreat! – oclyke Mar11,2020at0:33 1 @Blindman67,I'mnotknockingyoursolution.I'mcommentingonyoursecondsentencewhichisnonsense.There'snosuchthingashaving"goodbrowsersupport"for"uniformarrays".AnybrowserthatsupportsWebGLsupportsuniformarrays.It'sabasicfeatureofWebGLandalwayshasbeen.It'snotoptional.WebGLitselfisoptional,uniformarraysasasubfeaturearenot.Sayingitthereisgoodbrowsersupportforuniformarraysinwebglislikesayingthereisgoodsupportforadding2numbersinJavaScriptimplyingthatsomeversionsofJavaScriptcan'tadd2numbers – gman Mar11,2020at1:06 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?Browseotherquestionstaggedshaderwebgltexturesoraskyourownquestion. TheOverflowBlog Codecompletionisn’tmagic;itjustfeelsthatway(Ep.464) HowAPIscantakethepainoutoflegacysystemheadaches(Ep.465) FeaturedonMeta AnnouncingtheStacksEditorBetarelease! Trending:Anewanswersortingoption The[options]tagisbeingburninated Linked 2 WebGlFragmentShaderpassarray Related 7 WebGL:Textureaccessinavertexshader? 4 WebGLpassarrayshader 1 WebGLTextureread/writeatthesametime 3 WebGLtexturecreationtrouble 0 WebGL-stripeswhenusingmultipletextures 1 Howdo"unbound"samplersinWebGLbehave? 0 checkifwebgltextureisloadedinfragmentshader 0 UnabletorenderalphachannelasatextureinWebGL 2 ErrorwhencreatingtexturesinWebGLwiththeRGBformat HotNetworkQuestions Climbingupatreetoevadecombat DoSchwarzschildblackholesexistinreality? 3blindfoldedpeopledividing9coins HowCIDRhelpedtoslowdownroutingtablegrowth? WhataregoodparticledynamicsODEsforanintroductoryscientificcomputingcourse? Howshouldwedoboxplotswithsmallsamples? mvfailswith"Nospaceleftondevice"whenthedestinationhas31GBofspaceremaining WhatdoIneedtodoandrepairwherethese3Mstripspulledoff Nextdigitofrationalnumber Howtoencouragemeleecombatwhenrangedisastrongeroption Whyhadclimatechangenotbeenprovenbeyonddoubtforsolong? Coverlettertoarticlesubmittedbysomeonebesidesthecorrespondingauthor Canyourenewyourpassportwhiletravelingabroad? WhydoesKLMofferthisspecificcombinationofflights(GRU->AMS->POZ)justononedaywhenthere'satimechange? FormalLanguages Countthecells Identifyinganovelaboutfloatingislands,dragons,airshipsandamysteriousmachine Canahumancolonybeself-sustainingwithoutsunlightusingmushrooms? HowmanylightsecondsawayistheJWST? Whatarethesecapacitorsandresistorsfor? Scientificwriting:attributingactionstoinanimateobjects Ismoderatedlivestockgrazinganeffectivecountermeasurefordesertification? HowtoincorporateLifestyleintoD&D? Involutionmap,andinducedmorphisminK-theory morehotquestions Questionfeed SubscribetoRSS Questionfeed TosubscribetothisRSSfeed,copyandpastethisURLintoyourRSSreader. Yourprivacy Byclicking“Acceptallcookies”,youagreeStackExchangecanstorecookiesonyourdeviceanddiscloseinformationinaccordancewithourCookiePolicy. Acceptallcookies Customizesettings