ThNdl Fractal Lab - Interactive WebGL Fractal Explorer History Fractal Lab started around the beginning of 2011 as my first explorations rendering fractals in the browser with WebGL. Previously I had created renderers using Adobe PixelBender and QuartzComposer, which both had the advantage of easy integration into Photoshop and AfterEffects but were very limited when it came to interactively exploring the fractal space. Fractals are by nature highly detailed and so the smallest change to an input parameter can often result in dramatic differences in the output shape. In order to properly explore the space (and discover hidden gems that coalesce at specific parameter combinations) I decided to build a new UI (that had to nice to use!) The first version of Fractal Lab was a proof of concept to show that you could modify and fly around the fractals in the browser at interactive speeds. Implementation My more recent projects use Javascript ES6 and React.js with Webpack, and Node.js as the backend server of choice. Ray Marching Optimisation Notes
WebGL Inspector An advanced WebGL debugging toolkit About WebGL Inspector is a tool inspired by gDEBugger and PIX with the goal of making the development of advanced WebGL applications easier. What Firebug and Developer Tools are to HTML/JS, WebGL Inspector is to WebGL. Note: this is alpha software - if you find bugs, let me know (or better yet, fork and fix them! Check out the readme on github for more information. Status There hasn't been an update in awhile, but the project is not dead! Features Extension for injecting into pages Embed in an existing application with a single script include Capture entire GL frames Annotated call log with stepping/resource navigation and redundant call warnings Pixel history - see all draw calls that contributed to a pixel + blending information GL state display Resource browsers for textures, buffers, and programs Live Demo Click here to view a live demo (in a browser that supports WebGL, of course): Install ATTENTION: The extension is now hosted on the Chrome Web Store.
GLSL Sandbox Gallery drojdjou/J3D Pacmaze a packy in a maze GLSL 1.2 Tutorial In this tutorial shader programming using GLSL 1.2 will be covered. Although many parts are now considered deprecated, the essence of GLSL has remained constant. Besides, this tutorial will continue to be online because learning the basics of deprecated OpenGL is easier than learning the new versions. If you’re looking for a GLSL tutorial that deals only with non-deprecated features visit the GLSL Core tutorial, here in Lighthouse3D. Shaders are a hot topic and 3D games have shown that they can be put to good use to get remarkable effects. The tutorial contains an introduction to the specification, but reading the OpenGL 2.0 and GLSL official specs is always recommended if you get serious about this. GLSL stands for GL Shading Language, often referred as glslang, and was defined by the Architectural Review Board of OpenGL, the governing body of OpenGL. I won’t go into disputes, or comparisons, with Cg, Nvidia’s proposal for a shading language that is also compatible with OpenGL. Index
15 great HTML5 and CSS3 generators HTML5 and CSS3 are great languages to start off learning with, and I’ve always thought that one of the best ways to start learning is to just dive in and manipulate the code. As you could probably tell, this is where generators step in. They are a great way to generate some code, play with it, and learn. Not only that, they are incredibly useful because often times as a developer or designer we find we are doing things over and over again. As an example, I have a text-expander snippet that creates an HTML5 template that I wrote about here. I will say that most of this list is going to focus on CSS3 generators, simply because they are in demand more than HTML5 generators, and we will learn why. CSS3 Generators There is a somewhat negative connotation when it comes to these generators, and I have to say that as a designer and developer there is nothing negative about using one. General Generators This section will focus on generators that take care of the broad spectrum needs and usages.
uncontrol | A collection of experiments using fancy shmancy code