Skip to content

README.md

Latest commit

 

History

History
64 lines (40 loc) · 3.41 KB

README.md

File metadata and controls

64 lines (40 loc) · 3.41 KB
Raw

Computer Graphics with WebGL

Using WebGL to learn about graphics computing. This repository serves as a springboard for your journey into the world of computer graphics using WebGL! We'll explore creating shapes, bringing them to life with animation, and even render a classic constellation – all within your web browser.

Learning WebGL:

There are fantastic resources available to guide you through the exciting world of WebGL. Here are a few recommendations:

  • Websites:
    • A WebGL Introduction - A comprehensive and well-structured tutorial from Google.
    • WebGL Fundamentals [invalid URL removed] - The official documentation from Mozilla Developer Network (MDN).
  • Books:
    • " WebGL Programming Guide" by Laurens Cantarelli and Khronos Group ([ISBN 148421009X])
    • " Interactive WebGL: Creating Stunning 3D Graphics for the Web" by Eric Haines ([ISBN 0134645668])

Project Overview:

This repository includes a basic WebGL application (index.html and script.js) that demonstrates:

  1. Drawing Polygons: We'll create a simple polygon shape using WebGL primitives.
  2. Animation: We'll implement code to rotate the polygon, creating a sense of movement.
  3. Constellation Rendering: Explore including a pre-defined set of points and lines to represent a constellation like Orion or Ursa Major.

Running the Application:

  1. Prerequisites:
    • A modern web browser with WebGL support (Chrome, Firefox, Edge, etc.)
  2. Instructions:
    • Clone this repository to your local machine.
    • Open the index.html file in your web browser.

Exploring the Code:

  • index.html: This file sets up the basic HTML structure and loads the JavaScript code that renders the WebGL scene.
  • script.js: This JavaScript file contains the core functionalities for creating the polygon, animating its rotation, and (optionally) rendering a constellation.

Challenge Yourself!:

This is just the beginning! Feel free to experiment and expand on the concepts:

  • Try creating different shapes (triangles, squares, etc.).
  • Implement different animation effects (scaling, translation).
  • Explore lighting and shading techniques for a more realistic feel.
  • Add user interaction – allow users to control the rotation or display information on hover.
  • Create a library of constellations or even venture into 3D models of celestial bodies!

Remember:

  • Consistent commenting throughout your code improves readability and maintainability.
  • Practice is key! The more you experiment, the more comfortable you'll become with WebGL.
  • There's a vast WebGL community online. Don't hesitate to seek help or share your creations!

License:

This repository is provided under the MIT License. See the LICENSE file for more information.

Embrace the Exploration!

WebGL opens doors to a captivating world of creating interactive 3D graphics on the web. With dedication and these resources, you'll be well on your way to mastering this powerful technology.