Medien Wiki - User contributions [en]

Bawer Parada.

2014-09-17T22:36:50Z

Bepi5830: /* 3D Web Interfaces II Documentation. */

== 3D Web Interfaces II Documentation. ==

'''The Contents.'''

* Introduction to the topic based on examples, quick review of the state of art, e-commerce using 3D interfaces
* Case of study: Bosch.
* First approach using a secuence of images to produce a 360° view of one of Bosch's products.
* Paper prototyping developing 2D and 3D versions of the same navigation.
* Clickdummy of the 2D and 3D developed versions.
* Modeling and exporting, a quick look into Blender and ThreeJS.
* Closer look and prototyping exercises using the Threejs library and the selected 3D model from Bosch
* Implementation, texturing, illumination and camera for the test app.
* Personas
* Final test app.

== State of Art ==

'''[http://www.floorpad.com/Fapp/Try-it.aspx FLOORPAD]''' is the best example of using a 2D and 3D interface in one. In this case the user can arrange a scenario for a house in a 2D top view, and then switch to the 3D view and check out the result.

[[File:bhpm17.jpg | 800 px]]
[[File:bhpm18.jpg | 800 px]]

'''[http://www.domperignon.com/rose2002/ DOM PERIGNON]''' Is also interesant how is the display for this type of product using 3D

'''[http://www.easports.com/fifa/life-size-messi LIFE SIZE MESSI]''' a huge amount of data, but also a huge amount of detail.

== Paper Prototyping ==

The idea here, was to create a simple prototype but considering the possibility of translate the same 2D principle into a 3D version. In this case the 2D version was a simple home page with a list of all the products, and at the moment the user select one, could check the details of the product not only because a big image, but because several control points that highlight the best features of the product.

The 3D version would be the same, but with the plus of being able to move the product, pan and zoom in into the details that could also incluide technical or materials, using the control points.

[[File:bhpm19.jpg | 400 px]]
[[File:bhpm20.jpg | 400 px]]

== Click Dummy ==

''' 2D Version'''

According to the paper prototype, the idea in the 2D Clickdummy, is to create control points over the images, and in each case add important information about the product plus a zoom in the static image. Because it's not 3D, the user can find thumbnails at the bottom of the page, to change into a more detailed image.

[[File:bhpm21.jpg | 800 px]]

''' 3D Version'''

The same principle is used here but the difference is that the user can turn the 3D model, finding the control points also in various parts of the model.

[[File:bhpm22.jpg | 800 px]]

== Bosch 3D model and 3js prototype ==

The workflow in this case is: Modeling with 3ds max, because of it's interface and tools, was better to develop the initial model using this and not blender. The idea was also to include all details like brand name, model and plastic instruction components, such as arrows, divisions inbetween the drill and the battery, even the holes for screws and ventilation.

[[File:bhpm23.jpg | 800 px]]

Afterwards, it is exported to blender in order to optimize the model and to once again export the JS from blender

[[File:bhpm24.jpg | 800 px]]

After a while, using some images in order to make textures, normals and adding some light this is the result, but not the final one.

[[File:bhpm25.jpg | 800 px]]

== Final Result of the model ==

This is the final result of the modeling, and also the texturing and illuminating process. After changing a lot of staff, the final result includes two different cubic map, one for creating the green background, and the other one for creating the "chrome effect" in the metal components.

Click '''[http://bawerade.dosdepicas.com/3db HERE]''' to see it, but even after the compression it's 14 MB, so it could take a while to load.

[[File:bhpm26.jpg | 800 px]]
[[File:bhpm27.jpg | 800 px]]

In order to make a more realistic chrome effect, the cube map is not just black and white, but a image that contains series of black and white over and over again.

[[File:bhpm28.jpg | 800 px]]
[[File:bhpm29.jpg | 800 px]]

== Test App ==

*This is the result of the test app using several 3d models. There's also the 2D version of the same app.

[[File:bhpm30.jpg | 800 px]]
[[File:bhpm31.jpg | 800 px]]

Bawer Parada.

