Lighthouse & Cloud Textures

WebGL Shaders Combine Maps

Introduction Textures Summary

Introduction

This page displays the textures multiplied within WebGL shaders. The fragment shader follows. Coordinates from two textures are sampled with texture2D(). Colors for the two samples are multiplied then assigned to gl_FragColor.

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 combines two textures representing a lighthouse and clouds. See the lighthouse and cloud image below.

Lighthouse
Clouds

Summary

This page displayed the textures multiplied within WebGL shaders. The fragment shader was included. Coordinates from two textures are sampled with texture2D(). Colors for the two samples are multiplied then assigned to gl_FragColor.

Copyright © 2015 Seven Thunder Software. All Rights Reserved.