API Docs for:
Show:

GL.Texture Class

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

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 (if cubemaps then pass an array[6] with the data for every face)
- 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 

check for more info about formats: https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/texImage2D

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
  • output_texture
  • temp_texture
)
Texture

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

Applies a blur filter of 5x5 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)

  • output_texture Texture

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

  • temp_texture Texture

    blur needs a temp texture, if not supplied it will use the temporary textures pool

Returns:

Texture:

returns the temp_texture in case you want to reuse it

bind

(
  • unit
)
Number

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

Binds the texture to one texture unit

Parameters:

  • unit Number

    texture unit

Returns:

Number:

returns the texture unit

blend

(
  • a
  • b
  • out
)
Object

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

blends texture A and B and stores the result in OUT

Parameters:

  • a Texture
  • b Texture
  • out Texture

    [optional]

Returns:

Object:

blit

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

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

Similar to CopyTo, but more specific, only for color texture_2D. It doesnt change the blend flag

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

copyTo

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

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

Copy content of one texture into another TODO: check using copyTexImage2D

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:246

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

drawTo

(
  • callback
)

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

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:745

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

Parameters:

  • color_texture Texture
  • depth_texture Texture
  • callback Function

drawToColorAndDepth

(
  • color_texture
  • depth_texture
  • callback
)

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

Static version of drawTo meant to be used with several buffers

Parameters:

  • color_texture Texture
  • depth_texture Texture
  • callback Function

fill

(
  • color
  • skip_mipmaps
)

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

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

Parameters:

  • color Vec4

    rgba

  • skip_mipmaps Boolean

    if true the mipmaps wont be updated

generateMetadata

() Object

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

generates some basic metadata about the image

Returns:

Object:

getPixels

(
  • cubemap_face
  • mipmap
)
ArrayBuffer

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

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

Parameters:

  • cubemap_face Number

    [optional] the index of the cubemap face to read (ignore if texture_2D)

  • mipmap Number

    level [optional, default is 0]

Returns:

ArrayBuffer:

the data ( Uint8Array, Uint16Array or Float32Array )

isDepthSupported

() Boolean

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

Returns if depth texture is supported by the GPU

Returns:

Boolean:

true if supported

renderQuad

(
  • x
  • y
  • width
  • height
)

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

Render texture in a quad of specified area

Parameters:

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

setPixels

(
  • data
  • no_flip
  • skip_mipmaps
  • cubemap_face
)

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

uploads some pixels to the texture (see uploadData method for more options)

Parameters:

  • data ArrayBuffer

    gl.UNSIGNED_BYTE or gl.FLOAT data

  • no_flip Boolean

    do not flip in Y

  • skip_mipmaps Boolean

    do not update mipmaps when possible

  • cubemap_face Number

    if the texture is a cubemap, which face

Texture.cubemapFromImage

(
  • image
  • options
)
Texture

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

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:1438

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:1575

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:1391

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:1264

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:1413

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

(
  • old_texture
  • options
)
Texture

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

Create a clone of a texture

Parameters:

  • old_texture Texture
  • options Object

Returns:

Texture:

the texture

Texture.fromTexture

(
  • width
  • height
  • pixels
  • options
)
Texture

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

Create a texture from an ArrayBuffer containing the pixels

Parameters:

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

Returns:

Texture:

the texture

Texture.fromURL

(
  • url
  • options
  • on_complete
)
Texture

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

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:1307

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:1552

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:1952

returns a black texture of 1x1 pixel

Returns:

Texture:

the black texture

Texture.getTemporary

(
  • width
  • height
  • options
  • gl
)
Texture

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

Returns a texture from the texture pool, if none matches the specifications it creates one

Parameters:

  • width Number

    the texture width

  • height Number

    the texture height

  • options Object | Texture

    to specifiy texture_type,type,format, it can be an object or another texture

  • gl WebGLContext

    [optional]

Returns:

Texture:

the textures that matches this settings

Texture.getWhiteTexture

() Texture

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

returns a white texture of 1x1 pixel

Returns:

Texture:

the white texture

Texture.releaseTemporary

(
  • tex
  • gl
)

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

Given a texture it adds it to the texture pool so it can be reused in the future

Parameters:

Texture.setUploadOptions

(
  • options
)

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

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:1824

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

toBinary

(
  • flip_y
)
ArrayBuffer

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

returns the texture file in binary format

Parameters:

  • flip_y Boolean

Returns:

ArrayBuffer:

the arraybuffer of the file containing the image

toBlob

() Blob

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

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:1689

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:934

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:324

Unbinds the texture

Parameters:

  • unit Number

    texture unit

Returns:

Number:

returns the texture unit

uploadData

(
  • data
  • options
)

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

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

Parameters:

  • data ArrayBuffer
  • options Object

    [optional] upload options (premultiply_alpha, no_flip, cubemap_face, mipmap_level)

uploadImage

(
  • img
  • options
)

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

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

Parameters:

  • img Image
  • options Object

    [optional] upload options (premultiply_alpha, no_flip)