2014-09-17T22:17:31Z

Bepi5830: /* State of Art */

== 3D Web Interfaces II Documentation. ==

'''The Contents.'''

* Introduction in the topic based on examples of simulated or real time rendered 3D on web (Old and new tools.
* First approach using a secuence of images .
* Second approach using webGL API.
* Third approach using the Threejs library.
* 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.

== State of Art ==

'''[http://www.floorpad.com/Fapp/Try-it.aspx FLOORPAD]''' is the best example of using a 2D and 3D interface in one. In this case the user can arrange a scenario for a house in a 2D top view, and then switch to the 3D view and check out the result.

[[File:bhpm17.jpg | 800 px]]
[[File:bhpm18.jpg | 800 px]]

'''[http://www.domperignon.com/rose2002/ DOM PERIGNON]''' Is also interesant how is the display for this type of product using 3D

'''[http://www.easports.com/fifa/life-size-messi LIFE SIZE MESSI]''' a huge amount of data, but also a huge amount of detail.

== Paper Prototyping ==

The idea here, was to create a simple prototype but considering the possibility of translate the same 2D principle into a 3D version. In this case the 2D version was a simple home page with a list of all the products, and at the moment the user select one, could check the details of the product not only because a big image, but because several control points that highlight the best features of the product.

The 3D version would be the same, but with the plus of being able to move the product, pan and zoom in into the details that could also incluide technical or materials, using the control points.

[[File:bhpm19.jpg | 400 px]]
[[File:bhpm20.jpg | 400 px]]

== Click Dummy ==

''' 2D Version'''

According to the paper prototype, the idea in the 2D Clickdummy, is to create control points over the images, and in each case add important information about the product plus a zoom in the static image. Because it's not 3D, the user can find thumbnails at the bottom of the page, to change into a more detailed image.

[[File:bhpm21.jpg | 800 px]]

''' 3D Version'''

The same principle is used here but the difference is that the user can turn the 3D model, finding the control points also in various parts of the model.

[[File:bhpm22.jpg | 800 px]]

== Bosch 3D model and 3js prototype ==

The workflow in this case is: Modeling with 3ds max, because of it's interface and tools, was better to develop the initial model using this and not blender. The idea was also to include all details like brand name, model and plastic instruction components, such as arrows, divisions inbetween the drill and the battery, even the holes for screws and ventilation.

[[File:bhpm23.jpg | 800 px]]

Afterwards, it is exported to blender in order to optimize the model and to once again export the JS from blender

[[File:bhpm24.jpg | 800 px]]

After a while, using some images in order to make textures, normals and adding some light this is the result, but not the final one.

[[File:bhpm25.jpg | 800 px]]

== Final Result of the model ==

This is the final result of the modeling, and also the texturing and illuminating process. After changing a lot of staff, the final result includes two different cubic map, one for creating the green background, and the other one for creating the "chrome effect" in the metal components.

Click '''[http://bawerade.dosdepicas.com/3db HERE]''' to see it, but even after the compression it's 14 MB, so it could take a while to load.

[[File:bhpm26.jpg | 800 px]]
[[File:bhpm27.jpg | 800 px]]

In order to make a more realistic chrome effect, the cube map is not just black and white, but a image that contains series of black and white over and over again.

[[File:bhpm28.jpg | 800 px]]
[[File:bhpm29.jpg | 800 px]]

== Test App ==

*This is the result of the test app using several 3d models. There's also the 2D version of the same app.

[[File:bhpm30.jpg | 800 px]]
[[File:bhpm31.jpg | 800 px]]

Bawer Parada.

2014-09-17T22:12:36Z

Bepi5830: /* State of Art */

== 3D Web Interfaces II Documentation. ==

'''The Contents.'''

* Introduction in the topic based on examples of simulated or real time rendered 3D on web (Old and new tools.
* First approach using a secuence of images .
* Second approach using webGL API.
* Third approach using the Threejs library.
* 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.

== State of Art ==

'''[http://www.floorpad.com/Fapp/Try-it.aspx FLOORPAD]''' is the best example of using a 2D and 3D interface in one. In this case the user can arrange a scenario for a house in a 2D top view, and then check the result in 3D.

[[File:bhpm17.jpg | 800 px]]
[[File:bhpm18.jpg | 800 px]]

== Paper Prototyping ==

The idea here, was to create a simple prototype but considering the possibility of translate the same 2D principle into a 3D version. In this case the 2D version was a simple home page with a list of all the products, and at the moment the user select one, could check the details of the product not only because a big image, but because several control points that highlight the best features of the product.

The 3D version would be the same, but with the plus of being able to move the product, pan and zoom in into the details that could also incluide technical or materials, using the control points.

[[File:bhpm19.jpg | 400 px]]
[[File:bhpm20.jpg | 400 px]]

== Click Dummy ==

''' 2D Version'''

According to the paper prototype, the idea in the 2D Clickdummy, is to create control points over the images, and in each case add important information about the product plus a zoom in the static image. Because it's not 3D, the user can find thumbnails at the bottom of the page, to change into a more detailed image.

[[File:bhpm21.jpg | 800 px]]

''' 3D Version'''

The same principle is used here but the difference is that the user can turn the 3D model, finding the control points also in various parts of the model.

[[File:bhpm22.jpg | 800 px]]

== Bosch 3D model and 3js prototype ==

The workflow in this case is: Modeling with 3ds max, because of it's interface and tools, was better to develop the initial model using this and not blender. The idea was also to include all details like brand name, model and plastic instruction components, such as arrows, divisions inbetween the drill and the battery, even the holes for screws and ventilation.

[[File:bhpm23.jpg | 800 px]]

Afterwards, it is exported to blender in order to optimize the model and to once again export the JS from blender

[[File:bhpm24.jpg | 800 px]]

After a while, using some images in order to make textures, normals and adding some light this is the result, but not the final one.

[[File:bhpm25.jpg | 800 px]]

== Final Result of the model ==

This is the final result of the modeling, and also the texturing and illuminating process. After changing a lot of staff, the final result includes two different cubic map, one for creating the green background, and the other one for creating the "chrome effect" in the metal components.

Click '''[http://bawerade.dosdepicas.com/3db HERE]''' to see it, but even after the compression it's 14 MB, so it could take a while to load.

[[File:bhpm26.jpg | 800 px]]
[[File:bhpm27.jpg | 800 px]]

In order to make a more realistic chrome effect, the cube map is not just black and white, but a image that contains series of black and white over and over again.

[[File:bhpm28.jpg | 800 px]]
[[File:bhpm29.jpg | 800 px]]

== Test App ==

*This is the result of the test app using several 3d models. There's also the 2D version of the same app.

[[File:bhpm30.jpg | 800 px]]
[[File:bhpm31.jpg | 800 px]]

Bawer Parada.

2014-09-17T22:12:15Z

Bepi5830: /* State of Art */

== 3D Web Interfaces II Documentation. ==

'''The Contents.'''

* Introduction in the topic based on examples of simulated or real time rendered 3D on web (Old and new tools.
* First approach using a secuence of images .
* Second approach using webGL API.
* Third approach using the Threejs library.
* 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.

== State of Art ==

'''[http://www.floorpad.com/Fapp/Try-it.aspx FLOORPAD]''' is the best example of using a 2D and 3D interface in one. In this case the user can arrange a scenario for a house in a 2D top view, and then check the result in 3D.
[[File:bhpm17.jpg | 800 px]]
[[File:bhpm18.jpg | 800 px]]

== Paper Prototyping ==

The idea here, was to create a simple prototype but considering the possibility of translate the same 2D principle into a 3D version. In this case the 2D version was a simple home page with a list of all the products, and at the moment the user select one, could check the details of the product not only because a big image, but because several control points that highlight the best features of the product.

The 3D version would be the same, but with the plus of being able to move the product, pan and zoom in into the details that could also incluide technical or materials, using the control points.

[[File:bhpm19.jpg | 400 px]]
[[File:bhpm20.jpg | 400 px]]

== Click Dummy ==

''' 2D Version'''

According to the paper prototype, the idea in the 2D Clickdummy, is to create control points over the images, and in each case add important information about the product plus a zoom in the static image. Because it's not 3D, the user can find thumbnails at the bottom of the page, to change into a more detailed image.

[[File:bhpm21.jpg | 800 px]]

''' 3D Version'''

The same principle is used here but the difference is that the user can turn the 3D model, finding the control points also in various parts of the model.

[[File:bhpm22.jpg | 800 px]]

== Bosch 3D model and 3js prototype ==

The workflow in this case is: Modeling with 3ds max, because of it's interface and tools, was better to develop the initial model using this and not blender. The idea was also to include all details like brand name, model and plastic instruction components, such as arrows, divisions inbetween the drill and the battery, even the holes for screws and ventilation.

[[File:bhpm23.jpg | 800 px]]

Afterwards, it is exported to blender in order to optimize the model and to once again export the JS from blender

[[File:bhpm24.jpg | 800 px]]

After a while, using some images in order to make textures, normals and adding some light this is the result, but not the final one.

[[File:bhpm25.jpg | 800 px]]

== Final Result of the model ==

This is the final result of the modeling, and also the texturing and illuminating process. After changing a lot of staff, the final result includes two different cubic map, one for creating the green background, and the other one for creating the "chrome effect" in the metal components.

Click '''[http://bawerade.dosdepicas.com/3db HERE]''' to see it, but even after the compression it's 14 MB, so it could take a while to load.

[[File:bhpm26.jpg | 800 px]]
[[File:bhpm27.jpg | 800 px]]

In order to make a more realistic chrome effect, the cube map is not just black and white, but a image that contains series of black and white over and over again.

[[File:bhpm28.jpg | 800 px]]
[[File:bhpm29.jpg | 800 px]]

== Test App ==

*This is the result of the test app using several 3d models. There's also the 2D version of the same app.

[[File:bhpm30.jpg | 800 px]]
[[File:bhpm31.jpg | 800 px]]

Bawer Parada.

2014-09-17T22:08:19Z

Bepi5830: /* Paper Prototyping */

== 3D Web Interfaces II Documentation. ==

'''The Contents.'''

* Introduction in the topic based on examples of simulated or real time rendered 3D on web (Old and new tools.
* First approach using a secuence of images .
* Second approach using webGL API.
* Third approach using the Threejs library.
* 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.

== State of Art ==

[[File:bhpm17.jpg | 800 px]]
[[File:bhpm18.jpg | 800 px]]

== Paper Prototyping ==

The idea here, was to create a simple prototype but considering the possibility of translate the same 2D principle into a 3D version. In this case the 2D version was a simple home page with a list of all the products, and at the moment the user select one, could check the details of the product not only because a big image, but because several control points that highlight the best features of the product.

The 3D version would be the same, but with the plus of being able to move the product, pan and zoom in into the details that could also incluide technical or materials, using the control points.

[[File:bhpm19.jpg | 400 px]]
[[File:bhpm20.jpg | 400 px]]

== Click Dummy ==

''' 2D Version'''

According to the paper prototype, the idea in the 2D Clickdummy, is to create control points over the images, and in each case add important information about the product plus a zoom in the static image. Because it's not 3D, the user can find thumbnails at the bottom of the page, to change into a more detailed image.

[[File:bhpm21.jpg | 800 px]]

''' 3D Version'''

The same principle is used here but the difference is that the user can turn the 3D model, finding the control points also in various parts of the model.

[[File:bhpm22.jpg | 800 px]]

== Bosch 3D model and 3js prototype ==

The workflow in this case is: Modeling with 3ds max, because of it's interface and tools, was better to develop the initial model using this and not blender. The idea was also to include all details like brand name, model and plastic instruction components, such as arrows, divisions inbetween the drill and the battery, even the holes for screws and ventilation.

[[File:bhpm23.jpg | 800 px]]

Afterwards, it is exported to blender in order to optimize the model and to once again export the JS from blender

[[File:bhpm24.jpg | 800 px]]

After a while, using some images in order to make textures, normals and adding some light this is the result, but not the final one.

[[File:bhpm25.jpg | 800 px]]

== Final Result of the model ==

This is the final result of the modeling, and also the texturing and illuminating process. After changing a lot of staff, the final result includes two different cubic map, one for creating the green background, and the other one for creating the "chrome effect" in the metal components.

Click '''[http://bawerade.dosdepicas.com/3db HERE]''' to see it, but even after the compression it's 14 MB, so it could take a while to load.

[[File:bhpm26.jpg | 800 px]]
[[File:bhpm27.jpg | 800 px]]

In order to make a more realistic chrome effect, the cube map is not just black and white, but a image that contains series of black and white over and over again.

[[File:bhpm28.jpg | 800 px]]
[[File:bhpm29.jpg | 800 px]]

== Test App ==

*This is the result of the test app using several 3d models. There's also the 2D version of the same app.

[[File:bhpm30.jpg | 800 px]]
[[File:bhpm31.jpg | 800 px]]

Bawer Parada.

2014-09-17T22:00:21Z

Bepi5830: /* Click Dummy */

== 3D Web Interfaces II Documentation. ==

'''The Contents.'''

* Introduction in the topic based on examples of simulated or real time rendered 3D on web (Old and new tools.
* First approach using a secuence of images .
* Second approach using webGL API.
* Third approach using the Threejs library.
* 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.

== State of Art ==

[[File:bhpm17.jpg | 800 px]]
[[File:bhpm18.jpg | 800 px]]

== Paper Prototyping ==

[[File:bhpm19.jpg | 400 px]]
[[File:bhpm20.jpg | 400 px]]

== Click Dummy ==

''' 2D Version'''

According to the paper prototype, the idea in the 2D Clickdummy, is to create control points over the images, and in each case add important information about the product plus a zoom in the static image. Because it's not 3D, the user can find thumbnails at the bottom of the page, to change into a more detailed image.

[[File:bhpm21.jpg | 800 px]]

''' 3D Version'''

The same principle is used here but the difference is that the user can turn the 3D model, finding the control points also in various parts of the model.

[[File:bhpm22.jpg | 800 px]]

== Bosch 3D model and 3js prototype ==

The workflow in this case is: Modeling with 3ds max, because of it's interface and tools, was better to develop the initial model using this and not blender. The idea was also to include all details like brand name, model and plastic instruction components, such as arrows, divisions inbetween the drill and the battery, even the holes for screws and ventilation.

[[File:bhpm23.jpg | 800 px]]

Afterwards, it is exported to blender in order to optimize the model and to once again export the JS from blender

[[File:bhpm24.jpg | 800 px]]

After a while, using some images in order to make textures, normals and adding some light this is the result, but not the final one.

[[File:bhpm25.jpg | 800 px]]

== Final Result of the model ==

This is the final result of the modeling, and also the texturing and illuminating process. After changing a lot of staff, the final result includes two different cubic map, one for creating the green background, and the other one for creating the "chrome effect" in the metal components.

Click '''[http://bawerade.dosdepicas.com/3db HERE]''' to see it, but even after the compression it's 14 MB, so it could take a while to load.

[[File:bhpm26.jpg | 800 px]]
[[File:bhpm27.jpg | 800 px]]

In order to make a more realistic chrome effect, the cube map is not just black and white, but a image that contains series of black and white over and over again.

[[File:bhpm28.jpg | 800 px]]
[[File:bhpm29.jpg | 800 px]]

== Test App ==

*This is the result of the test app using several 3d models. There's also the 2D version of the same app.

[[File:bhpm30.jpg | 800 px]]
[[File:bhpm31.jpg | 800 px]]

Bawer Parada.

2014-09-17T21:53:18Z

Bepi5830: /* Final Result of the model */

Bawer Parada.

2014-09-17T21:41:24Z

Bepi5830: /* Final Result of the model */

Bawer Parada.

2014-09-17T21:38:41Z

Bepi5830: /* Final Result of the model */

Bawer Parada.

2014-09-17T21:35:30Z

Bepi5830: /* Bosch 3D model and 3js prototype */

Bawer Parada.

2014-09-17T21:35:12Z

Bepi5830: /* Bosch 3D model and 3js prototype */

Bawer Parada.

2014-09-17T21:27:05Z

Bepi5830: /* Final Result of the model */

Bawer Parada.

2014-09-17T21:26:35Z

Bepi5830: /* Final Result of the model */

Bawer Parada.

2014-09-17T21:23:26Z

Bepi5830: /* Test App */

Bawer Parada.

2014-09-17T21:13:44Z

Bepi5830: /* Bosch 3D model and 3js prototype */

Bawer Parada.

2014-09-17T21:13:14Z

Bepi5830: /* Bosch 3D model and 3js test */

Bawer Parada.

2014-09-17T21:12:03Z

Bepi5830: /* State of Art */

Bawer Parada.

2014-09-17T21:02:53Z

Bepi5830: Created page with "== 3D Web Interfaces II Documentation. == '''The Contents.''' * Introduction in the topic based on examples of simulated or real time rendered 3D on web (Old and new tools. * F..."

File:Bhpm31.jpg

2014-09-17T20:47:47Z

Bepi5830:

== Summary ==

== Copyright status: ==

== Source: ==

File:Bhpm30.jpg

2014-09-17T20:47:26Z

Bepi5830:

== Summary ==

== Copyright status: ==

== Source: ==

File:Bhpm29.jpg

2014-09-17T20:47:03Z

Bepi5830:

== Summary ==

== Copyright status: ==

== Source: ==

File:Bhpm28.jpg

2014-09-17T20:46:42Z

Bepi5830:

== Summary ==

== Copyright status: ==

== Source: ==

File:Bhpm27.jpg

2014-09-17T20:46:18Z

Bepi5830:

== Summary ==

== Copyright status: ==

== Source: ==

File:Bhpm26.jpg

2014-09-17T20:45:50Z

Bepi5830:

== Summary ==

== Copyright status: ==

== Source: ==

File:Bhpm25.jpg

2014-09-17T20:44:59Z

Bepi5830:

== Summary ==

== Copyright status: ==

== Source: ==

File:Bhpm24.jpg

2014-09-17T20:44:24Z

Bepi5830:

== Summary ==

== Copyright status: ==

== Source: ==

File:Bhpm23.jpg

2014-09-17T20:43:59Z

Bepi5830:

== Summary ==

== Copyright status: ==

== Source: ==

File:Bhpm22.jpg

2014-09-17T20:43:35Z

Bepi5830:

== Summary ==

== Copyright status: ==

== Source: ==

File:Bhpm21.jpg

2014-09-17T20:43:10Z

Bepi5830:

== Summary ==

== Copyright status: ==

== Source: ==

File:Bhpm20.jpg

2014-09-17T20:42:16Z

Bepi5830:

== Summary ==

== Copyright status: ==

== Source: ==

File:Bhpm19.jpg

2014-09-17T20:41:50Z

Bepi5830:

== Summary ==

== Copyright status: ==

== Source: ==

File:Bhpm18.jpg

2014-09-17T20:41:28Z

Bepi5830:

== Summary ==

== Copyright status: ==

== Source: ==

File:Bhpm17.jpg

2014-09-17T20:40:55Z

Bepi5830:

== Summary ==

== Copyright status: ==

== Source: ==

IFD:ThreedimensionalWebinterfaces

2014-09-17T15:52:40Z

Bepi5830: /* Participants */

[[:Category:Werkmodul|Werkmodul]] | [[:Category:Fachmodul|Fachmodul]] 
''Lehrperson:'' [[Gabriel Rausch]] 
''Bewertung:'' 6 [[ECTS]], 4 [[SWS]] 
''Termin:'' Monday, 13:30 - 15:45 
''Ort:'' Marienstr. 7b, Raum 105 

''Erster Termin:'' Mo, April 7th 2014

==Three-dimensional web-interfaces==
new approaches in eCommerce and eLearning
This course is dedicated to all design- and media-students who are interested in frontend-development of websites and applications and have first experience in complex visualization techniques (using CSS3-Transforms or WebGL or other techniques). The course is like an optional continuation of the last semester course "Three-dimensional web-interfaces - new approaches in visualization, interaction and animation".

This semester we will explore (from the point of view of the user) the possible use of 3D in eCommerce- and eLearning-applications. In our research we will create prototype-based applications to define the potential between 2D and 3D visualization. How can we evaluate the experience of a user who is operating in a webshop. Are there any positiv/negativ effects when we visualize the products of the webshop in 3D in comparison to conventional 2D visualization (like picture-slideshows)?

And don't worry about the experimental character: most of the defined solutions can be transfered to the conventional two-dimensional web-development.

== Registration Procedure ==
To register for the course, please send an eMail due to April 5th with the Topic "Registration for {{PAGENAME}}" to Gabriel.Rausch (at) uni-weimar.de,
incuding the following informations:
* Full Name
* program and semester (Studienprogramm und Fachsemester)
* matriculation number (Matrikelnummer)
* Angabe der geltenden Prüfungsordnung (eg. PV27 or PV29)
* Valid email address @uni-weimar.de
* One short sentence why you want to (have to) be in this course (german or english)

If there are more than 15 registrations, students will be accepted depending on:
* Order (first come, first serve)
* If you are in a Project of Interface-Design (see Prof. Jens Geelhaar's semester projects this semester)
* What you've written in "why I want to be in this course"

If there are more than 20 registrations, there might be a kick-off event with an evaluation competition.

==Certificates of Achievements==
* Active and regular participation
* Progress on the individual project you are working on
* Creating a piece of work for an exhibition at the Summary
* 2 minute presentation at the [[IFD:Showreel]]
* Final Hand-in of your project/concept/...

==Target Audience==
* In general open to all students, but esp. suited for
* Bachelor- and Master students of Media-Arts & Design
* Master students Media-Architecture

==Syllabus==

* 07.04. Introduction & Study
** [https://dl.dropboxusercontent.com/u/22663277/Bosch%203D%20Images.zip Download Bosch 3D Images 800x450]
* 14.04. Cancled
* 28.04. Current State eCommerce Product Presentation, Product Definition
** [http://jsbin.com/wusohequ/3/ Product Presentation Samples]
* 05.05. Hands On HTML5, Canvas & WebGL
** [[File:20140505_ThreeDimensional_material.zip]]
* 12.05. Concept & Wireframes A-B-Application
** [[File:20140512_ThreeDimensional_material.zip]]
* 19.05. Prototype Assembly I
* 26.05. Prototype Assembly II
** [[File:20140526_ThreeDimensional_material.zip]]
* 02.06. Prototype Assembly III
** [[File:20140602_ThreeDimensional_material.zip]]
* 16.06. Prototype Assembly IV
** [[File:20140616_ThreeDimensional_material.zip]]
* 17.06. Special Nightly Workarounds (6pm - open end)
* 23.06. Prototype Assembly V
** [[File:20140623_ThreeDimensional_material.zip]]
* 30.06. Internal Test
** [[File:20140630_ThreeDimensional_material.zip]]
** [[File:20140630_ThreeDimensional_material2.zip]]
* 07.07. Adjustments / First Analysis
** [[File:20140707_ThreeDimensional_material.zip]]
* 10. - 13.07. Summaery

==Participants==
[[Tobias Westphal]]

[[Alexander Vogt]]

[[Adriana Román]]

[[Bawer Parada.]]

IFD:ThreedimensionalWebinterfaces

2014-09-17T15:46:20Z

Bepi5830: /* Participants */

IFD:Three-dimensional web-interfaces WS 13/Documentation

2014-03-25T14:00:48Z

Bepi5830: /* Prototypes */

== Prototypes ==
* [[Gianluca Pandolfo]]
* [[Sabina Kim]]
* [[Natalia Suarez]]
* [[Bawer Parada]]
* [[Ashin Mandal]]
* [[Sarah Eichert]]
* [[Name]]
* [[Name]]
* [[Name]]

File:Bhpm14.jpg

2014-03-09T19:19:02Z

Bepi5830:

== Summary ==

== Copyright status: ==

== Source: ==

File:Bhpm16.jpg

2014-03-09T19:17:48Z

Bepi5830:

== Summary ==

== Copyright status: ==

== Source: ==

File:Bhpm15.jpg

2014-03-09T19:13:29Z

Bepi5830:

== Summary ==

== Copyright status: ==

== Source: ==

File:Bhpm13.jpg

2014-03-09T19:12:51Z

Bepi5830:

== Summary ==

== Copyright status: ==

== Source: ==

File:Bhpm12.jpg

2014-03-09T19:12:46Z

Bepi5830:

== Summary ==

== Copyright status: ==

== Source: ==

File:Bhpm11.jpg

2014-03-09T19:12:42Z

Bepi5830:

== Summary ==

== Copyright status: ==

== Source: ==

File:Bhpm10.jpg

2014-03-09T19:12:28Z

Bepi5830:

== Summary ==

== Copyright status: ==

== Source: ==

Bawer Parada

2014-03-09T19:11:42Z

Bepi5830: /* Excercises and Prototype. */

== 3D Web Interfaces Documentation. ==

'''The Contents.'''

* Introduction in the topic based on examples of simulated or real time rendered 3D on web (Old and new tools.
* First approach to 3d web tools using CSS.
* Second approach using webGL API.
* Third approach using the Threejs library.
* 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.

== Excercises and Prototype. ==

'''CSS Exercises.'''

[[File:bhpm_3dwi_1.jpg | 600 px]]

'''WebGL Excercises.'''

[[File:bhpm2.jpg | 600 px]]
[[File:bhpm3.jpg | 600 px]]
[[File:bhpm4.jpg | 600 px]]
[[File:bhpm5.jpg | 600 px]]

'''Threejs Excercises.'''

[[File:bhpm6.jpg | 600 px]]
[[File:bhpm7.jpg | 600 px]]
[[File:bhpm8.jpg | 600 px]]
[[File:bhpm9.jpg | 600 px]]

'''Haus am Horn Prototype.'''

There are two versions of the prototype:

'''Textured and orbit controls'''

*The first one is a exploration of the workflow using 3DS Max instead blender to create a fully textured 3D model. In this case the model is subdivided into several parts to match the texture images.

'''[http://bawerade.dosdepicas.com/3d/textured.html 1st Prototype]'''

[[File:bhpm10.jpg | 600 px]]
[[File:bhpm11.jpg | 600 px]]
[[File:bhpm12.jpg | 600 px]]
[[File:bhpm13.jpg | 600 px]]

'''3D Anaglyph ready'''

*The second one is a exploration of anaglyph 3D using the .js file for anaglyph effect.

'''[http://bawerade.dosdepicas.com/3d/anaglyph.html 2nd Prototype - it is necessary blue / red glasses to see the effect.]'''

[[File:bhpm14.jpg | 600 px]]
[[File:bhpm15.jpg | 600 px]]
[[File:bhpm16.jpg | 600 px]]

[[Category:3d web design]]

File:Bhpm9.jpg

2014-03-09T19:02:21Z

Bepi5830:

== Summary ==

== Copyright status: ==

== Source: ==

File:Bhpm8.jpg

2014-03-09T19:01:54Z

Bepi5830:

== Summary ==

== Copyright status: ==

== Source: ==

File:Bhpm7.jpg

2014-03-09T19:01:46Z

Bepi5830:

== Summary ==

== Copyright status: ==

== Source: ==

File:Bhpm6.jpg

2014-03-09T19:01:35Z

Bepi5830:

== Summary ==

== Copyright status: ==

== Source: ==

File:Bhpm5.jpg

2014-03-09T19:00:54Z

Bepi5830:

== Summary ==

== Copyright status: ==

== Source: ==

File:Bhpm4.jpg

2014-03-09T18:59:57Z

Bepi5830: