Materials: GL state changes

Christian Schlinkmann edited this page Apr 25, 2016 · 2 revisions

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.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.