WebGL - บริบท

ในการเขียนแอปพลิเคชัน WebGL ขั้นตอนแรกคือการรับอ็อบเจ็กต์บริบทการแสดงผล WebGL วัตถุนี้โต้ตอบกับบัฟเฟอร์การวาด WebGL และสามารถเรียกใช้เมธอด WebGL ทั้งหมด การดำเนินการต่อไปนี้ดำเนินการเพื่อขอรับบริบท WebGL -

สร้างผ้าใบ HTML-5
รับรหัสแคนวาส
รับ WebGL

การสร้างองค์ประกอบผ้าใบ HTML-5

ในบทที่ 5 เราได้พูดถึงวิธีการสร้างองค์ประกอบผ้าใบ HTML-5 ภายในเนื้อหาของเอกสาร HTML-5 ให้เขียนแคนวาสตั้งชื่อและส่งเป็นพารามิเตอร์ไปยัง id แอตทริบิวต์ คุณสามารถกำหนดขนาดของผืนผ้าใบโดยใช้แอตทริบิวต์ความกว้างและความสูง (ไม่บังคับ)

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงวิธีสร้างองค์ประกอบผ้าใบที่มีขนาด 500 × 500 เราได้สร้างเส้นขอบให้กับผืนผ้าใบโดยใช้ CSS เพื่อการมองเห็น คัดลอกและวางรหัสต่อไปนี้ในไฟล์ที่มีชื่อmy_canvas.html.

<!DOCTYPE HTML>
<html>
   <head>
      <style>
         #mycanvas{border:1px solid blue;}
      </style>
   </head>
   <body>
      <canvas id = "mycanvas" width = "300" height = "300"></canvas>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

รับ Canvas ID

หลังจากสร้างผ้าใบคุณต้องได้รับบริบท WebGL สิ่งแรกที่ต้องทำเพื่อรับบริบทการวาด WebGL คือการรับ id ขององค์ประกอบผืนผ้าใบปัจจุบัน

Canvas ID ได้มาโดยการเรียกใช้เมธอด DOM (Document Object Model) getElementById(). วิธีนี้ยอมรับค่าสตริงเป็นพารามิเตอร์ดังนั้นเราจึงส่งชื่อของผืนผ้าใบปัจจุบันไป

ตัวอย่างเช่นถ้าชื่อผ้าใบคือ my_canvasจากนั้นจะได้รับรหัสแคนวาสตามที่แสดงด้านล่าง

var canvas = document.getElementById('my_Canvas');

รับบริบทการวาด WebGL

ในการรับวัตถุ WebGLRenderingContext (หรือวัตถุบริบทการวาด WebGL หรือบริบท WebGL) ให้เรียกใช้ getContext() วิธีการปัจจุบัน HTMLCanvasElement. ไวยากรณ์ของ getContext () มีดังนี้ -

canvas.getContext(contextType, contextAttributes);

ผ่านสตริง webgl หรือ experimental-webgl เป็น contentType. contextAttributesพารามิเตอร์เป็นทางเลือก (ขณะดำเนินการตามขั้นตอนนี้ตรวจสอบให้แน่ใจว่าเบราว์เซอร์ของคุณใช้WebGLเวอร์ชัน 1 (OpenGL ES 2.0))

ข้อมูลโค้ดต่อไปนี้แสดงวิธีการขอรับบริบทการแสดงผล WebGL ที่นี่gl เป็นตัวแปรอ้างอิงไปยังวัตถุบริบทที่ได้รับ

var canvas = document.getElementById('my_Canvas');
var gl = canvas.getContext('experimental-webgl');

WebGLContextAttributes

พารามิเตอร์ WebGLContextAttributesไม่ได้บังคับ พารามิเตอร์นี้มีตัวเลือกต่างๆที่ยอมรับค่าบูลีนตามรายการด้านล่าง -

ซีเนียร์	คุณสมบัติและคำอธิบาย
1	Alpha หากค่าเป็นจริงจะมีบัฟเฟอร์อัลฟาให้กับแคนวาส ตามค่าเริ่มต้นค่าของมันจะเป็นจริง
2	depth หากค่าเป็นจริงคุณจะได้บัฟเฟอร์รูปวาดซึ่งมีบัฟเฟอร์ความลึกอย่างน้อย 16 บิต ตามค่าเริ่มต้นค่าของมันจะเป็นจริง
3	stencil หากค่าเป็นจริงคุณจะได้บัฟเฟอร์รูปวาดซึ่งมีบัฟเฟอร์ลายฉลุอย่างน้อย 8 บิต ตามค่าเริ่มต้นค่าของมันจะเป็นเท็จ
4	antialias หากค่าเป็นจริงคุณจะได้บัฟเฟอร์รูปวาดซึ่งทำหน้าที่ต่อต้านการลบรอยหยัก ตามค่าเริ่มต้นค่าของมันจะเป็นจริง
5	premultipliedAlpha หากค่าเป็นจริงคุณจะได้บัฟเฟอร์รูปวาดซึ่งมีสีพร้อมอัลฟ่าที่คูณไว้ล่วงหน้า ตามค่าเริ่มต้นค่าของมันจะเป็นจริง
6	preserveDrawingBuffer หากค่าเป็นจริงบัฟเฟอร์จะไม่ถูกล้างและจะคงค่าไว้จนกว่าผู้เขียนจะล้างหรือเขียนทับ ตามค่าเริ่มต้นค่าของมันจะเป็นเท็จ

ข้อมูลโค้ดต่อไปนี้แสดงวิธีสร้างบริบท WebGL ด้วยบัฟเฟอร์ลายฉลุซึ่งจะไม่ทำงาน anti-aliasing.

var canvas = document.getElementById('canvas1');
var context = canvas.getContext('webgl', { antialias: false, stencil: true });

ในขณะสร้าง WebGLRenderingContext บัฟเฟอร์รูปวาดจะถูกสร้างขึ้น วัตถุบริบทจัดการสถานะ OpenGL และแสดงผลไปยังบัฟเฟอร์รูปวาด

WebGLRenderingContext

เป็นอินเทอร์เฟซหลักใน WebGL แสดงบริบทการวาด WebGL อินเทอร์เฟซนี้มีวิธีการทั้งหมดที่ใช้ในการดำเนินการต่างๆบนบัฟเฟอร์การวาด แอตทริบิวต์ของอินเทอร์เฟซนี้มีให้ในตารางต่อไปนี้

ซีเนียร์	คุณสมบัติและคำอธิบาย
1	Canvas นี่คือการอ้างอิงถึงองค์ประกอบผืนผ้าใบที่สร้างบริบทนี้
2	drawingBufferWidth แอตทริบิวต์นี้แสดงถึงความกว้างจริงของบัฟเฟอร์รูปวาด อาจแตกต่างจากแอตทริบิวต์ width ของ HTMLCanvasElement
3	drawingBufferHeight แอตทริบิวต์นี้แสดงถึงความสูงจริงของบัฟเฟอร์รูปวาด อาจแตกต่างจากแอตทริบิวต์ความสูงของ HTMLCanvasElement