Beginners Guide to WebGL From Scratch with Scripts

I have prepared bundle of very basic tutorials on WebGL to draw points, line,line strip, triangle, triangle strip , rectangle , circle and changing the color of the object drawn on the canvas.

What is WebGL ?

The principles are generic: WebGL is based on OpenGLES 2.0 (OpenGL for Embedded Systems – which is a subset of the OpenGL 2.0 computer graphics rendering application programming interface (API) for rendering 2D and 3D computer graphics).

Webpage using WebGL



Why WebGL ?

Rendering 3D object directly on the web browser.

The tutorials prepared here is tested on Windows 7 with Chrome Version 41.0.2272.118 m.

Click here to check the work samples live Demo.

Beginners guide to WebGL

Sample Output


To draw Point : Click any where on the canvas

To draw Line: Click the starting point and drag until endpoint

To draw Triangle: Click three points to define three edge of triangles. It will draw triangle for you.

To draw Rectangle: Drag the mouse and will form rectangle.

To draw Circle: Drag the mouse and will form circle.

To draw Triangle Fan: Define four points with four clicks.

To draw line strip : Define points and drag .

Download All Here

Comments are Welcome !

[Solved] Write to text files with c# in Unity3D using StreamWriter

StreamWriter is very simple tool which let you to write your data into text files.This script is very easy to understand and working method which I have implemented in my Foxes and Rabbit Simulation.Unity3D C#

using UnityEngine;
using System.Collections;
using System.IO;

