Wraps WebGL's cube texture object.
Note: This API is experimental and will probably change to reach parity with gl-texture2d.
npm install gl-texture-cube
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()
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;
}
uniform samplerCube uTexture;
varying vec3 vNorm;
void main() {
gl_FragColor = textureCube(uTexture, vNorm);
}
var createTextureCube = require('gl-texture-cube')
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
.
Binds the texture. If the optional textureUnit
is not defined then
the active texture is not changed.
Destroys the texture and releases its resources.
Generates mipmaps for the texture.
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]
Gets/sets the magnification and minification filter. Defaults
to gl.NEAREST
.
Based on gl-texture2d.