Shader and materials writing docs and examples

[scottmsinger]

• A-Frame Version: 0.5.0

Don McCurdy asked me to file this as a bug. The community needs a more thorough documentation of materials and shader development for aframe. Robust, useful, and well documented examples to use as a jumping off point Documented tutorials and walk throughs of the process Coverage of the current methods and deprecating any outmoded examples in the current docs Explanations of the different approaches and why to use which ones - when to use a component, etc.

[ngokevin]

I've updated with https://github.com/aframevr/aframe/commit/7ee9444539b4c7cb9a4fcd2771cfba76219d2dd2, but would like help adding links to examples (@donmccurdy know any good ones for custom materials using components?).

[donmccurdy]

This would be very nice to have. I haven't seen any good/simple examples, but can certainly throw a few together. 🙂

[ngokevin]

If you could, thanks! Glitches welcome :)

[scottmsinger]

If it's to wrap an existing three.js shader to make it usable in AFrame as a component, it would be great to take mesh_standard and maybe a toon shader? If it's to demonstrate writing one from scratch a good phong is a great boilerplate and jumping off point. People can extend Phong pretty quickly to do novel things.

[donmccurdy]

@scottmsinger what do you mean by wrapping a three.js shader? MeshStandardMaterial is already a default A-Frame material. Do you mean injecting your own GLSL code into one of the default three.js shaders? Or using one of the existing MeshFooMaterial classes and turning it into an A-Frame component, without actually writing any shader code?

[donmccurdy]

Adding arbitrary GLSL to three.js's shaders is quite complicated, afaik. They're not simple shaders, because they have to account for lighting, shadows, skinning, morph targets...

[donmccurdy]

Anyway here's an example:

Demo: https://aframe-displacement-shader.glitch.me/ Code: https://glitch.com/edit/#!/aframe-displacement-shader Credit: https://www.clicktorelease.com/blog/vertex-displacement-noise-3d-webgl-glsl-three-js/

But maybe an example that doesn't depend on any GLSL utility functions would be best.

[scottmsinger]

Actually meshStandard is only partially implemented - there is no lightmap support for instance. Also - if I were to do it I would reveal the shader attributes to the component interface with the same names. I understand that 'src' is a standard web dev attribute, but in the underlying shader it's 'map'. But aside from that - yes - show how to wrap the other three.js shaders so that when new ones are introduced it's easier for the dev community to make it available to designers and artists.

[scottmsinger]

The noise example is great - clean and to the point. It's a lot easier to follow than some other shader examples I've seen. The inclusion of time is a good addition and very instructional. It would be great to show an example that took each of the different types of attributes - float, vector, color, image, etc., and then had comments (over)explaining their implementation - what goes where and why.

I would agree that external dependencies may be best left to more advanced examples.

The noise shader reminded me of a shader I wrote for Unity that takes a sequence of images rendered of an explosion in Houdini, but looking in from the surface of a sphere (like an inverted pano render). By encoding z-depth and color into the frames I was able to "recreate" the explosion on a poly mesh sphere where the vertices and the color were changing according to the actual rendered simulation. The missing chunks for me here are how to pull in an image for the texture atlas, or a movie file, and floats and vectors for control parameters.

[ngokevin]

@donmccurdy Thanks, you're awesome! Want to add those links to the material docs?

[donmccurdy]

Here's a second example, where the shader code is much simpler, but includes a component that takes a color property as well as the time uniform.

Code: https://glitch.com/edit/#!/aframe-simple-shader Demo: https://aframe-simple-shader.glitch.me/

PR shortly.