Learning Three.js and WebGL part 1

In this tutorial you will learn how to create 3d animation using WebGL and Three.js framework.

Overview

WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D graphics and 2D graphics within any compatible web browser without the use of plug-ins. WebGL is integrated completely into all the web standards of the browser allowing GPU accelerated usage of physics and image processing and effects as part of the web page canvas. WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background. WebGL programs consist of control code written in JavaScript and shader code that is executed on a computer’s Graphics Processing Unit (GPU). WebGL is designed and maintained by the non-profit Khronos Group. http://en.wikipedia.org/wiki/WebGL

WebGL

WebGL

Three.js is a lightweight cross-browser JavaScript library/API used to create and display animated 3D computer graphics on a Web browser. Three.js scripts may be used in conjunction with the HTML5 canvas element, SVG or WebGL. http://en.wikipedia.org/wiki/Three.js

<html>

<head>
<title>WebGL Up And Running &mdash; Example 1</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<script type="text/javascript">

    function initWebGL(canvas) {

        var gl;
        try 
        {
            gl = canvas.getContext("experimental-webgl");
        } 
        catch (e)
        {
            var msg = "Error creating WebGL Context!: " + e.toString();
            alert(msg);
            throw Error(msg);
        }

        return gl;        
     }

    function initViewport(gl, canvas)
    {
        gl.viewport(0, 0, canvas.width, canvas.height);
    }

    var projectionMatrix, modelViewMatrix;

    function initMatrices()
    {
	   // The transform matrix for the square - translate back in Z for the camera
	   modelViewMatrix = new Float32Array(
	           [1, 0, 0, 0,
	            0, 1, 0, 0, 
	            0, 0, 1, 0, 
	            0, 0, -3.333, 1]);
       
	   // The projection matrix (for a 45 degree field of view)
	   projectionMatrix = new Float32Array(
	           [2.41421, 0, 0, 0,
	            0, 2.41421, 0, 0,
	            0, 0, -1.002002, -1, 
	            0, 0, -0.2002002, 0]);
	
    }

    // Create the vertex data for a square to be drawn
    function createSquare(gl) {
        var vertexBuffer;
    	vertexBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
        var verts = [
             .5,  .5,  0.0,
            -.5,  .5,  0.0,
             .5, -.5,  0.0,
            -.5, -.5,  0.0
        ];
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(verts), gl.STATIC_DRAW);
        var square = {buffer:vertexBuffer, vertSize:3, nVerts:4, primtype:gl.TRIANGLE_STRIP};
        return square;
    }

    function createShader(gl, str, type) {
        var shader;
        if (type == "fragment") {
            shader = gl.createShader(gl.FRAGMENT_SHADER);
        } else if (type == "vertex") {
            shader = gl.createShader(gl.VERTEX_SHADER);
        } else {
            return null;
        }

        gl.shaderSource(shader, str);
        gl.compileShader(shader);

        if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
            alert(gl.getShaderInfoLog(shader));
            return null;
        }

        return shader;
    }
    
	var vertexShaderSource =
		
		"    attribute vec3 vertexPos;\n" +
		"    uniform mat4 modelViewMatrix;\n" +
		"    uniform mat4 projectionMatrix;\n" +
		"    void main(void) {\n" +
		"		// Return the transformed and projected vertex value\n" +
		"        gl_Position = projectionMatrix * modelViewMatrix * \n" +
		"            vec4(vertexPos, 1.0);\n" +
		"    }\n";

	var fragmentShaderSource = 
		"    void main(void) {\n" +
		"    // Return the pixel color: always output white\n" +
        "    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);\n" +
    	"}\n";


    var shaderProgram, shaderVertexPositionAttribute, shaderProjectionMatrixUniform, shaderModelViewMatrixUniform;

    function initShader(gl) {

    	// load and compile the fragment and vertex shader
        //var fragmentShader = getShader(gl, "fragmentShader");
        //var vertexShader = getShader(gl, "vertexShader");
        var fragmentShader = createShader(gl, fragmentShaderSource, "fragment");
        var vertexShader = createShader(gl, vertexShaderSource, "vertex");

        // link them together into a new program
        shaderProgram = gl.createProgram();
        gl.attachShader(shaderProgram, vertexShader);
        gl.attachShader(shaderProgram, fragmentShader);
        gl.linkProgram(shaderProgram);

        // get pointers to the shader params
        shaderVertexPositionAttribute = gl.getAttribLocation(shaderProgram, "vertexPos");
        gl.enableVertexAttribArray(shaderVertexPositionAttribute);
        
        shaderProjectionMatrixUniform = gl.getUniformLocation(shaderProgram, "projectionMatrix");
        shaderModelViewMatrixUniform = gl.getUniformLocation(shaderProgram, "modelViewMatrix");

        
        if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
            alert("Could not initialise shaders");
        }
    }

     function draw(gl, obj) {

         // clear the background (with black)
         gl.clearColor(0.0, 0.0, 0.0, 1.0);
         gl.clear(gl.COLOR_BUFFER_BIT);

    	 // set the vertex buffer to be drawn
         gl.bindBuffer(gl.ARRAY_BUFFER, obj.buffer);

         // set the shader to use
         gl.useProgram(shaderProgram);

 		// connect up the shader parameters: vertex position and projection/model matrices
         gl.vertexAttribPointer(shaderVertexPositionAttribute, obj.vertSize, gl.FLOAT, false, 0, 0);
         gl.uniformMatrix4fv(shaderProjectionMatrixUniform, false, projectionMatrix);
         gl.uniformMatrix4fv(shaderModelViewMatrixUniform, false, modelViewMatrix);

         // draw the object
         gl.drawArrays(obj.primtype, 0, obj.nVerts);
      }
          
    function onLoad() {
        var canvas = document.getElementById("webglcanvas");
        var gl = initWebGL(canvas);
        initViewport(gl, canvas);
        initMatrices();
        var square = createSquare(gl);
        initShader(gl);
        draw(gl, square);
    }


