Lighthouse & Cloud Textures

WebGL Shaders Combine Maps

Introduction Vertex Shader Fragment Shader Textures Summary

Introduction

See the textures, vertex and fragment shaders which multiply texture maps for the multiply lighthouse and clouds example. WebGL API method texture2D() samples two textures. Colors from each sample are multiplied then assigned to the built-in variable, gl_FragColor. The vertex shader follows.

Vertex Shader

A simple vertex shader multiplies the current vertex by the transformation matrix and the perspective matrix. The entire vertex shader follows.

attribute vec4 a_position;   
attribute vec2 a_tex_coord0;
varying vec2 v_tex_coord0;
           
uniform mat4 um4_matrix;
uniform mat4 um4_pmatrix; 
           
void main(void) {

gl_Position = um4_pmatrix * um4_matrix * a_position; 
 
v_tex_coord0 = a_tex_coord0;   
   
}

Fragment Shader

Initialize two texture units, one unit for Sampler2D u_sampler0 and another for u_sampler1. Sample colors from each texture unit, with the same texels. Multiply colors together, then output through the built-in varialbe, gl_FragColor, as follows.

precision mediump float;
uniform sampler2D u_sampler0;
uniform sampler2D u_sampler1;
varying vec2 v_tex_coord0;
     
void main(void) {

vec4 color0 = texture2D(
 u_sampler0, 
 v_tex_coord0
);

vec4 color1 = texture2D(
 u_sampler1, 
 v_tex_coord0
);

gl_FragColor = color0 * color1; 

}

Textures

The fragment shader, for the multiply lighthouse and clouds example, combines two textures representing a lighthouse and clouds. See the lighthouse and cloud images below. You can substitute any texture map for unusual effects.

Map of Lighthouse

Lighthouse

Map of Clouds

Clouds

Summary

This page included the textures, vertex and fragment shaders which multiply texture maps for the multiply lighthouse and clouds example. WebGL API method texture2D() samples two textures. Colors from each sample are multiplied then assigned to the built-in variable, gl_FragColor.

Tags

WebGL shaders, WebGL shader, WebGL examples, Web GL, HTML5, 3D Web, OpenGL ES, gpu, shader programming, shader tutorial, 3D graphics, opengl shading language, vertex shader, webgl shader language, vertex shader tutorial, javascript, html5, learn webgl, webgl samples, html5 canvas tutorial,
Learn 3D Programming Learn 3D Programming
Copyright © 2015 Seven Thunder Software. All Rights Reserved.