Lets keep this simple, screw texture sampling... Point blank who has the time to create textures, and sample stuff and blah blah blah. Not me... its 2016 I’m pretty sure there are ways to make the computer be the artist. So with all the other projects and things I have been developing it is time to introduce dun dun dun BABYLON JS. Ok, In my past examples I interacted with the canvas with only webworkers or a single thread; now it is time to introduce the GL pipeline and the quickest way to do that will be to use a library for handling all of the webGL communication. My engine of choice is Babylon.js for many many reasons, if you're not familiar with BJS then please do a quick google search and be prepared to be amazed (especially if you're from unity). I know I know, some of you are prolly slightly intimidated by the idea of programing a texture, but if you follow along with me on this well cover all the basics and get things rolling! DISCLAIMER* Um, I've never done this before... so this is all theory until tested, I have a broad understanding of both GLSL and Babylon Pipeline so after sleeping on it last night I think i connected all the dots.
So first to get started let's go over some basics. In Babylon JS we have a nifty little method for doing 2d elements called Canvas2D. This will be our access point for getting what we want to display on the screen, even though we are basically looking to generate a 2d image using the GLSL pipeline the way that we will be constructing it will let us later use it in a 3d environment or object in the same manner. Again for simplicity in these examples all I will be doing in Canvas2D is making a single box that covers the whole scene and then renders whatever procedural texture we have created to it.
The very first thing to do is get our BJS scene up and running, to do this if you're not familiar with the process or just want a good time saver you can basically copy and paste the code from: HERE and save that as a new index.html page somewhere. I will be doing everything on this tutorial inline, so if you ever get stumped you can just view the source of this page. I will also be getting my BJS library from the CDN at http://cdn.babylonjs.com/2-1/babylon.js
If you have webGL you should see the above scene, as a plane with a ball sitting on it... if you don't then you're in the wrong place
Ok, now that we have our engine up and running, let's get the main part of the script tailored to be more of a suitable environment for what we are trying to do. What I need to do is create a new canvas 2D Box that will occupy the screen space and be what we output all of our textures to. We will first go over what basic materials are at our disposal and what some of their effects are, to demonstrate this we will keep our first scene but let's add a standard material to the sphere and a gui to change all the options.
Explanation of the settings:
Pretty self explanatory, this affects the overall opacity of the material.
Diffuse Color is referencing the way that light reacts to the object. This is just like what you would expect, all the colors is white, no colors is black and the scenes lights effect how this looks.
Emissive Color is the amount of color the object generates itself, this is independent of the lights in the scene.
Ambient Color is like a secondary diffuse, this one is depends on the scene.ambientColor for its colors. Think of the scene color as the light hitting the object and the ambient of the object is what it is reflecting. This blends with the normal diffuse.
Specular Color is the color of the highlights from the scenes lights.
These are your general settings for the Basic Material, there are texture settings as well but we will skip over them because for the most part the basic material we are not going to have any use for in our project. The reason I bring it up was to demonstrate how babylon renders materials otherwise known as a shader. If you wish to learn more about the basics of materials go HERE. What is happening when we set the different properties of this material, we are changing some variables on the shader that is outputting the object in our GL environment. This is important because it will serve as the basis for how we produce our procedural content. The shaders that we create will then be used on various 2d blocks and reference their global UV position, that we then run through some noise calculations to get the output we want.
So now its about time to bring in Canvas2D. The reason I am choosing to do this, is it will be easier to troubleshoot what is going on in a 2D enviroment. Also while working on this I want to have our results take up the whole canvas.