</script>


</head>


<body onload="onLoad();">

    <canvas id="webglcanvas" style="border: none;" width="500" height="500"></canvas>

</body>

</html>

Original source code: https://github.com/tparisi/WebGLBook/blob/master/Chapter%201/example1-1.html

Hybrid and Native Mobile App Training this 20 and 21 December

Attention to all!

I’m pleased to announce that I will be organizing Hybrid Mobile App Training this 20 and 21 December. If you’re planning to develop mobile apps, this training is for you. Method that I use for this training is personal coaching/face to face. Max 3/5 persons.

20 December: Hybrid Mobile App Training (Android and iOS)
21 December: Native Mobile App Training (Android)

Fee is RM1000/pax for 1 day training. To register, please whatsapp my number, 0176347239. My call number, 01126252058.

http://www.revivalx.com/my/training/

Hybrid Mobile App Training this 20 and 21 December

Hybrid Mobile App Training this 20 and 21 December

Mercurial tutorial for beginner

In this tutorial you will learn how to use Mercurial as your source code management. You will learn the following:

  • Setting Up BitBucket And Mercurial For The First Time
  • Creating Your Online Repository
  • Creating Your Local Repository
  • Connect Your Local Repository To Your BitBucket Repository

Overview

Bitbucket is a web-based hosting service for projects that use either the Mercurial (since the origin) or Git (since October 2011) revision control systems. Bitbucket offers both commercial plans and free accounts. It offers free accounts with an unlimited number of private repositories (which can have up to five users in the case of free accounts) as of September 2010, but by inviting three users to join Bitbucket, three more users can be added, for eight users in total.Private repositories are not shown on profile pages – if a user has only private repositories, it will simply state that the user does not have any repositories until the user creates a public repository. Bitbucket is written in Python using the Django web framework. http://en.wikipedia.org/wiki/Bitbucket

bitbucket

bitbucket

Getting Started

Download the required software packages.

Download and install Eclipse Juno SR2.

Eclipse Juno SR2 – http://www.eclipse.org/downloads/packages/release/juno/sr2

Don’t forget to install or update your machine with latest JDK. Download at http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads- 1880260.html.

