Working with Textures

Working with Textures

Overview

Common ways textures are used as image and data sources in shaders.

Tools

WebGL

Working With Textures

Today, we go back to WebGL. We’ll start by adding texture loading to the from-scratch version of glslCanvas. Then we’ll look at several common ways textures are used as image and data sources in shaders.

Example Source

Loading Textures

Setup:

  1. Load/Generate Image data.
  2. allocate - createTexture()
  3. bind the texture to active unit - bindTexture()
  4. upload data - texImage2D()
  5. configure filtering and wraping - texParameteri()

Draw:

  1. select the active texture unit - activeTexture()
  2. bind the texture to active unit - bindTexture()
  3. store texture unit id in glsl sampler2D - gl.uniform1i()

Loading is Asynchronous

Mipmapping

Powers of 2

WebGL 1 only supports mipmapping when textures dimensions to be powers of two. WebGL 1 also requires wrapping to be CLAMP_TO_EDGE for NPOT textures. WebGL supports NPOT textures fully. Its still very common to use power of two textures.

TEXTURE_WRAP_S + TEXTURE_WRAP_T

  • CLAMP_TO_EDGE
  • MIRRORED_REPEAT
  • REPEAT

TEXTURE_MIN_FILTER

  • LINEAR
  • NEAREST
  • NEAREST_MIPMAP_NEAREST
  • LINEAR_MIPMAP_NEAREST
  • NEAREST_MIPMAP_LINEAR
  • LINEAR_MIPMAP_LINEAR.

TEXTURE_MAG_FILTER

  • LINEAR
  • NEAREST

glTexParameterf

MDN: Using Textures

Textures as Images

The following examples use this image texture.

pear

01_texture/

loading textures wrapping filtering texture2D mipmaps

MDN: Using Textures in WebGL

glTexParameter reference

02_color/

color arithmetic

GLSL RGB to HSL

03_blur/

box blur gaussian blur

Gaussian Kernel Calculator

04_emboss/

Convolution Explorer Jam3/glsl-fast-gaussian-blur Wikipedia: Kernel Image Processing

Textures as Data

The following examples use these data textures.

color_ramp noise normal

Substance Designer

05_color_ramp/

06_texture_noise/

07_normal_map/