Blotter.js


  • construction var material = new Blotter.Material();

    Create a new instance of Blotter.Material.

  • needsUpdate material.needsUpdate = true

    Rarely, you may need to perform actions on your instances of Blotter.Material that require it to tell the instance of Blotter to repeat important preparatory steps necessary for rendering the instance's texts. To do so, set the value of material.needsUpdate to true and the instance will take care of the rest. You can listen for the Blotter instance's update event if you need to do any work after the update has completed.

  • mainImage material.mainImage

    For every Blotter Material, there is an underlying GLSL fragment shader that describes how the individual Material's effect will be rendered. The material.mainImage property returns the shader's GLSL in string form. Setting this property after your Blotter.Material object's initialization requires that your Blotter.Material instance be rebuilt by setting the value of its needsUpdate property to true.

  • uniforms material.uniforms

    The fundamental interface for all effects in Blotter. Every Material will provide its own array of uniform objects, each having a type and a value. To manipulate any effect, simply set the value of the uniform you wish to change.

    Listed below are the four uniform types available in Blotter.

    • "1f"

      For "1f" type uniforms, values should be set using floating point values.
      material.uniforms.myUniform1.value = 0.5;.

    • "2f"

      For "2f" type uniforms, values should be set using an array of two floating point values.
      material.uniforms.myUniform2.value = [0.5, 0.5];.

    • "3f"

      For "3f" type uniforms, values should be set using an array of three floating point values.
      material.uniforms.myUniform3.value = [0.5, 0.5, 0.5];.

    • "4f"

      For "4f" type uniforms, values should be set using an array of four floating point values.
      material.uniforms.myUniform4.value = [0.5, 0.5, 0.5, 0.5];.

    As stated, every Blotter Material will provide its own uniforms unique to the characteristics of its own effect. However, there are a handful of uniforms on which all Blotter Materials rely. These are listed below.

    • uResolution

      The resolution of an individual text within the mapping material being rendered by your material. Type "2f". You should never set the value of this uniform yourself.

    • uGlobalTime

      The global time in seconds. Type "1f". You should never set the value of this uniform yourself.

    • uTimeDelta

      The render time in seconds. Type "1f". You should never set the value of this uniform yourself.

    • uBlendColor

      The base color against which all blending should occur within an effect. Type "4f". The default value for this uniform is white, or [1.0, 1.0, 1.0, 1.0], where each index in the array represent an R,G,B, and A value respectively in a 0.0 to 1.0 range.

      This uniform is important for effects that sample the area around your texts for blending purposes, such as for the RGB splitting that occurs in the ChannelSplitMaterial, and you should set it to match the RGBA color that will be the background for any of your texts.

    • uPixelRatio

      The pixel ratio of the user's device. Type "1f". You should never set the value of this uniform yourself.