WebGL - Ngữ cảnh

Để viết một ứng dụng WebGL, bước đầu tiên là lấy đối tượng ngữ cảnh kết xuất WebGL. Đối tượng này tương tác với bộ đệm bản vẽ WebGL và có thể gọi tất cả các phương thức WebGL. Các hoạt động sau được thực hiện để lấy ngữ cảnh WebGL:

Tạo canvas HTML-5
Nhận ID canvas
Nhận WebGL

Tạo phần tử canvas HTML-5

Trong Chương 5, chúng ta đã thảo luận về cách tạo một phần tử canvas HTML-5. Trong phần nội dung của tài liệu HTML-5, hãy viết canvas, đặt tên cho nó và chuyển nó dưới dạng tham số cho id thuộc tính. Bạn có thể xác định kích thước của canvas bằng cách sử dụng thuộc tính chiều rộng và chiều cao (tùy chọn).

Thí dụ

Ví dụ sau đây cho thấy cách tạo phần tử canvas với kích thước 500 × 500. Chúng tôi đã tạo đường viền cho canvas bằng cách sử dụng CSS để hiển thị. Sao chép và dán mã sau vào tệp có tênmy_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>

Nó sẽ tạo ra kết quả sau:

Nhận ID Canvas

Sau khi tạo canvas, bạn phải lấy ngữ cảnh WebGL. Điều đầu tiên cần làm để có được ngữ cảnh bản vẽ WebGL là lấy id của phần tử canvas hiện tại.

Canvas ID có được bằng cách gọi phương thức DOM (Mô hình đối tượng tài liệu) getElementById(). Phương thức này chấp nhận một giá trị chuỗi làm tham số, vì vậy chúng tôi chuyển tên của canvas hiện tại cho nó.

Ví dụ: nếu tên canvas là my_canvas, sau đó ID canvas thu được như hình dưới đây−

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

Nhận bối cảnh vẽ WebGL

Để lấy đối tượng WebGLRenderingContext (hoặc đối tượng ngữ cảnh Bản vẽ WebGL hoặc đơn giản là ngữ cảnh WebGL), hãy gọi getContext() phương pháp của hiện tại HTMLCanvasElement. Cú pháp của getContext () như sau:

canvas.getContext(contextType, contextAttributes);

Vượt qua các chuỗi webgl hoặc là experimental-webgl như là contentType. CáccontextAttributestham số là tùy chọn. (Trong khi tiếp tục bước này, hãy đảm bảo rằng trình duyệt của bạn triển khai WebGL phiên bản 1 (OpenGL ES 2.0)).

Đoạn mã sau cho biết cách lấy ngữ cảnh kết xuất WebGL. Đâygl là biến tham chiếu đến đối tượng ngữ cảnh thu được.

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

WebGLContextAttributes

Thông số WebGLContextAttributesđó không phải mệnh lệnh. Tham số này cung cấp các tùy chọn khác nhau chấp nhận các giá trị Boolean như được liệt kê bên dưới:

Sr.No.	Thuộc tính & Mô tả
1	Alpha Nếu giá trị của nó là true, nó sẽ cung cấp một bộ đệm alpha cho canvas. Theo mặc định, giá trị của nó là true.
2	depth Nếu giá trị của nó là true, bạn sẽ nhận được bộ đệm bản vẽ chứa bộ đệm độ sâu ít nhất 16 bit. Theo mặc định, giá trị của nó là true.
3	stencil Nếu giá trị của nó là true, bạn sẽ nhận được một bộ đệm bản vẽ chứa bộ đệm stencil ít nhất 8 bit. Theo mặc định, giá trị của nó là false.
4	antialias Nếu giá trị của nó là true, bạn sẽ nhận được bộ đệm bản vẽ thực hiện khử răng cưa. Theo mặc định, giá trị của nó là true.
5	premultipliedAlpha Nếu giá trị của nó là true, bạn sẽ nhận được một bộ đệm bản vẽ chứa các màu với alpha được nhân trước. Theo mặc định, giá trị của nó là true.
6	preserveDrawingBuffer Nếu giá trị của nó là true, các bộ đệm sẽ không bị xóa và sẽ giữ nguyên giá trị của chúng cho đến khi bị tác giả xóa hoặc ghi đè. Theo mặc định, giá trị của nó là false.

Đoạn mã sau cho biết cách tạo ngữ cảnh WebGL với bộ đệm stencil, bộ đệm này sẽ không hoạt động anti-aliasing.

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

Tại thời điểm tạo WebGLRenderingContext, một vùng đệm bản vẽ được tạo. Đối tượng Context quản lý trạng thái OpenGL và hiển thị vào bộ đệm bản vẽ.

WebGLRenderingContext

Nó là giao diện chính trong WebGL. Nó đại diện cho bối cảnh vẽ WebGL. Giao diện này chứa tất cả các phương thức được sử dụng để thực hiện các tác vụ khác nhau trên bộ đệm Vẽ. Các thuộc tính của giao diện này được đưa ra trong bảng sau.

Sr.No.	Thuộc tính & Mô tả
1	Canvas Đây là một tham chiếu đến phần tử canvas đã tạo ra ngữ cảnh này.
2	drawingBufferWidth Thuộc tính này đại diện cho chiều rộng thực của vùng đệm bản vẽ. Nó có thể khác với thuộc tính width của HTMLCanvasElement.
3	drawingBufferHeight Thuộc tính này đại diện cho chiều cao thực của vùng đệm bản vẽ. Nó có thể khác với thuộc tính chiều cao của HTMLCanvasElement.