• وب سنتی دست خوش تغییرات فراوانی شده است.
• مرورگرها به‌ سرعت در حال تحول هستند.
• مرورگرها به پلتفرم‌های پیشرفته‌ای تبدیل شده‌اند.

• فلش سالها نیاز های گرافیکی برنامه نویسان را برآورده کرده است.
• ولی
  • یکی از خطرناک‌ترین نرم‌افزارهای حال حاضر در دنیای اینترنت است.
  • پهنای باند اینترنت را هدر می دهد.
  • انحصاری شرکت ادوبی است.

• HTML 5
  • معرفی نسخه اولیه در 2008
  • معرفی نسخه نهایی در 2014
  • معرفی ویژگی های جدید از جمله :
    2D Canvas , SVG , 3D CSS , WebGL

• WebGL به زبان ساده، تکنولوژی‌ برای :
  کشیدن، به نمایش در آوردن و تعامل سطح بالا و پیشرفته
  با گرافیک دو بعدی و سه‌بعدی کامپیوتری
  از طریق html5 و javascript
  در مرورگرهای وب است.

• مزیت های WebGL :
  • یک تکنولوژی built-in در مرورگرهای مدرن
  • بدون نیاز به کامپایل کردن
  • open source
  • برنامه نویسی با javascript (حتی jquery)
  • مدیریت حافظه خودکار
  • دسترسی مستقیم به GPU

سیستم مختصات

• حجم دید محدود به (1, 1, 1) و (-1, -1, - 1)
• Vertices
• Indices

بافرها

• Vertex buffer objects
  قسمتی از حافظه که داده های مربوط به هر vertex را ذخیره می کند.


• Index buffer objects
  قسمتی از حافظه که داده های مربوط به index ها را ذخیره می کند.


• Frame buffer
  قسمتی از حافظه که اطلاعات مربوط به صحنه نهایی را ذخیره می کند.
  مانند : طول و عرض صحنه ، رنگ هر پیکسل و ...

Mesh

Shader Programs

• برای رسم مثلث ها اطلاعات باید از CPU به GPU منتقل شود = سربار
• WebGl برای کاهش این سربار از Shader Programs استفاده می کند.
• Shader Programs با زبان OpenGL ES Shading Language (GLSL) نوشته می شود.
• قطعه کدی است که اطلاعات مربوط به پیکسل های یک mesh را می گیرد و شکل را رسم می کند.

انواع Shader

• Vertex Shader
  • برنامه ای که برای همه vertex ها اجرا می شود.
  • همه ی ویژگی های راس ها را کنترل می کند.
    مانند : مختصات ، رنگ ، بافت و ...
• Fragment Shader
  • یک mesh از تعدادی مثلث تشکیل شده است که هر سطح مثلث یک fragment نامیده می شود.
  • برنامه ای است که برای همه پیکسل های یک fragment اجرا می شود.

متغیرهای OpenGL ES SL

• Attributes
  داده ها را از vertex buffer objects می گیرد.
• Uniforms
  داده های ورودی که در هر دو shader مشترک هستند.
  مانند : موقعیت نور , بافت و ...
• Varyings
  به منظور انتقال داده از vertex shader به fragment shader مورد استفاده قرار می گیرد.

Graphics Pipeline

توضیحات بخش های مختلف Graphics Pipeline

• 1 - Vertex Shader
  مشخصات راس ها تعیین می شود.
• 2 - Primitive Assembly
  مثلث ها تشکیل می شوند.
• 3 - Rasterization
  پیکسل های شکل نهایی مشخص می شوند.
  • Culling
  • Clipping

توضیحات بخش های مختلف Graphics Pipeline

• 4 - Fragment Shader
  
• 5 - Frame Buffer
  

مراحل رسم با WebGL

• 1 - تعریف کردن Canvas و گرفتن تفسیر از WebGL
  
• 2 - تعریف کردن هندسه مورد نیاز و ذخیره کردن آن در بافرها
  
• 3 - ایجاد و کامپایل کردن برنامه shader
  
• 4 - اختصاص دادن بافرها به برنامه shader
  
• 5 - رسم شئ مورد نظر
  

1 - تعریف کردن Canvas و گرفتن تفسیر از WebGL

HTML

JavaScript

2 - تعریف کردن هندسه مورد نیاز و ذخیره کردن آن در بافرها

• var vertices = [-0.5, 0.5, -0.5, -0.5, 0.0, -0.5, 1, 0.0];
  
• var vertex_buffer = gl.createBuffer();
  
• gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
  
• gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
  
• gl.bindBuffer(gl.ARRAY_BUFFER, null);
  

3 - ایجاد و کامپایل کردن برنامه shader

• 1.3 - ایجاد و کامپایل کردن برنامه shader رئوس
  
• 2.3 - ایجاد و کامپایل کردن برنامه shader اضلاع
  
• 3.3 - متصل کردن دو برنامه به یکدیگر
  

5 - رسم شئ مورد نظر

• gl.drawArrays(gl.TRIANGLES, 0, 3);
  
• gl.drawArrays(gl.POINTS, 0, 3);
  
• gl.drawArrays(gl.LINE_STRIP, 0, 3);
  
• gl.drawArrays(gl.LINE_LOOP, 0, 3);
  

چیزی که تا حالا رسم شده است!؟

چیزی که در بازار کار موجود است؟!؟

با خود WebGL خام این همه جزییات را بنویسیم!؟!