Materials: GL state changes

As of XML3D 5.2 materials can change the WebGL state during rendering. This can be used to fine tune how objects are drawn, for example to turn off depth testing or change the blending mode used. These states are changed immediately before drawing of the objects using that material begins and are changed back to the default values immediately after drawing ends.

You can set the value of one of these states using a <string> element like you would any other material property:

<material model="urn:xml3d:material:phong">
   <float3 name="diffuseColor">0 1 0</float3>
   <string name="gl-depthTest">false</string>
   <string name="gl-blendEquationSeparate">FUNC_ADD FUNC_SUBTRACT</string>
</material>

This material would disable depth testing and change the blend equations used for all objects that use this material. Note that the values should exactly match those in the regular WebGL call and properties that expect multiple values (like blendEquationSeparate) should separate these values with a space. Currently the following properties are supported:

Name	Default	Equivalent WebGL call
gl-blend	false	gl.enable(gl.BLEND) or gl.disable(gl.BLEND)
gl-blendEquationSeparate	FUNC_ADD FUNC_ADD	gl.blendEquationSeparate
gl-blendFuncSeparate	SRC_ALPHA ONE_MINUS_SRC_ALPHA	gl.blendFuncSeparate
gl-colorMask	true true true true	gl.colorMask
gl-cullFace	true	gl.enable(gl.CULL_FACE) or gl.disable(gl.CULL_FACE)
gl-cullFaceMode	BACK	gl.cullFace
gl-depthFunc	LESS	gl.depthFunc
gl-depthMask	true	gl.depthMask
gl-depthTest	true	gl.enable(gl.DEPTH_TEST) or gl.disable(gl.DEPTH_TEST)
gl-scissor	0 0 10 10	gl.scissor
gl-scissorTest	false	gl.enable(gl.SCISSOR_TEST) or gl.disable(gl.SCISSOR_TEST)

For more information about the supported values for each state see the documentation for the equivalent function call in the WebGLRenderingContext object.

We also have this small example of a scene that turns on scissor testing for some objects to draw them only in a small area of the screen.