WebGL2 เบื้องต้น

WebGL เป็นการผสมผสานงานกราฟิกส์บนเว็บไซต์ โดยใช้เว็บบราวเซอร์ในการประมวลผลแปลคำสั่ง HTML กับภาษา JavaScript ซึ่งภายในได้นั้นจะต้องมี library ของ OpenGL รวบรวมเอาไว้เป็น API แล้ว ทำให้การทำงานคอมพิวเตอร์กราฟิกส์ง่ายขึ้น รองรับกับการเขียนโปรแกรมแบบ 2 มิติ และ 3 มิติ รวมทั้ง interactive กับผู้ใช้ผ่านคีย์บอร์ดและเมาส์ และสุดท้ายการเขียนโปรแกรมแบบแอนิเมชันด้วย เพราะ HTML5 มี Tag canvas สำหรับสร้างกราฟิกส์ร่วมกับภาษา JavaScript อยู่แล้ว

ของใหม่ที่สำคัญของ WebGL 2.0 คือพัฒนาบนฟีเจอร์ของ OpenGL ES 3.0 (WebGL เวอร์ชัน 1.0 ใช้ OpenGL ES 2.0 ที่เก่ากว่า) ส่งผลให้การแสดงผลกราฟิกบนเว็บทันสมัย ทัดเทียมกับการแสดงผลกราฟิกบนอุปกรณ์พกพาที่ใช้ OpenGL ES 3.0 กันเป็นมาตรฐาน

ฟีเจอร์ของ WebGL 2.0 จะไม่เท่ากับ OpenGL ES 3.0 ซะทีเดียว มีบางฟีเจอร์ถูกตัดออกไปเพื่อป้องกันปัญหาประสิทธิภาพ แต่โดยรวมแล้วก็ถือว่า WebGL 2.0 ได้ฟีเจอร์ด้านการแสดงผลกราฟิกเกือบทั้งหมดของ OpenGL ES 3.0 มาด้วย

สร้างโปรเจ็ค WebGL2

ติดตั้งโปรแกรม Visual Studio Code แล้วสร้างโฟลเดอร์ของโปรเจ็ค จากนั้นสร้างไฟล์ index.html

Canvas

Canvas เป็นหนึ่งใน feature ที่มีคุณสมบัติทางด้านกราฟฟิคที่มาพร้อมกับ HTML5 ซึ่ง Canvas สามารถทำให้คุณสามารถสร้างระบบต่างๆ ที่คุณต้องการขึ้นมา ไม่ว่าจะเป็นระบบเกมส์ หรือโปรแกรมวาดภาพบนเว็บ ที่รองรับทุก platform โดย Canvas เป็น Element หนึ่งใน HTML5 จะมีเพียงแค่ 2 attributes คือ width และ height (ความกว้างและความสูงของ Canvas) เท่านั้น

<canvas id="canvas"></canvas>

นำเข้าไฟล์ JavaScript ชื่อ main.js ซึ่งเราจะเขียนโค้ดการทำงานของ WebGL2 ที่นั่น

<script src="main.js"></script>

โค้ดไฟล์ index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WebGl2 Context</title>
  </head>
  <body>
    <canvas id="canvas"></canvas>
  </body>
  <script src="main.js"></script>
</html>

สร้างกราฟฟิคด้วย WebGL2 context

สร้างตัวแปรชื่อ canvas สำหรับการเข้าถึง Element Id ที่ต้องการ ในที่นี้คือ Element Id ชื่อ canvas

var canvas = document.getElementById("canvas");

กำหนดขนาดความกว้าง canvas ให้เท่ากับขนาดความกว้างของ บราวเซอร์

canvas.width = window.innerWidth;

กำหนดขนาดความสูง canvas ให้เท่ากับขนาดความสูงของ บราวเซอร์

canvas.height = window.innerHeight;

อินเทอร์เฟซ WebGL2RenderingContext จัดเตรียม context การเรนเดอร์ OpenGL ES 3.0 สำหรับพื้นผิวการวาดของอิลิเมนต์ canvas ในการรับออบเจ็กต์ของอินเทอร์เฟซนี้ เราสร้างตัวแปรชื่อ gl ให้ canvas เรียก getContext() โดยระบุ “webgl2” เป็นอาร์กิวเมนต์:

var gl = canvas.getContext("webgl2");

หมายเหตุ: WebGL 2 เป็นส่วนขยายของ อินเทอร์เฟซ WebGL 1 WebGL2RenderingContext ใช้สมาชิกทั้งหมดของอินเทอร์เฟซ WebGLRenderingContext และวิธีการบางอย่างของ context ของ WebGL 1 โดยสามารถยอมรับค่าเพิ่มเติมเมื่อใช้ใน context ของ WebGL 2 คุณจะพบข้อมูลนี้ระบุไว้ในหน้าอ้างอิงของ WebGL 1

กำหนดสีพื้นหลัง โดยมี 4 ค่า คือ Red – สีแดง, Green สีเขียว, Blue สีน้ำเงิน, Opacity ค่าความทึบแสง ซึ่งมีค่าระหว่าง 0.0 ถึง 1.0 ในโค้ดนี้คือ จะเป็นสีแดง เพราะค่า สีแดงเป็น 1.0 และ ค่าความทึบแสง เป็น 1.0

gl.clearColor(1.0, 0.0, 0.0, 1.0);

Clear ภาพในเฟรมเก่า ก่อนวาดใหม่

gl.clear(gl.DEPTH_BUFFER_BIT|gl.COLOR_BUFFER_BIT);

แสดงข้อมูลของ gl ออกสู่หน้า console

console.log(gl);

โค้ดไฟล์ main.js

var canvas = document.getElementById("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var gl = canvas.getContext("webgl2");
//0.0 -> 1.0
gl.clearColor(1.0, 0.0, 0.0, 1.0);
gl.clear(gl.DEPTH_BUFFER_BIT|gl.COLOR_BUFFER_BIT);
console.log(gl);