1.0.1 • Published 8 years ago
gl-texture-cube v1.0.1
gl-texture-cube
Wraps WebGL's cube texture object.
Note: This API is experimental and will probably change to reach parity with gl-texture2d.
Install
npm install gl-texture-cube
Example
Javascript
var Box3D = require('geo-3d-box')
var TextureCube = require('gl-texture-cube')
var boxData = Box3D({size: 2})
var box = Geometry(gl)
.attr('aPosition', boxData.positions)
.faces(boxData.cells)
var textures = generateCubemapTextures()
var cubemap = TextureCube(gl, textures)
program.uniforms.uTexture = cubemap.bind(0)
program.uniforms.uModel = model
program.uniforms.uView = view
program.uniforms.uProjection = projection
box.draw()
Vertex Shader
attribute vec3 aPosition;
uniform mat4 uModel;
uniform mat4 uView;
uniform mat4 uProjection;
varying vec3 vNorm;
void main() {
gl_Position = uProjection * uView * uModel * vec4(aPosition, 1.0);
vNorm = aPosition;
}
Fragment Shader
uniform samplerCube uTexture;
varying vec3 vNorm;
void main() {
gl_FragColor = textureCube(uTexture, vNorm);
}
API
var createTextureCube = require('gl-texture-cube')
Constructor
var cubemap = createTextureCube(gl, domElements[, format=gl.RGBA, type=gl.UNSIGNED_BYTE])
Creates a texture from domElements
, structured as:
{
pos: {
x: domElement,
y: domElement,
z: domElement,
},
neg: {
x: domElement,
y: domElement,
z: domElement
}
}
...where each domElement
can be one of:
- An ImageData object
- An HTMLCanvas object
- An HTMLImage object
- An HTMLVideo object
Takes a WebGL context gl
. Optionally takes a WebGL data format format
and storage type type
.
Methods
cubemap.bind([textureUnit])
Binds the texture. If the optional textureUnit
is not defined then
the active texture is not changed.
cubemap.dispose()
Destroys the texture and releases its resources.
cubemap.generateMipmap()
Generates mipmaps for the texture.
Properties
cubemap.wrap
Gets/sets the wrap behavior for the texture in both dimensions.
Defaults to [gl.CLAMP_TO_EDGE, gl.CLAMP_TO_EDGE]
. Example:
cubemap.wrap = [gl.REPEAT, gl.REPEAT]
cubemap.magFilter
& cubemap.minFilter
Gets/sets the magnification and minification filter. Defaults
to gl.NEAREST
.
Credits
Based on gl-texture2d.