https://github.com/bringhurst/webgl-presentation

A presentation on webgl that I'm working on
https://github.com/bringhurst/webgl-presentation

Last synced: 3 months ago
JSON representation

A presentation on webgl that I'm working on

• Host: GitHub
• URL: https://github.com/bringhurst/webgl-presentation
• Owner: bringhurst
• Created: 2010-06-27T19:42:05.000Z (almost 16 years ago)
• Default Branch: master
• Last Pushed: 2010-09-22T18:49:38.000Z (almost 16 years ago)
• Last Synced: 2025-01-20T12:46:10.537Z (over 1 year ago)
• Homepage:
• Size: 387 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README

Awesome Lists containing this project

README

          
WebGL Crash Course

- Go to http://github.com/fintler/WebGL-Presentation for code.

Who are you?

- Someone who's comfortable with JavaScript and C.

- Someone who knows the basics of matrices and vectors.

Who am I?

- Someone who barely knows anything about WebGL and OpenGL.

- Someone who is probably going to tell you at least one incorrect thing today.

- Jon Bringhurst 

What is OpenGL?

- Open Graphics Library.

- So you can write code that runs on different video cards.

- The program you write is a "client", the video card is a "server".

- To help you fight with matrix math.

What is OpenGL ES?

- Open Graphics Library for Embedded Systems.

- The best or most useful parts of the full OpenGL spec.

- Generally only one way to do everything.

What is WebGL?

- The JavaScript way to use OpenGL ES (2.0).

- Uses the webgl context of a  element.

- Awesome.

High level -- how to use WebGL?

- Do the following in order from 1 to 6.

  - Step 1: Create and setup two programs that run on the video card.

  - Step 2: Send camera information to the first program (vertex shader).

  - Step 3: Send shape (vertex) information to the first program.

  - Step 4: Send color (fragment) information to the second program.

  - Step 5: Tell the video card to draw the stuff you sent it.

  - Step 6: Go to step 1.

Programs that run on the video card?

- Called "shaders".

- We only worry about "vertex" (points in 3d space) and "fragment" (color).

- Written in a C-like language known as GLSL.

- Write your shader in a  tag, then get it with innerHTML or whatever.

Compile and send it to the video card.

- Compile example.

- Send to video card example.

Send camera information.

- Send camera information example.

Send shape information.

- Send shape information example.

Rasterization

- Linear interpolation between vertices to create fragments.

- The invisible step between your vertex and fragment shader.

Send color information

- Send color information example.

Overview of the pipeline

- All of the stuff that happens behind the scenes.

- Important to know, but only after you get the basics down.

Now tell the video card to run through the pipeline

- Example of drawing.

- Show the output.

Useful links and libraries

- WebGLU.

- "Learning WebGL" series.

End