Hi all!
I'm coming back to this blog after some time, time that I spent working to gorgeous projects for several classes I took in the last semesters.
Today I'm gonna show you my project for the Interactive Graphic class.
During the course we studied graphic in general and with webGL, the web version of OpenGL.
WebGL is kinda cool because you don't need to install anything to having it running on your computer, only javascript. And a browser, of course.
Firefox is the suggested one, I heard of someone having troubles with Chrome. Internet Explorer.. well, there's no need to say anything.
In our class we focused mainly on modeling, texturing, lighting and animating. The final project consisted in choosing a topic and develop a small project using everything we saw. Plus we could also use some external library.
My initial idea was replicating Disney's initial animation, with the castle and so on:
Then.. well, once you have the castle why not adding a small carriage? And a princess? And the fairy-godmother? So I ended up replicating the scene of Cinderella's movie in which she escapes the castle and looses her shoe.
I used only standard webGL, without three.js or similar, just a .js file provided by the professor with basic shapes to use in our project.
Now let me spend a few words on each part:
Modeling:
For the modeling part I just assembled basic shapes in order to create more complex objects. I made just one tower, that then I replicated scaling it and resizing it to make several towers around the castle.
Also Cinderella and the fairy-godmother are actually the same character, just the dress changes a bit as I removed a cylinder for the skirt in the fairy-godmother.
Texturing:
There's not much to say about textures, just that Cinderella's dress is amazing!
Lighting:
In the scene there are:
- One directional light, the sun, that rotates around the scene to simulate the daily sunlight.
- Three spotlight: one has source on top of the carriage and act as headlight, while the other two are green the green lights around the gate.
- Two positional light: one has source on the red sphere on top of the castle, and lightens it with red light, the other as the fairy as source and moves around the scene along with her.
Animations:
There are several animated elements in the scene. There is a main scene and some minor elements. In the main scene we have:
- The door opens, then Cinderella appears, she moves towards the carriage, at some point looses her shoe, then she goes up in the carriage and it starts moving around the scene.
- Meanwhile, Cinderella also waves her arm to call the carriage (so both Cinderella herself and her arm move).
- The flags wave on top of the castle.
- The fairy moves around the castle.
That's all. I leave you with the video of the whole scene. It is realized with Phong lighting. If you have any question or comment please let me know by leaving a comment!
I'm coming back to this blog after some time, time that I spent working to gorgeous projects for several classes I took in the last semesters.
Today I'm gonna show you my project for the Interactive Graphic class.
During the course we studied graphic in general and with webGL, the web version of OpenGL.
WebGL is kinda cool because you don't need to install anything to having it running on your computer, only javascript. And a browser, of course.
Firefox is the suggested one, I heard of someone having troubles with Chrome. Internet Explorer.. well, there's no need to say anything.
In our class we focused mainly on modeling, texturing, lighting and animating. The final project consisted in choosing a topic and develop a small project using everything we saw. Plus we could also use some external library.
My initial idea was replicating Disney's initial animation, with the castle and so on:
Then.. well, once you have the castle why not adding a small carriage? And a princess? And the fairy-godmother? So I ended up replicating the scene of Cinderella's movie in which she escapes the castle and looses her shoe.
I used only standard webGL, without three.js or similar, just a .js file provided by the professor with basic shapes to use in our project.
Now let me spend a few words on each part:
Modeling:
For the modeling part I just assembled basic shapes in order to create more complex objects. I made just one tower, that then I replicated scaling it and resizing it to make several towers around the castle.
Also Cinderella and the fairy-godmother are actually the same character, just the dress changes a bit as I removed a cylinder for the skirt in the fairy-godmother.
Texturing:
There's not much to say about textures, just that Cinderella's dress is amazing!
Lighting:
In the scene there are:
- One directional light, the sun, that rotates around the scene to simulate the daily sunlight.
- Three spotlight: one has source on top of the carriage and act as headlight, while the other two are green the green lights around the gate.
- Two positional light: one has source on the red sphere on top of the castle, and lightens it with red light, the other as the fairy as source and moves around the scene along with her.
Animations:
There are several animated elements in the scene. There is a main scene and some minor elements. In the main scene we have:
- The door opens, then Cinderella appears, she moves towards the carriage, at some point looses her shoe, then she goes up in the carriage and it starts moving around the scene.
- Meanwhile, Cinderella also waves her arm to call the carriage (so both Cinderella herself and her arm move).
- The flags wave on top of the castle.
- The fairy moves around the castle.
That's all. I leave you with the video of the whole scene. It is realized with Phong lighting. If you have any question or comment please let me know by leaving a comment!
Commenti
Posta un commento