After you download, make sure you set the correct java path. If not, you can’t start your eclipse. You can download eclipse Juno http://www.eclipse.org/downloads/packages/eclipse-ide- java-ee-developers/junosr2.

Install mercurial from here, http://mercurial.selenic.com/wiki/Download.

Register your bitbucket account at https://bitbucket.org.  After that go to https://bitbucket.org/repo/create to create a new repository. Select Owner. Then enter you new repository name. Click Create Repository to continue.

Creating a new repository on Bitbucket

Creating a new repository on Bitbucket

Open your eclipse, go to Help > Eclipse Marketplace.

eclipse marketplace

eclipse marketplace

Search for mercurial and install it. Make sure you restart the eclipse after installed it.

eclipse marketplace

eclipse marketplace

Right click your project, Team > Share Project.

eclipse share project

eclipse share project

Choose Mercurial and click Next.

eclipse share project

eclipse share project

Click Finish.

Mercurial Repository Location Setup

Mercurial Repository Location Setup

If you notice before you share the project, your project don’t have a black asterisk icon, but after that a black asterisk icon appeared.

Before

team decorator

team decorator

After

team decorator

team decorator

Before you proceed, you need to understand more about subclipse decorator icons here, http://www.rorycullen.com/blog/2009/07/guide-to-subclipse-decorator-icons/ .

Then you need to commit all your files inside the project to your local repository. Right click your project. Choose Team > Commit.

eclipse mercurial commit

eclipse mercurial commit

Enter your commit message. Tick on which specific files you want to commit into your online repository later. Then click Ok.

eclipse mercurial commit

eclipse mercurial commit

If you notice, your black asterisk icon turn to yellow pipe icon after committed.

team decorator

team decorator

Right click your project again and choose Team > Push.

eclipse mercurial push

eclipse mercurial push

Enter repository location and authentication information below. Then click Finish.

Push changes to a repository

Push changes to a repository

Wait until it finish uploading.

Push changes to a repository

Push changes to a repository

Check your mercurial online repository and voilà!! It’s done!!

mercurial online repository

mercurial online repository

Github tutorial for beginner

In this tutorial you will learn how to use github as your source code management. You will learn the following:

  • Setting Up GitHub And Git For The First Time
  • Creating Your Online Repository
  • Creating Your Local Repository
  • Connect Your Local Repository To Your GitHub Repository

Overview

GitHub is a Git repository web-based hosting service, which offers all of the distributed revision control and source code management (SCM) functionality of Git as well as adding its own features. Unlike Git, which is strictly a command-line tool, GitHub provides a web-based graphical interface and desktop as well as mobile integration. It also provides access control and several collaboration features such as wikis, task management, and bug tracking and feature requests for every project. http://en.wikipedia.org/wiki/GitHub

github

github

Getting Started

Download the required software packages.

Download and install Eclipse Juno SR2.

Eclipse Juno SR2 – http://www.eclipse.org/downloads/packages/release/juno/sr2

Don’t forget to install or update your machine with latest JDK. Download at http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads- 1880260.html.

After you download, make sure you set the correct java path. If not, you can’t start your eclipse. You can download eclipse Juno http://www.eclipse.org/downloads/packages/eclipse-ide- java-ee-developers/junosr2.

Register your github account at https://github.com/.  After that go to https://github.com/new to create a new repository. Enter your Repository Name and click Create repository.

Creating a new repository on GitHub.

Creating a new repository on GitHub.

Open your eclipse, right click your project, Team > Share Project.

eclipse share project

eclipse share project

Choose Git and click Next.

eclipse share project

eclipse share project

Tick Use or create repository in parent folder of project. Then click Create Repository.

eclipse configure git repository

eclipse configure git repository

Click Finish.

eclipse configure git repository

eclipse configure git repository

If you notice before you share the project, your project don’t have a tiny yellow icon, but after that a tiny yellow icon appeared.

Before

team decorator

team decorator

After

team decorator

team decorator

Before you proceed, you need to understand more about subclipse decorator icons here, http://www.rorycullen.com/blog/2009/07/guide-to-subclipse-decorator-icons/ .

