← Previous Section Next Section →

Using Custom Shaders


Within 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.

An object illuminated using custom shader code inside the HTML page.

Shader Variables

TypeNameComment
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

Back to page top ⤴

Get this X3DOM example:


Read more about the X3DOM nodes used in this tutorial: