documentationWithin this tutorial, you will learn how to use your own shader programs inside an X3DOM scene. The standard X3D way to integrate shader programs into X3D scenes, which is also implemented by X3DOm, is the ComposedShader node. There are already some existing documentation resources about this standard X3D node, for instance in the InstantReality tutorials. When it comes to using custom shaders in X3DOM, the most important point is clearly to know which shader variables are available for your shader programs. The table on the bottom of this tutorial page lists all of them.
The example file from this tutorial illustrate some vertex and fragment shader code, which realizes a simple cool-warm shading (aka gooch shading). In this example, we have used a directionalLight node to illuminate the scene, and we receive the direction inside the shader with the variable light0_Direction. Furthermore, two sliders allow to change two parameters for the fragment shader during runtime. This is achieved by inserting a field node inside the ComposedShader node and by manipulating its value attribute. Please check the example file to see how it works - you can also use it as a base for developing your own shader code.
| Type | Name | Comment |
|---|---|---|
| attribute vec3 | position | vec4 if normals embedded |
| attribute vec3 | normal | |
| attribute vec3 | texcoord | |
| attribute vec3 | color | vec4 for ColorRGBA |
| attribute vec2 | tangent | from FloatVertexAttribute |
| attribute vec3 | binormal | from FloatVertexAttribute |
| uniform mat4 | viewMatrix | |
| uniform mat4 | viewMatrixInverse | |
| uniform mat4 | projectionMatrix | |
| uniform mat4 | normalMatrix | |
| uniform mat4 | modelViewMatrix | |
| uniform mat4 | modelViewMatrixInverse | |
| uniform mat4 | modelViewProjectionMatrix | |
| uniform mat4 | worldMatrix | |
| uniform mat4 | worldInverseTranspose | |
| uniform mat4 | texTrafoMatrix | texture coordinate transform matrix |
| uniform sampler2D | diffuseMap | from CommonSurfaceShader |
| uniform sampler2D | normalMap | from CommonSurfaceShader |
| uniform sampler2D | specularMap | from CommonSurfaceShader |
| uniform sampler2D | cubeMap | from ComposedCubeMap |
| uniform vec3 | diffuseColor | |
| uniform vec3 | specularColor | |
| uniform vec3 | emissiveColor | |
| uniform float | shininess | |
| uniform float | transparency | |
| uniform float | ambientIntensity | |
| uniform float | light0_On | same for light1, light2, etc. |
| uniform float | light0_Type | same for light1, light2, etc. |
| uniform vec3 | light0_Location | same for light1, light2, etc. |
| uniform vec3 | light0_Direction | same for light1, light2, etc. |
| uniform vec3 | light0_Color | same for light1, light2, etc. |
| uniform vec3 | light0_Attenuation | same for light1, light2, etc. |
| uniform float | light0_Radius | same for light1, light2, etc. |
| uniform float | light0_Intensity | same for light1, light2, etc. |
| uniform float | light0_AmbientIntensity | same for light1, light2, etc. |
| uniform float | light0_BeamWidth | same for light1, light2, etc. |
| uniform float | light0_CutOffAngle | same for light1, light2, etc. |
| uniform float | light0_ShadowIntensity | same for light1, light2, etc. |
| uniform vec3 | fogColor | |
| uniform vec3 | fogType | |
| uniform vec3 | fogRange |
Display example HTML file
Download full example (.zip archive)