Multiply Geometric Shapes

WebGL Texture Maps & Shaders

Introduction Vertex Shader Fragment Shader Texture Maps Summary

Introduction

See the textures, vertex and fragment shaders which multiply texture maps for the multiply geometric shapes 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 geometric shapes example, combines two textures representing flat two dimensional geometric shapes and a sphere. See the geometry and sphere images below. You can substitute any texture map for unusual effects.

Geometry Map

Geometry

Sphere Map

Sphere

Summary

This page included the textures, vertex and fragment shaders which multiply texture maps for the multiply geometric shapes 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.