The WebGL Computational Library
Documentation Installation Textures Texture Float32Texture Int32Texture Uint32Texture ImageTexture CanvasTexture TableTexture copyTexture Solvers Solver Copy setUniformInSolvers setUniformsInSolvers SignalPlot Plot1D Plot2D Tvsx VolumeRayCaster getColormapList Probe TextureReader ProbeRecorder IntervalCaller saveCanvas APD OrbitalCameraControl MouseListener ClickListener DoubleClickListener CtrlClickListener ShiftClickListener CommandClickListener CtrlShiftClickListener ShiftCtrlClickListener LongClickListener Storage saveToXML loadFromXML xorwow random Gui Editor glMatrix

ImageTexture (class)

Creates a Float32Texture from an input JavaScript image object. The image object needs to be already loaded for the class constructor to work. The color channels will be normalized to be between 0 and 1.

Each image can be used only once for creating textures.


The constructor can be called as

var textureInstance = new Abubu.ImageTexture(image, options) ;

The arguments are:

  1. image

    image object is compulsory, must be already loaded into the page, and should not be previously used.

  2. options

    object of optional named arguments. If none is provided, the default values will be assumed. The options object's available properties are:

    • wrapS

      String indicating wrapping in the horizontal direction. Possible values are

         'clamp_to_edge'   (default)
    • wrapT

      String indicating wrapping in the vertical direction. Possible values are

         'clamp_to_edge'   (default)
    • magFilter

      Texture magnification filter. Possible values are

         'nearest'         (default)
    • minFilter

      Texture minification filter. Possible values are

         'nearest'         (default)

Instance properties

The following properties have read and write permissions and hence can be modified.

\(^\dagger \)Read-Only property.

For more information on these properties, see the explanations in the constructor section.


Consider the following HTML body:

<body onload='loadWebGL();'>
   <img src='somePicture.png' id='pic'   style='display:none'>

We can define an ImageTexture based on the image loaded on the page by the following JavaScript code.

function loadWebGL(){
   var myImage = document.getElementById('pic') ;

   var imageTexture = new Abubu.ImageTexture(myImage,{
      wrapS : 'repeat' ,
      wrapT : 'mirrored_repeat' ,
   } ) ;

   return ;

By setting the onload attribute of the HTML body, and setting up the image texture inside the callback function loadWebGL, we ensure that the image is loaded before accessing it for texture definition. We have set the wrapping in the S direction to 'repeat' and in T direction to 'mirrored_repeat'.