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
延伸文章資訊
- 1WebGL tutorial: image processing - posts in a row / Habr
WebGL is a web standard for low-level 3D graphics API. It allows you to run your code directly on...
- 2jongomez/numgl: Image processing with WebGL. - GitHub
Apply image processing algorithms using WebGL. Supports pictures, videos, webcam streams and user...
- 3How to load an image in WebGL - Jim Fisher
How to load an image in WebGL. Above you should see a picture of me. It looks weird, not because ...
- 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
