CODEWITHSUNDEEP
javascripthtmlcanvasgraphicswebgl
Shashwat Black
Shashwat Black

Reputation: 1002

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?

Upvotes: 1

Views: 295

Answers (2)

Culzean
Culzean

Reputation: 359

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.

Upvotes: 0

Mikko Ohtamaa
Mikko Ohtamaa

Reputation: 83368

"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.

Upvotes: 2

Related Questions