How to load an image in WebGL - Jim Fisher
文章推薦指數： 80 %
How to load an image in WebGL. Above you should see a picture of me. It looks weird, not because I look weird but because the RGB channels ... LearnmoreaboutRussianwarcrimesinUkraine. HowtoloadanimageinWebGL Aboveyoushouldseeapictureofme. Itlooksweird,notbecauseIlookweirdbutbecausetheRGBchannelsareswapped. ThisisdonewithaWebGLfragmentshader,whichlookslike: uniformsampler2Dtex; voidmain(void){ mediumpvec2coord=vec2(gl_FragCoord.x/512.0,1.0-(gl_FragCoord.y/512.0)); mediumpvec4sample=texture2D(tex,coord); gl_FragColor=vec4(sample.b,sample.r,sample.g,1.0); } Toloadtheimageintotheuniformsampler2Dtex,Iused: constimg=newImage(); img.onload=function(){ gl.activeTexture(gl.TEXTURE0); consttex=gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D,tex); gl.texImage2D(gl.TEXTURE_2D,0,gl.RGB,gl.RGB,gl.UNSIGNED_BYTE,img); gl.generateMipmap(gl.TEXTURE_2D); consttexLoc=gl.getUniformLocation(prog,"tex"); gl.uniform1i(texLoc,0); gl.drawArrays(gl.TRIANGLE_FAN,0,4);//drawovertheentireviewport }; img.src='/assets/jim_512.jpg'; IjustreleasedTigYog: interactivetutorialsoncoding,math,crypto,science! Learnfromwizards,orwriteyourownquizzes! What’syourbag? Coding Math MorebyJim YoursyntaxhighlighteriswrongGranddaddiedtodayTheThreeTsofTime,ThoughtandTyping:measuringcostonthewebIhatetelephonesThesorrystateofOpenSSLusabilityThedotsdomatter:howtoscamaGmailuserMyparentsareFlat-EarthersHowHackerNewsstaysinterestingProjectC-43:thelostoriginsofasymmetriccryptoThehackerhypecycleTheinceptionbar:anewphishingmethodTimeisrunningouttocatchCOVID-19AprobabilisticpubquizfornerdsSmearphishing:anewAndroidvulnerability Tagged. AllcontentcopyrightJamesFisher2017. Thispostisnotassociatedwithmyemployer. Foundanerror?Editthispage. JimFisher TigYog Speaking CV Blogroll RSS
延伸文章資訊
- 1Image Processing with WebGL - Medium
Image processing with HTML Canvas. Before delving into WebGL rendering, I think it's worth briefl...
- 2WebGL2 Image Processing
To draw images in WebGL we need to use textures. Similarly to the way WebGL expects clip space co...
- 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...
- 5Drawing an image using WebGL - html5 canvas - Stack Overflow
2D Image Processing With WebGL - javascript - Stack Overflow
