WebGL Scenes: Responsive Web Design Screen Shots

WebGL Points Source

Point Explosion Interactive Example WebGL Points Tutorial JavaScript Vertex Shader Fragment Shader Explosion Texture WebGL Face Mapped Points

Overview

The source code on this page includes JavaScript and shaders used to display the WebGL Particle Explosion example. The Particle Explosion combines features used in the other WebGL point examples.

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'){
 this.viewGetWebGL();
 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";
}
},

viewGetWebGL: function(){ 

var image = document.createElement(
 "IMG"
);

image.src = "http://www.SevenThunderSoftware.com/assets/ss-gl-get.png";

image.onclick=function(){window.location='http://get.webgl.org';};

image.className="ex";
 
var eGraphic = document.getElementById('eGraphic'); 

eGraphic.innerHTML = "Your browser might not support WebGL.
"; eGraphic.innerHTML += "For more information see http://get.webgl.org.
"; eGraphic.appendChild( image ); },

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.

Particles for Explosion

WebGL Face Mapped Points Use the Following Texture

See the WebGL Face Mapped Points point example.

Particles for Explosion

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; 
}
 
3D Graphics Display Here with WebGL

Read WebGL E-Books

Copyright © 2015 Seven Thunder Software. All Rights Reserved.