API Docs for:
Show:

GL.Texture Class

Defined in: ../src/texture.js:5
Module: GL

Texture class to upload images to the GPU, default is gl.TEXTURE_2D, gl.RGBA of gl.UNSIGNED_BYTE with filters set to gl.LINEAR and wrap to gl.CLAMP_TO_EDGE
There is a list of options
==========================
- texture_type: gl.TEXTURE_2D, gl.TEXTURE_CUBE_MAP, default gl.TEXTURE_2D
- format: gl.RGB, gl.RGBA, gl.DEPTH_COMPONENT, default gl.RGBA
- type: gl.UNSIGNED_BYTE, gl.UNSIGNED_SHORT, gl.HALF_FLOAT_OES, gl.FLOAT, default gl.UNSIGNED_BYTE
- filter: filtering for mag and min: gl.NEAREST or gl.LINEAR, default gl.NEAREST
- magFilter: magnifying filter: gl.NEAREST, gl.LINEAR, default gl.NEAREST
- minFilter: minifying filter: gl.NEAREST, gl.LINEAR, gl.LINEAR_MIPMAP_LINEAR, default gl.NEAREST
- wrap: texture wrapping: gl.CLAMP_TO_EDGE, gl.REPEAT, gl.MIRROR, default gl.CLAMP_TO_EDGE (also accepts wrapT and wrapS for separate settings)
- pixel_data: ArrayBufferView with the pixel data to upload to the texture, otherwise the texture will be black
- premultiply_alpha : multiply the color by the alpha value when uploading, default FALSE
- no_flip : do not flip in Y, default TRUE
- anisotropic : number of anisotropic fetches, default 0

Constructor

GL.Texture

(
  • width
  • height
  • options
)

Defined in ../src/texture.js:5

Parameters:

  • width Number

    texture width (any supported but Power of Two allows to have mipmaps), 0 means no memory reserved till its filled

  • height Number

    texture height (any supported but Power of Two allows to have mipmaps), 0 means no memory reserved till its filled

  • options Object

    Check the list in the description

Methods

applyBlur

(
  • offsetx
  • offsety
  • intensity
  • temp_texture
  • output_texture
)
Texture

Defined in ../src/texture.js:731

Applies a blur filter of four pixels to the texture (be careful using it, it is slow)

Parameters:

  • offsetx Number

    scalar that multiplies the offset when fetching pixels horizontally (default 1)

  • offsety Number

    scalar that multiplies the offset when fetching pixels vertically (default 1)

  • intensity Number

    scalar that multiplies the result (default 1)

  • temp_texture Texture

    blur needs a temp texture, if not supplied it will create a new one each time!

  • output_texture Texture

    [optional] if not passed the output is the own texture

Returns:

Texture:

returns the temp_texture in case you want to reuse it

bind

(
  • unit
)
Number

Defined in ../src/texture.js:174

Binds the texture to one texture unit

Parameters:

  • unit Number

    texture unit

Returns:

Number:

returns the texture unit

copyTo

(
  • target_texture
  • [shader=null]
  • [uniforms=null]
)

Defined in ../src/texture.js:602

Copy content of one texture into another

Parameters:

  • target_texture GL.Texture
  • [shader=null] GL.Shader optional

    optional shader to apply while copying

  • [uniforms=null] Object optional

    optional uniforms for the shader

delete

()

Defined in ../src/texture.js:132

Free the texture memory from the GPU, sets the texture handler to null

drawTo

(
  • callback
)

Defined in ../src/texture.js:315

Render to texture using FBO, just pass the callback to a rendering function and the content of the texture will be updated If the texture is a cubemap, the callback will be called six times, once per face, the number of the face is passed as a second parameter for further info about how to set up the propper cubemap camera, check the GL.Texture.cubemap_camera_parameters with the direction and up vector for every face.

Keep in mind that it tries to reuse the last renderbuffer for the depth, and if it cannot (different size) it creates a new one (throwing the old)

