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

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

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

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

blends texture A and B and stores the result in OUT

Parameters:

  • a Texture
  • b Texture
  • out Texture

    [optional]

Returns:

Object:

copyTo

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

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

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

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

drawTo

(
  • callback
)

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

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

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

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

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

generates some basic metadata about the image

Returns:

Object:

getPixels

(
  • type
  • force_rgba
)
ArrayBuffer

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

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

Returns if depth texture is supported by the GPU

Returns:

Boolean:

true if supported

renderQuad

(
  • x
  • y
  • width
  • height
)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

returns a black texture of 1x1 pixel

Returns:

Texture:

the black texture

Texture.getTemporary

(
  • width
  • height
  • options
  • gl
)
Texture

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

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

    to specifiy texture_type,type,format

  • gl WebGLContext

    [optional]

Returns:

Texture:

the textures that matches this settings

Texture.getWhiteTexture

() Texture

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

returns a white texture of 1x1 pixel

Returns:

Texture:

the white texture

Texture.releaseTemporary

(
  • tex
  • gl
)

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

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

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

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

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

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

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

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

Unbinds the texture

Parameters:

  • unit Number

    texture unit

Returns:

Number:

returns the texture unit

uploadData

(
  • data
  • options
)

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

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)

uploadImage

(
  • img
  • options
)

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

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

Parameters:

  • img Image
  • options Object

    [optional] upload options (premultiply_alpha, no_flip)