Drawing a model from different viewpoints on HTML5 <canvas>

Well this is for a project I chose to do for my computer graphics class - drawing a grand piano that can be viewed from different angles.

I haven't yet begun the work, and I just completed lynda.com course on HTML5:Graphics and Animation with Canvas. I can see how one could make a cube, or a ball, those sorts of simple figures. But I don't know how I should proceed on my project. Defining each small surface one by one, sure will be very tedious. Should I learn some more? WebGL or something else? Or is the 'tedious' way an 'okay' way? What would you suggest?

Answers


"The different angles" implies that you want to model and render a three dimensional object.

Here is one recipe to success:

  • Design your model (grand piano) in any open source and free modelling application, like Blender

  • Then, learn basics of Three.js or similar WebGL framework which simplifies the complex process of rendering a 3D scene

  • Export your model from Blender and import it to your Three.js JavaScript.

It is possible to render objects to <canvas> on Three.js without WebGL, but using WebGL backend simplies the process a lot and I highly recommend sticking with WebGL.

Here are is one of Three.js examples showing some modeled cars from different angles (cameras).

HTML5 Canvas API is mostly useful for 2D graphics and does not suit for your purpose very well, as you have noticed with its limitations.


Use WebGL, Three.js aims to be very accessible. www.udacity.com have a course on 3d graphics that uses Three.js that is very good for beginning. Real-time 3D graphics is basically about creating a 2d image that re-creates that effect of a 3d perspective and can be updated in real-time. Going about this in a brute force way won't teach you anything about how this effect is achieved.


Need Your Help

Programatically adding [XmlIgnore] attribute in c# for serialization

c# xml xml-serialization

Do anyone know how programatically add an [XmlIgnore] attribute to a class property in c#?

Jqgrid subgrid not expanding on first load

javascript php jquery jqgrid

I have a Jqgrid with two subgrids and a groupingView(), when my data is loaded from the server into the grid my subgrid does not want to expand. Only when I page or click the refresh button the sub...