Parameters:

  • callback Function

    function that does all the rendering inside this texture

drawToColorAndDepth

(
  • color_texture
  • depth_texture
  • callback
)

Defined in ../src/texture.js:462

Static version of drawTo meant to be used with several buffers

Parameters:

  • color_texture Texture
  • depth_texture Texture
  • callback Function

drawToColorAndDepth

(
  • color_texture
  • depth_texture
  • callback
)

Defined in ../src/texture.js:569

Similar to drawTo but it also stores the depth in a depth texture

Parameters:

  • color_texture Texture
  • depth_texture Texture
  • callback Function

fill

(
  • color
)

Defined in ../src/texture.js:685

Fills the texture with a constant color (uses gl.clear)

Parameters:

  • color Vec4

    rgba

generateMetadata

() Object

Defined in ../src/texture.js:1430

generates some basic metadata about the image

Returns:

Object:

getPixels

(
  • type
  • force_rgba
)
ArrayBuffer

Defined in ../src/texture.js:1232

returns an ArrayBuffer with the pixels in the texture, they are fliped in Y

Parameters:

  • type Enum

    gl.UNSIGNED_BYTE or gl.FLOAT, if omited then the one in the texture is read

  • force_rgba Bool

    if yo want to force the output to have 4 components per pixel (useful to transfer to canvas)

Returns:

ArrayBuffer:

the data ( Uint8Array or Float32Array )

isDepthSupported

() Boolean

Defined in ../src/texture.js:164

Returns if depth texture is supported by the GPU

Returns:

Boolean:

true if supported

renderQuad

(
  • x
  • y
  • width
  • height
)

Defined in ../src/texture.js:700

Render texture in a quad of specified area

Parameters:

  • x Number
  • y Number
  • width Number
  • height Number

Texture.cubemapFromImage

(
  • image
  • options
)
Texture

Defined in ../src/texture.js:1106

Create a cubemap texture from a single image that contains all six images If it is a cross, it must be horizontally aligned, and options.is_cross must be equal to the column where the top and bottom are located (usually 1 or 2) otherwise it assumes the 6 images are arranged vertically, in the order of OpenGL: +X, -X, +Y, -Y, +Z, -Z

Parameters:

  • image Image
  • options Object

Returns:

Texture:

the texture

Texture.cubemapFromImages

(
  • images
  • options
)
Texture

Defined in ../src/texture.js:1055

Create a cubemap texture from a set of 6 images

Parameters:

  • images Array
  • options Object

Returns:

Texture:

the texture

Texture.cubemapFromURL

(
  • image
  • options
  • on_complete
)
Texture

Defined in ../src/texture.js:1191

Create a cubemap texture from a single image url that contains the six images if it is a cross, it must be horizontally aligned, and options.is_cross must be equal to the column where the top and bottom are located (usually 1 or 2) otherwise it assumes the 6 images are arranged vertically.

Parameters:

  • image Image
  • options Object
  • on_complete Function

    callback

Returns:

Texture:

the texture

Texture.fromDDSInMemory

(
  • DDS
  • options
)
Texture

Defined in ../src/texture.js:1008

Create a texture from an ArrayBuffer containing the pixels

Parameters:

  • DDS ArrayBuffer

    data

  • options Object

Returns:

Texture:

the texture

Texture.fromImage

(
  • image
  • options
)
Texture

Defined in ../src/texture.js:895

Create a texture from an Image

Parameters:

  • image Image
  • options Object

Returns:

Texture:

the texture

Texture.fromShader

(
  • width
  • height
  • shader
  • options
)
Texture

Defined in ../src/texture.js:1030

Create a generative texture from a shader ( must GL.Shader.getScreenShader as reference for the shader )

Parameters:

  • width Number
  • height Number
  • shader Shader
  • options Object

Returns:

Texture:

the texture

