Programmers and students who want to start in graphics, game development or data visualisation and prefer building visible results while learning the maths behind them.
2D Canvas, Graphics Maths and Your First 3D Scenes with Three.js
Learn how computer graphics works by making things move on screen: drawing and animating on the 2D canvas, the vectors and matrices behind every transformation, the 3D pipeline, and building interactive 3D scenes with Three.js including lights, materials, textures and models.
- 43hours of work
- 12parts
- Checkedcapstone
- Lifetimeaccess
- Canvas 2D
- Vectors and matrices
- Graphics pipeline
- Three.js
- Lighting and materials
- Animation and interaction
At a glance
Comfortable with JavaScript or TypeScript basics (functions, objects, arrays, modules) and the browser developer tools. School-level algebra and trigonometry are enough; the linear algebra is taught from scratch.
Pass the quizzes, complete the labs and submit your capstone. Everything is checked as you go and your certificate is issued the moment you finish.
What you will be able to do
- 01Draw, animate and interact with 2D graphics on the canvas using a proper game loop with delta time
- 02Use vectors, dot and cross products, matrices and coordinate spaces to move, rotate, scale and project objects
- 03Explain the stages of the graphics pipeline from vertices to pixels
- 04Build 3D scenes with Three.js using cameras, meshes, materials, lights, textures and loaded models
- 05Measure and improve rendering performance and publish an interactive 3D project on the web
Curriculum 43 hours in 12 parts
Select a kind to highlight its parts.
Stage 1A small 2D engine with particles, collisions and a playable game5 parts · 14 h
- 1How computers make pictures: pixels, colour and the graphics pipelineWorkshop · Follow along and build, with the steps and the traps written out.2 hFree
- 2The 2D canvas: shapes, paths, images, animation loops and inputWorkshop · Follow along and build, with the steps and the traps written out.3 h
- 3The maths of graphics: vectors, matrices, transformations and spacesWorkshop · Follow along and build, with the steps and the traps written out.3 h
- 4Check yourself: canvas drawing, animation and graphics mathsQuiz · Twelve questions, marked at once, with the reason behind each answer.1 h
- 5A small 2D engine with particles, collisions and a playable gameLab · Hands-on work. Many labs are checked automatically against what must exist.5 h
Stage 2An interactive 3D product showroom with lights, shadows and picking4 parts · 13 h
- 6The 3D pipeline, WebGL and how a GPU draws trianglesWorkshop · Follow along and build, with the steps and the traps written out.3 h
- 7Three.js: scenes, cameras, meshes, materials, lights and shadowsWorkshop · Follow along and build, with the steps and the traps written out.3 h
- 8Check yourself: the 3D pipeline, WebGL and Three.jsQuiz · Twelve questions, marked at once, with the reason behind each answer.1 h
- 9An interactive 3D product showroom with lights, shadows and pickingLab · Hands-on work. Many labs are checked automatically against what must exist.6 h
Stage 3Textures, glTF, animation and performance2 parts · 4 h
- 10Textures, loading models, skeletal animation and performanceWorkshop · Follow along and build, with the steps and the traps written out.3 h
- 11Check yourself: textures, glTF, animation and performanceQuiz · Twelve questions, marked at once, with the reason behind each answer.1 h
FinishCapstone project1 part · 12 h
- 12A polished interactive 3D web experienceCapstone · A full project for your portfolio.12 h
An internship certificate with your skills on it.
Made for you automatically when you finish the last part, it names the internship programme, the level and the 43 hours, lists what you showed, and carries a number and a QR code. Anyone can check it on the NIBVEDA verification page, and it shows as withdrawn there if it is ever revoked.
- Proof you completed all 43 hours of this internship programme
- An Internship badge for your profile, CV or portfolio
- Not a job, a stipend or an academic degree, and it says so
Keep building.
3 programmes in this track, from beginner to expert. Buy the learning path and save 15%.
Go beneath the library: write vertex and fragment shaders in GLSL, create procedural effects with noise and signed distance functions, implement diffuse, specular, normal-mapped and shadowed lighting, understand physically based rendering and image-based lighting, and build post-processing and render-to-texture pipelines.
- GLSL shaders
- Procedural graphics
- Lighting models
Build renderers that solve the rendering equation: CPU path tracing with Monte Carlo integration, importance sampling and acceleration structures, then real-time engineering with WebGPU compute, GPU ray tracing concepts, virtualised geometry, global illumination, denoising and profiling.
- Path tracing and Monte Carlo methods
- Acceleration structures
- Importance sampling
See all 3 programmes in Computer Graphics and 3D Take the placement test
Quick answers.
The policies have the full detail.
Is this a real internship?
It is a virtual internship programme: a structured, self-paced course built around a real project, with checked assessments and a certificate. It is not employment, it does not carry a stipend and it is not an academic or AICTE-approved qualification. What it gives you is verified, project-based evidence of skills.
How does self-paced work?
You start when you like and move at your own speed. Each part unlocks when you finish the one before it. There are no live classes and no deadlines. Your access is shown on each programme page.
How is my work checked?
Quizzes are marked as soon as you submit them. Labs use a tick-list of tasks. Intermediate and Expert programmes finish with a capstone that the NIBVEDA team reviews and either accepts or sends back with comments.
Can I get a refund?
Please read the refund policy before you buy. It explains when a refund is possible.
Ready to start?
Rs. 293.82 including GST. Lifetime access. Read the first lesson free before you decide.