25
دا ام خ هن ب: ادی ه خد راب ف ده ن ن ک م ی ظ ن ت: ان ن ت ما دس ز ن ه م اد& ن س ا ان& ن س ب ا& ن92

به نام خدا

  • Upload
    chars

  • View
    55

  • Download
    0

Embed Size (px)

DESCRIPTION

به نام خدا. تنظیم کننده: فرانه حدادی استاد: مهندس زمانیان تابستان 92. What is WebGL ?. WebGL ( Web Graphics Library ) WebGL is an implementation of OpenGL ES 2.0 for the web. - PowerPoint PPT Presentation

Citation preview

Page 1: به نام خدا

خدا نام به

: حدادی فرانه کننده تنظیم

زمانیان: مهندس استاد92تابستان

Page 2: به نام خدا

What is WebGL?

• WebGL (Web Graphics Library)• WebGL is an implementation of OpenGL ES 2.0 for

the web.• WebGL is a JavaScript API for rendering interactive

3D graphics and 2D graphics within any compatible web browser without the use of plug-ins.

• WebGL programs consist of control code written in JavaScript and shader code that is executed on a computer's Graphics Processing Unit (GPU).

Page 3: به نام خدا

• WebGL is designed and maintained by the non-profit Khronos Group.

• You program it in Javascript (which is not Java).

• WebGL makes it possible to display amazing realtime 3D graphics in your browser but what many people don't know is that WebGL is actually a 2D API, not a 3D API.

• WebGL only cares about 2 things. Clipspace coordinates in 2D and colors.

Page 4: به نام خدا

• Your job as a programmer using WebGL is to provide WebGL with those 2 things. You provide 2 "shaders" to do this. A Vertex shader which provides the clipspace coordinates and a fragment shader that provides the color.

• Clipspace coordinates always go from -1 to +1 no matter what size your canvas is.

Page 5: به نام خدا

Does it run on my favorite browser?

• Browsers that support WebGL :• Desktop Chrome• Desktop Firefox• Desktop Safari (on OSX, need to flip a flag ) • Desktop Opera

Page 6: به نام خدا

• Browsers that do not support WebGL :• Internet Explorer • Desktop Safari on Windows • Mobile Safari (iOS, iPhone, iPad etc.) • Opera for iOS • Builtin Android browser

Page 7: به نام خدا

Does it run on my favorite platform?• If a platform works or not depends a bit on driver

versions, OS versions and other factors. This is known as a Whitelist/Blacklist .

• here are however platforms where WebGL will not run no matter what:

• Windows on ARM (surface etc.) • Windows Phones • Windows 8 Modern UI • iOS (iPhone, iPad etc.) • This is because Microsoft and Apple have not

implemented WebGL and they dissallow other browsers for these platforms.

Page 8: به نام خدا

Examples:

Page 9: به نام خدا

Here's the 2 shaders:

Page 10: به نام خدا

This will draw a green rectangle the entire size of the canvas. Here it is:

Page 11: به نام خدا

For 2D stuff you would probably rather work in pixels than clipspace so let's change the shader so we can supply rectangles in pixels and have it convert to clipspace for us. Here's the new vertex shader:

Page 12: به نام خدا

Now we can change our data from clipspace to pixels:

Page 13: به نام خدا

And here it is:

Page 14: به نام خدا

You might notice the rectangle is near the bottom of that area. WebGL considers the bottom left corner to be 0,0. To get it to be the more traditional top left corner used for 2d graphics APIs we just flip the y coordinate.

Page 15: به نام خدا

Let's make the code that defines a rectangle into a function so we can call it for different sized rectangles. While we're at it we'll make the color settable.First we make the fragment shader take a color uniform input:

Page 16: به نام خدا

And here's the new code that draws 50 rectangles in random places and random colors:

Page 17: به نام خدا
Page 18: به نام خدا

And here's the rectangles:

Page 19: به نام خدا

What do type="x-shader/x-vertex" and type="x-shader/x-fragment" mean?

<script> tags default to having JavaScript in them. You can put no type or you can put type="javascript" or type="text/javascript" and the browser will interpret the contents as JavaScript. If you put anything else the browser ignores the contents of the script tag. We can use this feature to store shaders in script tags. Even better, we can make up our own type and in our javascript look for that to decide whether to compile the shader as a vertex shader or a fragment shader. In this case the function “createShaderFromScriptElement” looks for a script with specified id and then looks at the type to decide what type of shader to create.

Page 20: به نام خدا

WebGL Image ProcessingTo draw images in WebGL we need to use textures. Similarly to the way WebGL expects clipspace coordinates when rendering instead of pixels, WebGL expects texture coordinates when reading a texture. Texture coordinates go from 0.0 to 1.0 no matter the dimensions of the texture.Since we are only drawing a single rectangle (well, 2 triangles) we need to tell WebGL which place in the texture each point in the rectangle corresponds to. We'll pass this information from the vertex shader to the fragment shader using a special kind of variable called a 'varying'. It's called a varying because it varies. WebGL will interpolate the values we provide in the vertex shader as it draws each pixel using the fragment shader.

Page 21: به نام خدا

Using the vertex shader from the end of previous section we need to add an attribute to pass in texture coordinates and then pass those on to the fragment shader.

Page 22: به نام خدا

Then we supply a fragment shader to look up colors from the texture.

Page 23: به نام خدا

Finally we need to load an image, create a texture and copy the image into the texture. Because we are in a browser images load asynchronously so we have to re-arrange our code a little to wait for the texture to load. Once it loads we'll draw it.

Page 24: به نام خدا

And here's the image rendered in WebGL.

Page 25: به نام خدا

How about just swapping red and blue?