Texture.fromTexture

(
  • width
  • height
  • pixels
  • options
)
Texture

Defined in ../src/texture.js:973

Create a texture from an ArrayBuffer containing the pixels

Parameters:

  • width Number
  • height Number
  • pixels ArrayBuffer
  • options Object

Returns:

Texture:

the texture

Texture.fromTexture

(
  • old_texture
  • options
)
Texture

Defined in ../src/texture.js:950

Create a clone of a texture

Parameters:

  • old_texture Texture
  • options Object

Returns:

Texture:

the texture

Texture.fromURL

(
  • url
  • options
  • on_complete
)
Texture

Defined in ../src/texture.js:836

Loads and uploads a texture from a url

Parameters:

  • url String
  • options Object
  • on_complete Function

Returns:

Texture:

the texture

Texture.fromVideo

(
  • video
  • options
)
Texture

Defined in ../src/texture.js:928

Create a texture from a Video

Parameters:

  • video Video
  • options Object

Returns:

Texture:

the texture

Texture.generateCubemapCrossFaces

(
  • width
  • column
)
Object

Defined in ../src/texture.js:1168

Given the width and the height of an image, and in which column is the top and bottom sides of the cubemap, it gets the info to pass to Texture.cubemapFromImage in options.faces

Parameters:

  • width Number

    of the CROSS image (not the side image)

  • column Number

    the column where the top and the bottom is located

Returns:

Object:

object to pass to Texture.cubemapFromImage in options.faces

Texture.getBlackTexture

() Texture

Defined in ../src/texture.js:1468

returns a black texture of 1x1 pixel

Returns:

Texture:

the black texture

Texture.getWhiteTexture

() Texture

Defined in ../src/texture.js:1452

returns a white texture of 1x1 pixel

Returns:

Texture:

the white texture

Texture.setUploadOptions

(
  • options
)

Defined in ../src/texture.js:215

Unbinds the texture

Parameters:

  • options Object

    a list of options to upload the texture

    • premultiply_alpha : multiply the color by the alpha value, default FALSE
    • no_flip : do not flip in Y, default TRUE

toBase64

(
  • flip_y
)
String

Defined in ../src/texture.js:1394

returns a base64 String containing all the data from the texture

Parameters:

  • flip_y Boolean

    if you want to flip vertically the image, WebGL saves the images upside down

Returns:

String:

the data in base64 format

toBlob

() Blob

Defined in ../src/texture.js:1364

returns a Blob containing all the data from the texture

Returns:

Blob:

the blob containing the data

toCanvas

(
  • canvas
  • flip_y
  • max_size
)

Defined in ../src/texture.js:1287

Copy texture content to a canvas

Parameters:

  • canvas Canvas

    must have the same size, if different the canvas will be resized

  • flip_y Boolean

    optional, flip vertically

  • max_size Number

    optional, if it is supplied the canvas wont be bigger of max_size (the image will be scaled down)

toViewport

(
  • shader
  • uniforms
)

Defined in ../src/texture.js:668

Render texture in a quad to full viewport size

Parameters:

  • shader Shader

    to apply, otherwise a default textured shader is applied [optional]

  • uniforms Object

    for the shader if needed [optional]

unbind

(
  • unit
)
Number

Defined in ../src/texture.js:188

Unbinds the texture

Parameters:

  • unit Number

    texture unit

Returns:

Number:

returns the texture unit

uploadData

(
  • data
  • options
)

Defined in ../src/texture.js:272

Uploads data to the GPU (data must have the appropiate size)

Parameters:

  • data ArrayBuffer
  • options Object

    [optional] upload options (premultiply_alpha, no_flip)

uploadImage

(
  • img
  • options
)

Defined in ../src/texture.js:239

Given an Image/Canvas/Video it uploads it to the GPU

Parameters:

  • img Image
  • options Object

    [optional] upload options (premultiply_alpha, no_flip)