WebGL Points Source

Square Points With WebGL Explosion WebGL Points

Overview

The source code on this page includes JavaScript and shaders used to display the WebGL Particle Explosion example. The WebGL Particle Explosion project combines concepts used in three WebGL point examples including WebGL Square Points, WebGL Face Mapped Points and WebGL Simple Round Points.

JavaScript

/**
* Face mapped points from
* a 2D square plane.
* Points larger in the center
* and smaller on the perimeter.
* Uses blendFunc().
* @param s: String path to image file.
*/
var GLPointsExplode = function(s){ 

if (typeof Float32Array === 'undefined'){
 new GLControl(0,null,null,null);
 return;
} 

var shapes = new PlanePoints();

var aIm = new Array();

// Initialize the
// entity with a texture.
var e =  new GLEntity(
 s,
 0
);

e.nOffset = Number(
 shapes.aOffset[0]
);

e.nCount = Number(
 shapes.aCount[0]
);

e.matrix[14] = -2.5;

aIm.push(e);
 
e =  new GLEntity(
 null,1
);

e.nOffset = Number(
 shapes.aOffset[0]
);

e.nCount = Number(
 shapes.aCount[0]
);

e.matrix[14] = -5;
e.matrix[12] = -0.2;
e.matrix[13] = -0.2; 

aIm.push(e);
 
e =  new GLEntity(
 null,
 2
);

e.nOffset = Number(
 shapes.aOffset[0]
);

e.nCount = Number(
 shapes.aCount[0]
);

e.matrix[14] = -5;
e.matrix[12] = 0.2;
e.matrix[13] = 0.2; 
aIm.push(e);
 
var controller = new GLControl
(
 shapes.aVertices,
 shapes.aIndices,  
 aIm,
 this
);  
  
if(controller == null){
 return;
}   
};

GLPointsExplode.prototype = {

JavaScript Initialization

init:function(controller) { 
var gl = controller.gl;

var glDemo = controller.glDemo; 

var glUtils = controller.glUtils = new GLUtils();

var ePlane0 = controller.aEntities[0];

// Clear screens with black.
gl.clearColor(
 0.0,
 0.0,
 0.0,
 1.0
);

controller.N_RAD = Number(
 0.005
);
  
// Upload the
// model matrix
// to the
// vertex shader.
gl.clearColor(
 0.0,
 0.0,
 0.0,
 1.0
);
 
// Vertex attributes.
// Zero stride
// between vertices.
gl.vertexAttribPointer
(
 controller.aPosition, 
 3, 
 gl.FLOAT, 
 gl.FALSE, 
 0, 
 0
); 

// Uniform to modify X
// coordinatesby time.
glDemo.ufX = gl.getUniformLocation(
 controller.program, 
 "uf_x"
); 
 
// Uniform to modify Y
// coordinates by time.
glDemo.ufY = gl.getUniformLocation(
 controller.program, 
 "uf_y"
); 
 
// Change size of
// points by time.
glDemo.ufPointSize = gl.getUniformLocation(
 controller.program, 
 "uf_pointsize"
); 
 
// Change darkness of
// points by time.
glDemo.ufDark = gl.getUniformLocation(
 controller.program, 
 "uf_dark"
); 
 
gl.enable(
 gl.BLEND
);

gl.blendFunc(
 gl.ONE, 
 gl.ONE_MINUS_CONSTANT_COLOR
); 

// Postpone setting up 
// responsive design.
// Window resize triggers
// rendering.
// Setup rendering properties
// before the first render.
var responsive = new GLResponsive(
 controller,
 null
); 

if (responsive == null){
 controller.eDebug.innerHTML = "GLResponsive == null";
}
},

JavaScript render()

render: function(controller){

var gl = controller.gl;

var glDemo = controller.glDemo;

var aEntities = controller.aEntities;


// Normalize the current X,Y touch point.
// Range [-1.0...+1.0]

var nX = Number(
 glDemo.nX - glDemo.nMiddle
);

var nXA = Math.abs(nX);

nX /= glDemo.nMiddle;

 
var nY = Number(
 glDemo.nY - glDemo.nMiddle
);

var nYA = Math.abs(nY);

nY /= glDemo.nMiddle;

var nAvg = (nXA+nYA)/glDemo.nMiddle;

var nPointSize = (1 - nAvg) * 128;

 
gl.clear(
 gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT
); 
 
gl.uniform1f
(
 glDemo.ufX,
 nX
);
 
gl.uniform1f
(
 glDemo.ufY,
 nY
);
 
gl.uniform1f
(
 glDemo.ufPointSize,
 nPointSize
);
 
var matrix = mat4.create();

for (var i = 0; i < aEntities.length; i++){

var e = aEntities[0];
  
controller.nRad += controller.N_RAD;

mat4.set(
 e.matrix,
 matrix
);

if (i % 2 == 1){
 mat4.rotate(
 matrix,
 controller.nRad,
 [0,0,1]
);

}
else {
 mat4.rotate(
  matrix,
  -controller.nRad,
  [0,0,1]
 );
}  

gl.uniformMatrix4fv
(
 controller.uMatrixTransform, 
 false, 
 new Float32Array
 (
  matrix
 )
); 
   

gl.drawElements
(
 gl.POINTS, 
 e.nCount, 
 gl.UNSIGNED_SHORT, 
 e.nOffset
); 
}
 
if (controller.nRad > 15){
 controller.nRad = 0;
}
  
},

};

Explosion Points Are Mapped with the Following Texture

See the WebGL Particle Explosion point example in action.

WebGL Face Mapped Points Use the Following Texture

See the WebGL Face Mapped Points point example.

Vertex Shader

attribute vec4 a_position;

uniform mat4 um4_matrix;
uniform mat4 um4_pmatrix; 

uniform float uf_x;
uniform float uf_y;
uniform float uf_pointsize;

void main() {

vec4 pos = a_position;
pos.x *= uf_x;
pos.y *= uf_y;
   
gl_Position =  um4_pmatrix * 
 um4_matrix *  
 pos; 
 
gl_PointSize = uf_pointsize;
}

Fragment Shader

precision mediump float;

uniform sampler2D u_sampler0;

const float cf_dark = 0.2;

void main() {
  
// gl_PointCoord.x and y range [0.0 .. 1.0]
// The center of a point equals (0.5,0.5)
// Horizontal or vertical distance
// to edges of a square 0.5.
// distance to corners of a square 0.707.
float f_center_distance = distance( 
 gl_PointCoord, 
 vec2(0.5,0.5) 
);

if ( f_center_distance >= 0.5 ) {
 discard;  
}
  
vec4 color0 = texture2D(
u_sampler0, 
gl_PointCoord
); 
  
gl_FragColor = color0 * cf_dark; 
}
 

Tags