Materialism is a prototype application inspired by features in Blender and Substance Designer that explores procedural texturing and node-based workflows. It is built to produce output textures for the different maps used in computer graphics applications such as games and animations, including the diffuse/albedo and displacement maps, among others. All the textures tile seamlessly which allows them to be repeated across a surface without hard edges common with hand-made textures based on paintings or photographs. By utilising combinations of noise generators and mixing nodes, it is possible to generate textures of nearly any complexity. And upon building a definition for a material with the node graph, it is then possible to alter the seed used in the noise generators to produce any number of totally different materials with a similar look, with zero added effort.
The application explores the use of WebGL for hardware-accelerated compositing. Every node used in the node graph processes the input data to form a resulting output image through a custom fragment shader written for the node's specific purpose. A vertex shader defining a quad from -1 to 1 in X and Y is shared between all shader programs because the compositing occurs as texture images, meaning the fragment shader becomes the real workhorse for the program. There exists a special "Output" node type where composited imagery is directed in order to produce the final rendering of the material on a 2D and 3D viewport located to the right of the node graph. This allows the material artist to preview the texture on a 3D mesh which reacts to scene lighting and deformations defined by the corresponding slot on the "Output" node.
The main graphics technologies explored by this project includes:
One neat feature afforded by using a modern platform like HTML5 with WebGL is that it is possible to target any modern browser, and as a result, demonstrations have been embedded throughout the page in leiu of static pictures. These are fully interactive and may be navigated and modified at all. Please note that only Chrome has been tested, so it may be necessary to use that browser if anything is amiss.
In building the prototype, I utilized some libraries of existing code for noise generation and model parsing. The Perlin noise shader source code has been borrowed from Stefan Gustavson but modified to allow user-supplied uniforms to adjust the size and random seed. Also, webgl-obj-loader is a library I included for the purpose of parsing OBJ files for use in the 3D viewport display. The visual look of the node graph was inspired by Blender's compositor. Aside from these sources, everything else in the application was written from scratch utilizing modern JavaScript and CSS standards to produce a user-friendly interface for node-based material compositing.