Check out the gallery. The source code of all the gallery examples can be found here. To try out regl right away, you can use the live editor in the gallery.
webgl regl stackgl gl graphics computer-graphics opengl glsl data flow reactive functionalLearn the basics of WebGL in small, manageable chunks. The sequel to shader-school, created for CampJS IV by Mikola Lysenko and Hugh Kennedy. The script will ask you if you want to create an answer directory, press y to accept. This will populate your current directory with shader files for you to edit for each lesson.
webgl stackgl workshop nodeschool learning education tool workshopper tutorial lessonStreams chunks of gl.readPixels from the specified FrameBuffer Object. This is primarily useful for exporting WebGL scenes and textures to high resolution images (i.e. print-ready).Before calling this method, ensure your FBO is populated with the content you wish to export. On each chunk, this will bind the given FBO, set the viewport, read the new pixels, and then unbind all FBOs.
streaming fbo stackgl readpixels gl webgl glsl save export write render png image framebufferA helper module for unit testing shaders and comparing the result of gl_FragColor from a 1x1 WebGL canvas. See glsl-hsl2rgb for a practical example.You can use this with tools like smokestack for test-driven GLSL development.
test shader ecosystem:stackgl stackgl stack.gl unit testing glsl fragment glslifyOptimized separable gaussian blurs for GLSL. This is adapted from Efficient Gaussian Blur with Linear Sampling.The function blurs in a single direction. For correct results, the texture should be using gl.LINEAR filtering.
glsl shader webgl stackgl glslify blur blurs blurred blurring shaders tap taps gaussian kernel weightsHSL to RGB color conversion in GLSL.Implementation from flixel-gdx. PRs for optimizations welcome.
glsl blend mode rgb hsl hue saturation sat light lightness stackgl ecosystem:stackgl glslifyGeneric controls for orbiting a target in 3D. Can be used to control a camera, a 3D ray, or anything with { position, direction }.Can be used with any camera abstraction that uses position and direction to form the view matrix, including ThreeJS, Babylon, stackgl, etc.
orbit camera control controls perpsective perspective-camera 3d 2d webgl stackglA high-level 3D perspective camera with a familiar and convenient interface, built from modular pieces.See demo/canvas.js for a full example, using Canvas2D.
perspective projection rendering 3d webgl glsl stackgl gl-mat4 matrix matrices mat4 ray pick intersectionPreview and convert DDS files from the command line (compressed textures and HDR cubemaps).This only supports a limited range of DDS formats, see here.
dds preview image dxt dxt10 dx10 cube cubemap faces gl webgl stackgl compressed convert from to png jpg jpeg texture viewerQuickly and easily generate looping GIFs with WebGL using @jnordberg's gif.js.Note that if you change the size of your canvas after creating the encoder, gif.tick will throw an error.
gl webgl stackgl gif loop meme gratuitous catsExtrudes a 2D polyline with a given line thickness and the desired join/cap types. Tries to maintain visual consistency with HTML5 2D context stroking.The returned mesh is a simplicial complex.
triangulate line rendering lines 2d poly polyline path outline stroke gl webgl glsl stackglA 2D fontpath renderer for stackgl. As opposed to gl-render-text, which is texture based, this renderer is path-based.The following will produce filled text, drawn with triangles.
stackgl gl-modules gl webgl glsl modules-gl opengl font text glyph render word wrap ttf otfUses an intermediary canvas node to grab the RGBA pixels of the given source, with an optional clipping region. Works on HTML Canvas, Image, and Video elements.Gets the RGBA pixels from HTML Image/Video/Canvas element as a Uint8Array with some optional parameters.
gl webgl glsl stackgl modules-gl gl-modules image pixel imagedata canvas pixels uint8array rgba rgbIf the texcoord, normal or color options are false (or texcoord is 0) then that attribute will not be included in the shader.The projection, model, and view matrices are set to an identity matrix initially.
glsl gl-modules modules-gl stackgl gl webgl shader programAlso see three-vignette-background for a ThreeJS version of this module, with a slightly different API and noise algorithm.See demo/index.js for a full-screen example.
glsl gl webgl gl-modules stackgl texture image background vignette gradientNatural looking film grain using 3D noise functions. Inspired by Martins Upitis.This is a fairly expensive technique to achieve film grain, but it looks more realistic than a hash function and also produces better motion.
noise film grain lens imperfections ecosystem:stackgl stackgl webgl glsl glslifyStitches Google Street View and Photo Sphere tiles into an equirectangular image. For use in the browser, with Webpack or Browserify.Also includes an intermediate mode for higher quality WebGL rendering on low-end devices.
google api street view image equirect equirectangular panorama pano panoramic webgl glsl stackglCommand-line tool which takes a 4-channel RGBA image and generates a signed distance field. The bitmask is determined by pixels with alpha over 128 and any RGB channel over 128.The code has been adpated from libgdx.
sdf bitmap bmp png img jpg image signed distance field text alpha test fonts webgl gl stackgl glsl shaderComputes the normals of a polyline, using miter joins where multiple segments meet. This is mainly useful to expand thick lines in a vertex shader on the GPU.See the 2d test for an example of how these lines would be extruded.
polyline mesh webgl glsl stackgl
We have large collection of open source products. Follow the tags from
Tag Cloud >>
Open source products are scattered around the web. Please provide information
about the open source projects you own / you use.
Add Projects.