Friends link: exam 70-450 cert 9a0-125 Adobe 9A0-127 exam Apple 9l0-410 Certification a00-202 Exam dumps IBM a2010-570 Exam dumps Pass A2160-669 Exam asc-029 Exam Dumps BCP-240 Actual Exam ISEB bh0-006 exam
GLOW » Hello Textures!
Parajumpers sale Parajumpers sale http://www.unifem.ch canada goose sale http://www.canadagooseoutlets.be https://www.gasinc.nl Canada Goose jas
2011+07+21

Hello Textures!

The GLOW.Texture capabilities just got updated to support all possible textures. Here’s a tutorial on how to use it. It’s probably good idea to go through Hello Cube and Hello Clone before this tutorial.

You can see the result here. Please view the source and have it at hand when reading this tutorial.

As you can see, we start by creating a very simple box shader with a texture. The interesting line in the shader definition object is…

texture: new GLOW.Texture( { data:"videos/test.webm",
                             minFilter:GL.NEAREST } )

As you see, we send an object into the GLOW.Texture constructor. The object can take the following properties:

  • url: The url to either an image or a video
  • data: The url (same as above) or a canvas-, video- or image-element, an Uint8Array or an object with cube map sides (see below)
  • width: Width of Uint8Array (see above)
  • height: Height of Uint8Array (see above)
  • internalFormat Internal format of input texture (default is GL.RGBA)
  • format: Format of WebGL texture (default is GL.RGBA)
  • type: Type of color (default is GL.UNSIGNED_BYTE)
  • autoUpdate: Should the data be automatically updated before rendering. If you’re using a cube map this is an object with the properties described below that you’d like to control.

Most of the time you don’t have to care about internalFormat, format and type, but if you have to it’s supported. You can read more about the types of formats here.

As you can see in the tutorial source we clone the video shader, except it’s transform and texture. This is all very straight forward. Let’s go back to…

texture: new GLOW.Texture( { data:"videos/test.webm",
                             minFilter:GL.NEAREST } )

As you can see, minFilter is set to GL.NEAREST. These are the filter properties you can set:

  • minFilter: Filter for minified texels
  • magFilter Filter for magnified texels

If you set minFilter to either GL.NEAREST or GL.LINEAR, mipmaps are not generated. This should be used on video textures as creation of mipmaps is a quite time consuming operation. Read more about the available types here.

Finally you can set wrapping, using the following properties:

  • wrapS: Horizontal wrapping mode
  • wrapT Vertical wrapping mode
  • wrap Horizontal and vertical wrapping mode

If you like to setup a cube map, the data property should be set to an object with the following properties:

  • posX: data for the positive X side (right)
  • negX: data for the negative X side (left)
  • posY: data for the positive Y side (up)
  • negY: data for the negative Y side (down)
  • posZ data for the positive Z side (front)
  • negZ data for the negative Z side (back)

The data can be either an url or a canvas-, video- or image-element or an Uint8Array. Note that you can have different types of data on the sides as long as they’ve got the same resolution.

That’s it. Have fun!