Make your shadres online with SpiderGL – MeShader interface.

SpiderGL is a JavaScript 3D Graphics library which relies on WebGL for realtime rendering.

You can test it online using your browser using this website.

The website allow you to write shaders and also rendering the output.

About the web interface then has some windows to write your code and set the viewer.

See the next image:

meshade website

All steps show you how to use this web interface.

You need to load the 3D object using the Load button with this mesh: data/gargoyle1k.obj.

The website come with default example from shaders source code ( see step 2 and 3).

The steps 4 will apply the shaders and show on log windows if you got errors.

The step 5 will save your shaders.

Now about shaders source code.

If you want to use shader you need to have two source code: vertex shader source code and fragment shader source code.

The website interface come with two windows for each source code.

All two windowes need to have this source code in the top of each windows source code:

This tell shaders rendering about the data used by vertex and fragment shader.

This can be already declare in some engine scripting.

For example if you use Unity 3D engine then you can redefine VERTEX_P and FRAGMENT_P at the top of your shader file.

… where VERTEX_P and FRAGMENT_P it’s vertex and fragment shaders source code.

About Vertex Shader Source is the source code can be used to:

… is a set of attributes and functions performed by vertices and is responsible for running the vertex shaders.

About Fragment Shader Source is the source code can be used to:

… all the interpolated values computed in vertex shaders is used to code all effects that the application requires.

Also the fragment shader has no access to the frame buffer.

What do you know about shaders source code ?

Has one part of declarations like any programming language.

Also come with main function to run the shader.

The declarations is also like any language with variable , constants:

Uniforms are values which do not change during a rendering.

Attributes are only available in vertex shader and they are input values which change every vertex.

Varyings are used for passing data from a vertex shader to a fragment shader.

const this variables can be declared as const are compile-time constants and are not visible outside the shader that declares them.

If you know C language then the language syntax is C-like.

The default example from website :

The vertex shader

The fragment shader

Simple example I created using this website to show the normals.

Change this source code line from fragment shader:

The result rendering is:


You can see the object is fill with colors with x,y and z colors.

I will come with new tutorials about shaders.