WebGL - Vẽ Mô hình
Sau khi liên kết bộ đệm với các bộ đổ bóng, bước cuối cùng là vẽ các nguyên thủy cần thiết. WebGL cung cấp hai phương pháp cụ thể là,drawArrays() và drawElements() để vẽ mô hình.
drawArrays ()
drawArrays()là phương pháp được sử dụng để vẽ mô hình bằng cách sử dụng các đỉnh. Đây là cú pháp của nó -
void drawArrays(enum mode, int first, long count)
Phương thức này có ba tham số sau:
mode- Trong WebGL, các mô hình được vẽ bằng các kiểu nguyên thủy. Chế độ sử dụng, lập trình viên phải chọn một trong các kiểu nguyên thủy do WebGL cung cấp. Các giá trị có thể có cho tùy chọn này là - gl.POINTS, gl.LINE_STRIP, gl.LINE_LOOP, gl.LINES, gl.TRIANGLE_STRIP, gl.TRIANGLE_FAN và gl.TRIANGLES.
first- Tùy chọn này chỉ định phần tử bắt đầu trong các mảng đã bật. Nó không thể là một giá trị âm.
count - Tùy chọn này chỉ định số lượng phần tử được hiển thị.
Nếu bạn vẽ một mô hình bằng cách sử dụng drawArrays() , sau đó WebGL, trong khi hiển thị các hình dạng, tạo ra hình học theo thứ tự tọa độ đỉnh được xác định.
Thí dụ
Nếu bạn muốn vẽ một hình tam giác bằng cách sử dụng drawArray() , sau đó bạn phải vượt qua ba đỉnh và gọi drawArrays() như hình dưới đây.
var vertices = [-0.5,-0.5, -0.25,0.5, 0.0,-0.5,];
gl.drawArrays(gl.TRIANGLES, 0, 3);
Nó sẽ tạo ra một hình tam giác như hình dưới đây.
Giả sử bạn muốn vẽ các tam giác liền kề, thì bạn phải vượt qua ba đỉnh tiếp theo theo thứ tự trong bộ đệm đỉnh và đề cập đến số phần tử sẽ được hiển thị là 6.
var vertices = [-0.5,-0.5, -0.25,0.5, 0.0,-0.5, 0.0,-0.5, 0.25,0.5, 0.5,-0.5,];
gl.drawArrays(gl.TRIANGLES, 0, 6);
Nó sẽ tạo ra một tam giác tiếp giáp như hình dưới đây.
drawElements ()
drawElements()là phương pháp được sử dụng để vẽ các mô hình bằng cách sử dụng các đỉnh và chỉ số. Cú pháp của nó như sau:
void drawElements(enum mode, long count, enum type, long offset)
Phương thức này có bốn tham số sau:
mode- Các mô hình WebGL được vẽ bằng các kiểu nguyên thủy. Chế độ sử dụng, lập trình viên phải chọn một trong các kiểu nguyên thủy do WebGL cung cấp. Danh sách các giá trị có thể có cho tùy chọn này là - gl.POINTS, gl.LINE_STRIP, gl.LINE_LOOP, gl.LINES, gl.TRIANGLE_STRIP, gl.TRIANGLE_FAN và gl.TRIANGLES.
count - Tùy chọn này chỉ định số lượng phần tử được hiển thị.
type - Tùy chọn này chỉ định kiểu dữ liệu của các chỉ số phải là UNSIGNED_BYTE hoặc UNSIGNED_SHORT.
offset- Tùy chọn này chỉ định điểm bắt đầu để kết xuất. Nó thường là phần tử đầu tiên (0).
Nếu bạn vẽ một mô hình bằng cách sử dụng drawElements()thì đối tượng đệm chỉ mục cũng nên được tạo cùng với đối tượng đệm đỉnh. Nếu bạn sử dụng phương pháp này, dữ liệu đỉnh sẽ được xử lý một lần và sử dụng nhiều lần như đã đề cập trong các chỉ số.
Thí dụ
Nếu bạn muốn vẽ một tam giác duy nhất bằng cách sử dụng các chỉ số, bạn cần chuyển các chỉ số cùng với các đỉnh và gọi drawElements() như hình dưới đây.
var vertices = [ -0.5,-0.5,0.0, -0.25,0.5,0.0, 0.0,-0.5,0.0 ];
var indices = [0,1,2];
gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT,0);
Nó sẽ tạo ra kết quả sau:
Nếu bạn muốn vẽ hình tam giác lây nhiễm bằng cách sử dụng drawElements() , chỉ cần thêm các đỉnh khác và đề cập đến các chỉ số cho các đỉnh còn lại.
var vertices = [
-0.5,-0.5,0.0,
-0.25,0.5,0.0,
0.0,-0.5,0.0,
0.25,0.5,0.0,
0.5,-0.5,0.0
];
var indices = [0,1,2,2,3,4];
gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT,0);
Nó sẽ tạo ra kết quả sau:
Hoạt động bắt buộc
Trước khi vẽ sơ đồ, bạn cần thực hiện một số thao tác, được giải thích dưới đây.
Xóa Canvas
Trước hết, bạn nên xóa canvas, sử dụng clearColor()phương pháp. Bạn có thể chuyển các giá trị RGBA của một màu mong muốn làm tham số cho phương thức này. Sau đó, WebGL xóa canvas và tô nó bằng màu được chỉ định. Do đó, bạn có thể sử dụng phương pháp này để thiết lập màu nền.
Hãy xem ví dụ sau. Ở đây chúng ta đang chuyển giá trị RGBA của màu xám.
gl.clearColor(0.5, 0.5, .5, 1);
Bật kiểm tra độ sâu
Bật kiểm tra độ sâu bằng cách sử dụng enable() như hình dưới đây.
gl.enable(gl.DEPTH_TEST);
Xóa bit đệm màu
Xóa màu cũng như vùng đệm độ sâu bằng cách sử dụng clear() như hình dưới đây.
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
Đặt cổng xem
Cổng khung nhìn đại diện cho một vùng có thể xem hình chữ nhật chứa kết quả hiển thị của bộ đệm bản vẽ. Bạn có thể đặt kích thước của cổng xem bằng cách sử dụngviewport()phương pháp. Trong đoạn mã sau, kích thước cổng xem được đặt thành kích thước canvas.
gl.viewport(0,0,canvas.width,canvas.height);