jongomez/numgl: Image processing with WebGL. - GitHub

Apply image processing algorithms using WebGL. Supports pictures, videos, webcam streams and user defined arrays. Everything is sent to the fragment shader ... Skiptocontent {{message}} jongomez / numgl Public Notifications Fork 5 Star 86 ImageprocessingwithWebGL. License Viewlicense 86 stars 5 forks Star Notifications Code Issues 0 Pullrequests 0 Actions Projects 0 Wiki Security Insights More Code Issues Pullrequests Actions Projects Wiki Security Insights Thiscommitdoesnotbelongtoanybranchonthisrepository,andmaybelongtoaforkoutsideoftherepository. master Branches Tags Couldnotloadbranches Nothingtoshow {{refName}} default Couldnotloadtags Nothingtoshow {{refName}} default 2 branches 0 tags Code Latestcommit   Gitstats 25 commits Files Permalink Failedtoloadlatestcommitinformation. Type Name Latestcommitmessage Committime examples     src     LICENSE.md     README.md     Viewcode NumGL Docs Storeeverythingasatexture Greyscalingimages Convolutionkernel Thresholding Example-Combineconvolutionwiththreshold. Otheroptions Howdoesitwork Cross-origin/Same-originresources WebcamsonChrome README.md NumGL ApplyimageprocessingalgorithmsusingWebGL. Supportspictures,videos,webcamstreamsanduserdefinedarrays. Everythingissenttothefragmentshaderas2Dtextures. Letfragmentshadershandlethehardwork. Blogpost. Docs Storeeverythingasatexture Thestore_*functionsreturnastorageId,whichispassedintotheprocessingfunctions. window.onload=function(){ //SendthepicturetoWebGLastexture.Todothiswithvideo/webcam... //...changestore_picturetostore_video/store_webcam. varstorageId=numgl.store_picture("imgElementID"); numgl.show_texture(storageId); } Greyscalingimages numgl.grey(storageId); Fiddlewithit: Image Video Webcam Convolutionkernel //[-1,-1,-1,0,0,0,1,1,1]isa3x3kernel,where: //-1strowis[-1,-1,-1];2ndrowis[0,0,0];3rdrowis[1,1,1]. numgl.convolution(storageId,[-1,-1,-1,0,0,0,1,1,1]); //Otherkernelsaresupported. JSFiddlewithit: Image Video Webcam Thresholding //80isthethresholdingvalue. numgl.threshold(storageId,80); JSFiddle: Image Video Webcam Example-Combineconvolutionwiththreshold. TheimageprocessingfunctionsreturntheGLSLvariablethatwillholdthefinalpixelvalue. Thisreturnvariablecanbeusedtochaincallotherimageprocessingfunctions. window.onload=function(){ varimageId=numgl.store_picture("image"); numgl.show_canvas(imageId); //Convolutionfollowedbythreshold varconvResult=numgl.convolution(imageId,[-1,-1,-1,0,0,0,1,1,1]); numgl.threshold(convResult,10); numgl.do_it(); } JSFiddle: Imageconvolution+threshold Otheroptions Enable/disablefpsforvideoandwebcam //Ifthisisnotset,thefpsarenotshown. numgl.set_fps_element(fpsElementId); StoreJSarraysasRGBAtextures //Drawsthefollowing2x2RGBAtexture: //[white,black, //black,white] //numgl.store_array()'slast2argsarewidthandheight. vararrayId=numgl.store_array([255,255,255,255, 0,0,0,255, 0,0,0,255, 255,255,255,255], 2,2); //show_texture()callsdo_it()internally. numgl.show_texture(arrayId); Readpixelsfromcanvas //Ifnowidthandheightarespecified,read_canvas()willreadthewholecanvas. console.log(numgl.read_canvas().toString()); //Usingtheaboveexampletheresultwouldbe:"255,255,255,255,0,0,0,255,0,0,0,255,255,255,255,255" Fliptexture-arraysaren'tflipped,butimagesandvideosarebydefault(textureandclipspacecoordinatesaredifferent).JSFiddleexample //Calledbeforenumgl.do_it() numg.textures[storageId].flipTexture=true/false Manuallydefinefl_FragCoord.JSFiddleexample //Paintthescreenblue. numgl.fragColor="vec4(0,0,1,1);" SeethegeneratedGLSLcode. //Fragmentshadercode.Vertexshadercodefunctionisvs_code(). console.log(numgl.fs_code("pretty")); Howdoesitwork VideoandwebcamuserequestAnimationFramesothevideo/webcamframesaredrawnmultipletimes.Picturesareonlydrawnonce. JavascriptfunctionsgenerateGLSLcode,andwhentheusercallsnumgl.do_it()thatGLSLcodeiscompiledandexecuted.eg: window.onload=function(){ //"image"isthetagID. varimageId=numgl.store_picture("image"); numgl.grey(imageId); //ConsolelogtheGLSLcodegeneratedbythenumgl.grey()call: console.log(numgl.fs_code("pretty")); } TheresultingGLSLcode:(uTexture0isthestoredtexture-itcanbeanarray,pictureorvideoframe) precisionhighpfloat; uniformvec2uResolution; uniformsampler2DuTexture0; uniformvec2uTextureSize0; varyingvec2vTextCoords; voidmain(void){ floatfloat_0=0.2126*texture2D(uTexture0,vTextCoords).r; floatfloat_1=0.7152*texture2D(uTexture0,vTextCoords).g; floatfloat_2=0.0722*texture2D(uTexture0,vTextCoords).b; floatfloat_3=float_0+float_2+float_1; vec4vec4_0=vec4(float_3,float_3,float_3,1); gl_FragColor=vec4_0; } Thefinalfragmentcolor(gl_FragColor)issetbytheseGLSLcodecreatingfunctions,andcanbecheckedorsetmanuallyusingnumgl.fragColor.JSFiddleexample. Cross-origin/Same-originresources Forlocalimages/video,you'llneedtosetupalocalserver.It'seasy,justopenupyourconsole,gotoyourproject'sfolderandtypeinpython3-mhttp.server8000. ImagesandvideofromotherwebsitesrequiretheinlineHTMLattributecrossorigin="anonymous"-seetheimgtaghere,forexample. WebcamsonChrome Webcamsonlyworkonhttpssitesifyou'reusingChrome.OnFirefox,webcamsshouldworkfine(fornow). About ImageprocessingwithWebGL. Resources Readme License Viewlicense Stars 86 stars Watchers 6 watching Forks 5 forks Releases Noreleasespublished Packages0 Nopackagespublished Languages JavaScript 100.0% Youcan’tperformthatactionatthistime. Yousignedinwithanothertaborwindow.Reloadtorefreshyoursession. Yousignedoutinanothertaborwindow.Reloadtorefreshyoursession.