Computer Graphics-January 12

Graphics Environment : WebGL

What isWebGL?

# WebGL 1.0 is a JavaScript Implementation of OpenGL ES 2.0

Ø  ES – Embedded System

Ø  Uses HTML 5’s canvas element

Ø  Runs in all recent browsers

#  OpenGL ES 2.0 is based on OpenGL 3.1

Ø  Shader based

Ø  All fixed function pipeline functionality deprecated.

 

Why WebGL?

-       Runs across multiple devices

-       No system dependencies

-       Uses local resources

-       Integrates with other web apps

 

HTML File Overview

#  HTML tags

Ø  opening tags and closing tag

<p> my text </p>

Ø  attributes

<name variable =”value”>

#  Page Sections

Ø  File type specification

Ø  header: specifies the title.

Metadata, scripts, style sheets, and included files.

Ø  body: defines the visible page contents.

(Our canvas element is in the body)

 

Four languages – Formatting and Programming language

#  HTML- Hyper Text Markup language. Defines web page layout/ contents, very simple,mostly done for you.

#  CSS- Cascading Style Sheets. Most advanced way to define a web page look and feel.Adds some features to HTML.

#  GLSL– GL ( Graphics Library ) Shader Language. Compiled by the CPU language. Executes on the Graphics Processing Unit ( GPU ).

#  JavaScript– The actual programming language on the CPU that defines the graphics program and sends the data to the GPU.