Ashin Mandal: Difference between revisions

From Medien Wiki
 
(11 intermediate revisions by the same user not shown)
Line 1: Line 1:
== 3D Web Interfaces Documentation. ==
== Introduction ==


'''The Contents.'''
Following is the documentation of my work and exercises for the courses '''Three-dimensional Web Interfaces WS 2013'''. We started off in the course experimenting with CSS3, and then moved on to WebGL, Three.js, Blender and also Augmented Reality in a browser.


* Introduction in the topic based on examples of simulated or real time rendered 3D on web (Old and new tools.
Below is a list of contents that are documented below:
* First approach to 3d web tools using CSS.
* An initial example of 3D Shape using CSS
* Second approach using webGL API.
* A music visualisation using WebGL
* Third approach using the Threejs library.
* First import of a 3D model (Three.js) into WebGL - A Solar System
* Closer look and prototyping exercises using the Threejs library and the 3D model of "Haus am Horn".
* Creating a 3D model in Blender and then importing it into WebGL with navigation
* Quick look to the possibilities using augmented reality.
* Prototyping ideas for exploring a 3D model of "Haus Am Horn" along with the implementation


[[Category:3D Web Interfaces]]
[[Category:3D Web Interfaces]]


== 3D Web Interfaces Documentation. ==
== 3D Cube using CSS3 ==


'''The Contents.'''
This exercise was to experiment and interact with a 3D Cube rendered using CSS3. One can rotate and move the mouse using the mouse or touchpad.  


* Introduction in the topic based on examples of simulated or real time rendered 3D on web (Old and new tools.
[https://dl.dropboxusercontent.com/u/22663277/3D%20Web%20Interfaces/1%20CSS/cube.html LINK]
* First approach to 3d web tools using CSS.
 
* Second approach using webGL API.
[[File:Cube1.png]]
* Third approach using the Threejs library.
[[File:Cube2.png]]
* Closer look and prototyping exercises using the Threejs library and the 3D model of "Haus am Horn".
 
* Quick look to the possibilities using augmented reality.
== Music Visualisation ==
 
This is a music visualisation using WebGL where little spheres have been rendered on the browser and they bounce in conformity with the music. I tried to make the visualisation like the bar visulisations in old music systems.
 
[https://dl.dropboxusercontent.com/u/22663277/3D%20Web%20Interfaces/2%20Music%20Visualisation/visual.html LINK]
 
[[File:Ashin_Visual1.png]]
[[File:Ashin_Visual2.png]]
 
== Solar System ==
 
This was our first experiment with a 3D model in WebGL. We were given the 3D model of the Solar System in Three.js and our task was to make an interactive application which can navigate within the model.
 
[https://dl.dropboxusercontent.com/u/22663277/3D%20Web%20Interfaces/3%20Solar%20System/index.html LINK]
 
[[File:Ashin_Solar1.png]]
[[File:Ashin_Solar2.png]]
 
== The Island ==
 
This was our second task of using a 3D model in WebGL, only this time we had to create the 3D model on our own. I created a 3D model of an island in Blender, exported it in Three.js format and made it interactive in the browser using WebGL.
 
[https://dl.dropboxusercontent.com/u/22663277/3D%20Web%20Interfaces/4%20Island/index.html LINK]
 
[[File:Ashin_Island1.png]]
[[File:Ashin_Island2.png]]
 
== HAUS AM HORN Interactive Prototype ==
 
Initially we were asked to do an extensive research on the existing interactive online 3D applications or websites and then come up with an interactive idea prototype of our own for Haus Am Horn. We were given the 3D model and the liberty to visualise and interact with it the way we want.
 
I came up with a simple interactive concept of a 3D Web Application with the model of “HAUS AM HORN” which can be navigated using the arrow keys with the mouse for panning and zooming.
 
Below are the mock-ups of the concept:
 
[[File:Ashin_Screen 1.png]]
[[File:Ashin_Screen 2.png]]
[[File:Ashin_Screen 3.png]]
[[File:Ashin_Screen 4.png]]
 
Then our final and most important task in the course was to implement this concept into an actual interactive prototype using WebGL and Three.js.
 
Unfortunately I was not able to make it work only partially. Below is a link to the interactive application.
 
[https://dl.dropboxusercontent.com/u/22663277/3D%20Web%20Interfaces/5%20Haus/index.html LINK]
 
And some screenshots of the same:
 
[[File:Haus1.png]]
[[File:Ashin_Haus2.png]]

Latest revision as of 11:07, 1 April 2014

Introduction

Following is the documentation of my work and exercises for the courses Three-dimensional Web Interfaces WS 2013. We started off in the course experimenting with CSS3, and then moved on to WebGL, Three.js, Blender and also Augmented Reality in a browser.

Below is a list of contents that are documented below:

  • An initial example of 3D Shape using CSS
  • A music visualisation using WebGL
  • First import of a 3D model (Three.js) into WebGL - A Solar System
  • Creating a 3D model in Blender and then importing it into WebGL with navigation
  • Prototyping ideas for exploring a 3D model of "Haus Am Horn" along with the implementation

3D Cube using CSS3

This exercise was to experiment and interact with a 3D Cube rendered using CSS3. One can rotate and move the mouse using the mouse or touchpad.

LINK

Cube1.png Cube2.png

Music Visualisation

This is a music visualisation using WebGL where little spheres have been rendered on the browser and they bounce in conformity with the music. I tried to make the visualisation like the bar visulisations in old music systems.

LINK

Ashin Visual1.png Ashin Visual2.png

Solar System

This was our first experiment with a 3D model in WebGL. We were given the 3D model of the Solar System in Three.js and our task was to make an interactive application which can navigate within the model.

LINK

Ashin Solar1.png Ashin Solar2.png

The Island

This was our second task of using a 3D model in WebGL, only this time we had to create the 3D model on our own. I created a 3D model of an island in Blender, exported it in Three.js format and made it interactive in the browser using WebGL.

LINK

Ashin Island1.png Ashin Island2.png

HAUS AM HORN Interactive Prototype

Initially we were asked to do an extensive research on the existing interactive online 3D applications or websites and then come up with an interactive idea prototype of our own for Haus Am Horn. We were given the 3D model and the liberty to visualise and interact with it the way we want.

I came up with a simple interactive concept of a 3D Web Application with the model of “HAUS AM HORN” which can be navigated using the arrow keys with the mouse for panning and zooming.

Below are the mock-ups of the concept:

Ashin Screen 1.png Ashin Screen 2.png Ashin Screen 3.png Ashin Screen 4.png

Then our final and most important task in the course was to implement this concept into an actual interactive prototype using WebGL and Three.js.

Unfortunately I was not able to make it work only partially. Below is a link to the interactive application.

LINK

And some screenshots of the same:

Haus1.png Ashin Haus2.png