Then you need to commit all your files inside the project to your local repository. Right click your project. Choose Team > Commit.

eclipse git commit

eclipse git commit

Enter your commit message. Tick on which specific files you want to commit into your online repository later. Then click Commit and Push.

eclipse commit changes to Git Repository

eclipse commit changes to Git Repository

Enter your location and authentication information. Don’t forget to select Store in Secure Store. Click Next.

Destination Git Repository

Destination Git Repository

Select master [branch] from Source ref: and click Add Spec. Click Finish.

Push Ref Specifications

Push Ref Specifications

Wait until it finish uploading. Then a popup windows appeared. It shows your push results is successful. Click Ok.

Push Results

Push Results

Check your github online repository and voilà!! It’s done!!

github online repository

github online repository

Next tutorial I will show you how to use mercurial (http://mercurial.selenic.com/) on BitBucket (https://bitbucket.org). Stay tune !!

Develop a simple to-do-list mobile android native app -Part 1

In this tutorial you will develop a simple to-do-list native app for android. You will learn the following:

  • Setup development environment using Eclipse Juno for android.
  • Preview your android app using actual device (smart phone).
  • Develop android app using Java programming language.
  • Create activities for android app.
  • Connect android app with PHP and MySql.

Getting Started

Download the required software packages.

Download and install Eclipse Juno SR2.

Eclipse Juno SR2 – http://www.eclipse.org/downloads/packages/release/juno/sr2

Setup ADT and Android SDK into your eclipse.

ADT and Android SDK Setup

Don’t forget to install or update your machine with latest JDK. Currently JDK version 7. Download at http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads- 1880260.html.

After you download, make sure you set the correct java path. If not, you can’t start your eclipse. You can download eclipse Juno http://www.eclipse.org/downloads/packages/eclipse-ide- java-ee-developers/junosr2.

Then install it. After you install the tool that I tell you, make sure you install ADT (android development tools).

Go to Help and choose Install New Software.

eclipse - Install New Software

eclipse – Install New Software

Click Add button then popup box will appear. Enter ‘ADT’ in name textfield and ‘https://dl-ssl.google.com/android/eclipse/’ in location textfield.

eclipse - Install ADT

eclipse – Install ADT

Click Select All button and click Next.

eclipse - Install ADT

eclipse – Install ADT

Click Next.

eclipse - Install ADT

eclipse – Install ADT

Select I accept the terms of the license of agreement. Click Finish.

eclipse - Install ADT

eclipse – Install ADT

After finished setup ADT in your eclipse, download android SDK (http://developer.android.com/sdk/index.html) and update latest android version or depends on your device for testing. After you install the android SDK, open android SDK , /android-sdk/tools. For this tutorial we will using latest android SDK, Android 5.0 aka Lolipop. Open your terminal/cmd, type android command and enter.

android terminal

android terminal

Select Android 5.0 and click Install 12 packages.

Android SDK Manager

Android SDK Manager

Select all packages, choose Accept License and click Install.

Android SDK Manager

Android SDK Manager

Go to eclipse and create new android project. File > New > Other.

create an android application project

create an android application project

Select Android > Android Application Project. Click Next.

create an android application project

create an android application project

Enter your Application Name, Project Name and Package Name. Make sure your Minimum Required SDK is Android 2.2 (API 8), Target SDK and Compile With are Android 4.X L Preview (API 21). Click Next.

create an android application project

create an android application project

Untick Create custom launcher icon. Select Next.

create an android application project

create an android application project

Make sure Blank Activity selected. Click Next.

create activity

create activity

Click Finish.

blank activity

blank activity

Make sure you already connect your mobile device (android phone) and enable USB debugging.

Enable USB debugging: http://www.phonearena.com/news/How-to-enable-USB-debugging-on-Android_id53909

Right click android project > Run As > Android Application.

Run As Android Application

Run As Android Application

Select your phone and click Ok.

Android Device Chooser

Android Device Chooser

If successful, your app shown like this.

I think thats all for

  • Setup development environment using eclipse Juno for android.
  • Preview your android app using actual device (smart phone).

Next tutorial we will develop android app using Java.