Bawer Parada.: Difference between revisions

From Medien Wiki
Line 21: Line 21:


== Click Dummy ==
== 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]]
[[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]]
[[File:bhpm22.jpg | 800 px]]



Revision as of 22:00, 17 September 2014

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

Bhpm17.jpg Bhpm18.jpg

Paper Prototyping

Bhpm19.jpg Bhpm20.jpg

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.

Bhpm21.jpg

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.

Bhpm22.jpg

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.

Bhpm23.jpg

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

Bhpm24.jpg

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.

Bhpm25.jpg

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 HERE to see it, but even after the compression it's 14 MB, so it could take a while to load.

Bhpm26.jpg Bhpm27.jpg

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.

Bhpm28.jpg Bhpm29.jpg

Test App

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

Bhpm30.jpg Bhpm31.jpg