public class countfox : MonoBehaviour {
public int count_fox;
StreamWriter sw;
GameObject [] fox;

void Start(){
sw = new StreamWriter(“count_fox.txt”);   //The file is created or Overwritten outside the Assests Folder.

void Update(){

fox = GameObject.FindGameObjectsWithTag(“fox”);
count_fox= fox.Length;

sw.WriteLine(” ” + count_fox+” “+System.DateTime.Now, true);




Foxes and Rabbit Simulation Unity 3D using C # Tutorial

Monte Carlo method has been implemented in “lotka volterra predator prey model. I used this for Foxes and Rabbit Simulation in Unity 3D using C #.This is the step by step tutorial with full source code included. The initial parameter can be set from unity GUI. The initial parameters can be set up from the Main Camera (StartSimulation.cs is attached with this).If you are interested to see the analysis I performed for the result obtained I have attached the my report at the end of this project. This is a part of my assignment for the course Game Based Simulation in Høgskolen i Ålesund. I am very grateful to my teacher Siebe van Albada without whom I wont be able to complete this project. The model developed is not 100 % correct. There is a lot more to study more on this.

Click here to see my simulation

I haven’t implemented the actual model of predator prey. My Assumptions are for this model on which this simulation is performed is based on four cases.

Case 1:Foxes and Rabbit Monte Carlo
Fox —-k1——-> Ø

Where K1 is the fox death rate In this case, fox will die after a certain life span.

Case 2:
Fox ——–k2———-> 2 Foxes

K2 is the fox birth rate Fox can breed new fox in the rate of K2.

Case 3:
Fox + Rabbit……..k3………………> 2 Foxes

Where K3 is escaping rate of Rabbit from fox It is assumed that if fox meets rabbit with K3 it will breed one new fox.

Case 4:
Rabbit ………….k4………….>2 Rabbits

K4 is the birth rate of rabbit. It is assumed that a new rabbit will be produced at this rate.

It is assumed that a new rabbit will be produced at this rate.

1     3D Model

The predator prey model for simulation in Unity3D is conducted using a couple of sphere and a plane. The screen dump of the 3D model is shown in Figure .Red sphere represent fox and blue fox represent rabbit. The prefab used in this simulation are fox_prefab for foxes and rabbit_pref for rabbit.

1.1    fox_prefab Properties

The size of the fox_prefab is (20, 20, 20) .Sphere collider physics properties with trigger (enabled by default) has been added to this object. The position and rotation are not important for this simulation. Material is added to this sphere to change the default color into red. fox.cs script is attached for simulation. “fox” tag was defined for this object.

1.2    rabbit_pref Properties

The size of the fox_prefab is (20, 20, 20) .Sphere collider physics properties with trigger (enabled by default) has been added to this prefab. In addition, rigid body physics properties were also added which is required for collision detection. The position and rotation is not important for this simulation. Material is added to this sphere to change the  default color into red. In order to simulate two scripts rabbit.cs and. “rabbit” tag was defined for this game object.

2     Scripting

There are four scripts for this simulation is discussed in this section.

2.1    startSimulation.cs

This is the starting script. The initial number of foxes and rabbit are controlled from this script. In addition, the area of simulation (plane size) or field can be varied. Instantiate function was used to clone the game object.

2.2     fox.cs

This script is responsible for the behavior and activities of foxes. The script starts adjusting the area of simulation by importing the object “planesize” from startSimulation.cs. The next block of code is for transforming the position of foxes. This block will let foxes move around the field with random position in x and z-axis. The random value is generated from random.value (generates between 0-1) and some step size was used. If statement helps us to shift the position of fox and rabbit to put into the boundary. For example, the range of field size runs from -360 to +360 in x-axis. If the fox have new position greater than +360 then the new position will be -360.This is called periodic condition. The probability for the death and birth of fox is included in this script. The defined parameter looks like

double Pfoxdeath_rate = (24f*60f*60f /(foxdeath_year * 365f * 24f * 60f * 60f));

double Pfoxbirth_rate = (24f*60f*60f/(foxbirth_indays * 24f * 60f * 60f));

The numbers of foxes are controlled from these two probabilities by generating random value. If the generated random number is less than probability of fox death then game object fox will be destroyed. If the random number is less than probability of fox birth then new game object fox was instantiated.

Moreover, the rate at which rabbit can escape is also defined. This logic in scripting was used as collision detection between the two spheres. Both spheres should have sphere collider physics properties as mentioned in above section. OnTriggerEnter function was used for this purpose as shown below.

void OnTriggerEnter (Collider col)


if(col.gameObject.tag == “rabbit” && Random.value <  escapeRate)


Instantiate (fox_prefab, transform.position, Quaternion.identity);


The parameters for calculating probability can be easily assigned from Unity3D GUI. Lastly, counter was added to count the current number of fox. The numbers of foxes counted were save into the text file for simulation. The function used for writing into the file was streamwriter. This script is attached to the object “fox_prefab”.

2.3    rabbit.cs

This script is responsible for the behavior and activities of rabbit. The properties for the field were imported from startSimulation.cs. The movement activities are similar to the fox script. The probability of death and birth is assigned different for the rabbit but the logic is same as in fox script. In addition, the destroying the game object of rabbit and instantiate new rabbit is works in similar logic to the fox script. The whole script can be found in Unity Package file uploaded in Fronter. This script is attached to the object “rabbit_pref”.

2.4    countfox.cs

This script is responsible for counting the current number of foxes and rabbit on the field. The function used for this purpose is OnTriggerEnter(Collider other). This countfox class was imported to the fox.cs script. The number of rabbits were counted with the help of Game object tag.

I have built the whole unity Project and available you  for download.


Click here to download Full Report including the analysis of the result obtained.

If you are intereste you can check my Galton Board Simulation in previous post.

Feel Free to drop my comments!

Galton Board Unity 3D Tutorial for Beginners with C# Script (Step by Step)

The Galton Board is also called as quincunx or bean machine. This device is used to perform statistical experiments. This is very useful for simulation probability distributions (binomial). I am going to teach you how to build Galton Board and simulate using Unity 3D. This is part of my assignment for the subject simulation and visualization and found very interesting to share here. The theory is easily available in the internet so I am not going to include any theory.

The processes carried out for making the Galton are discussed in this section.


The final project can be accessed from

Galton Board Unity 3D

Section 1: 3D Modeling

The first step was to prepare 3 D model for the board. The complete 3D model of board is shown in Figure .


Sphere was used to create the 3D model for the ball. The dimension of ball is (0.8,0.8,0.8). The instantiate property of Unity was used to create the duplicate balls, which is discussed in section 2.2.

Board Pins:

Capsule was used to make board pins. The dimension of each board pins is (1,0.7,1). The instantiate property of Unity was used to create the duplicate balls which is discussed in section 2.2.


Cylinder was used to make the wall as shown in Figure. The dimension of each wall is (0.71, 3.85, 1). The instantiate property of Unity was used to create the duplicate balls which is discussed in section 2.2.


Plane was used to make surface at the bottom where ball hits. There are each plane in between every wall for which instantiate property of Unity was implemented, which is further described in section 2.2.

All the 3D models created in work space were saved as prefab.

Section 2: Scripting

The scripting technique used to make work Galton board is discussed in this section. The full source code is attached in the Appendix .

Board Pins:

The 3D Model builds were duplicated using the instantiate function of Unity. The board pins were structured in the pyramid style using for loop. The block of code used to instantiate as shown in Figure is included below.

for(float i = 0; i < height; i++)
for(float j = 0; j < width; j++)
clone = (GameObject)Instantiate(pinsprefab);
clone.transform.position = new Vector3((xspacing*2f*j)+xpos, 3*i, 10.0f);

Height defines the number of rows equals to 10.

Width defines the number of column equals to 13.

xpos= Offset fixed to 20.5.

xspacing = The distance between the objects which is fixed to 1.

Hence, Board pins will be instantiate every time transformed to new position defined as new Vector3.


The source that handles the function of ball is included below. The ball is instantiated in every 1 sec. The time interval was calculated using Time.time function. timeofLastSphere gives the time when the sphere was created. timeSinceLastSphere was used to calculate the time elapsed 1 sec. The position of creating continuous ball is at the middle of the board. The random function was used to prevent the ball stack on them.

timeSinceLastSphere = Time.time – timeofLastSphere;

                        if(timeSinceLastSphere > 1.0f){

                        GameObject cloneSphere;

            cloneSphere= (GameObject)Instantiate(Sphere);

cloneSphere.transform.position = new Vector3((xspacing*2f*(width/2f-0.5f))+xpos + Random.Range(-0.1f, 0.1f), 3.0f*height, 10.0f);

                                    timeofLastSphere = Time.time;



Cylinder was instantiated to create the wall which is equal to the column of the Galton board. The source code is included below.

for(float k = 0; k < width-1f; k++){

clonecylinder= (GameObject)Instantiate(cylinder);

                                                            clonecylinder.transform.position = new Vector3((xspacing*2f*k)+xpos+1.0f, -1.46f, 10.0f);


The number of cylinders was equal to width -1 only at the bottom of the board. If statement was used to create only at the bottom of the board (first row). The if statement can be found in the full source code attached in appendix. The y and z distance were fixed manually.


The source code used to create surface is included below.

cloneplane= (GameObject)Instantiate(plane);

cloneplane.transform.position = new Vector3((xspacing*2f*k)+xpos+1.0f, -5.71f, 10.0f);

The plane was instantiate similarly as for wall.


Counter was implemented to count balls on each plane. The aim of counting the ball is to plot the distribution. The source code is included below.

public int count=0;

            void OnTriggerEnter(Collider other) {

                        Destroy (other.gameObject);



It counts the ball when it strikes the plane. Therefore, there are 12 counters  for 12 planes.

Joomla 3.0 Tutorials Pdf Download Free for beginners [Latest Tutorial]

As we all know Joomla have been download more than 30 Millions till today. It is one of the most used CMS after WordPress. If you are newbie and want to learn Joomla in a month You can download and learn by yourself. I have made pdf which include most the chapters useful from basic to few advance steps. After this tutorial you will be able to develop basic and advance website using Joomla Platform.

You can build blog from Joomla latest version also. Grab your copy now!

Joomla 3.0 Tutorial Pdf Download Free

Joomla 3.0 Tutorial Pdf Download