WebGL - Hướng dẫn thân thiện cho người mới bắt đầu
Xin chào các pháp sư WebGL tương lai! Tôi rất vui mừng được làm hướng dẫn viên cho bạn trong hành trình đầy.exciting này vào thế giới của WebGL. Là một ai đó đã dạy khoa học máy tính trong nhiều năm, tôi có thể nói rằng WebGL giống như một cọ vẽ ma thuật cho trình duyệt web của bạn. Nó cho phép bạn tạo ra những hình ảnh 3D tuyệt đẹp ngay trong các trang web của bạn! Vậy, chúng ta hãy撸 sleeves lên và bắt đầu nhé?
Tạo phần tử Canvas HTML-5
Trước hết, chúng ta cần một canvas để vẽ. Trong HTML5, chúng ta có một thứ gọi là phần tử <canvas>. Nó giống như một tờ giấy trắng nơi chúng ta sẽ vẽ những kiệt tác WebGL của mình.
Hãy tạo canvas của chúng ta:
<canvas id="myWebGLCanvas" width="800" height="600">
Trình duyệt của bạn không hỗ trợ HTML5 canvas.
</canvas>Mã này tạo ra một canvas rộng 800 pixel và cao 600 pixel. Chúng ta đã đặt ID là "myWebGLCanvas" - nghĩ về nó như là thẻ tên của canvas. Văn bản trong thẻ là thông báo dự phòng cho các trình duyệt không hỗ trợ canvas (nhưng đừng lo lắng, hầu hết các trình duyệt hiện đại đều hỗ trợ).
Lấy ID của Canvas
Bây giờ chúng ta đã có canvas, chúng ta cần lấy nó trong mã JavaScript của mình. Chúng ta làm điều này bằng cách sử dụng phương thức getElementById. Nó giống như gọi canvas bằng thẻ tên của nó.
let canvas = document.getElementById('myWebGLCanvas');Dòng này tìm thấy phần tử canvas và lưu trữ nó trong một biến叫做 canvas. Dễ như trở bàn tay!
Lấy.Context Vẽ WebGL
Bây giờ đến phần thú vị - lấy context WebGL của chúng ta. Context giống như bộ công cụ vẽ ma thuật mà chúng ta sẽ sử dụng trên canvas.
let gl = canvas.getContext('webgl');
if (!gl) {
console.log('WebGL không được hỗ trợ, chuyển sang experimental-webgl');
gl = canvas.getContext('experimental-webgl');
}
if (!gl) {
alert('Trình duyệt của bạn không hỗ trợ WebGL');
}Hãy phân tích điều này:
- Chúng ta cố gắng lấy context WebGL bằng cách sử dụng
getContext('webgl'). - Nếu điều đó không hoạt động (có lẽ trình duyệt hơi cũ), chúng ta thử
experimental-webgl. - Nếu chúng ta vẫn không có context, chúng ta thông báo cho người dùng rằng trình duyệt của họ không hỗ trợ WebGL.
WebGLContextAttributes
Khi chúng ta tạo context WebGL, chúng ta có thể chỉ định một số thuộc tính để tùy chỉnh hành vi của nó. Nó giống như chọn cài đặt cho cọ vẽ ma thuật của chúng ta. Dưới đây là bảng các thuộc tính khả dụng:
| Thuộc tính | Mô tả | Giá trị mặc định |
|---|---|---|
| alpha | Canvas chứa một bộ đệm alpha | true |
| depth | Bộ đệm vẽ có một bộ đệm sâu ít nhất 16 bit | true |
| stencil | Bộ đệm vẽ có một bộ đệm stencil ít nhất 8 bit | false |
| antialias | Bộ đệm vẽ thực hiện anti-aliasing | true |
| premultipliedAlpha | Trình tạo giao diện trang sẽ giả định rằng bộ đệm vẽ chứa màu có alpha nhân trước | true |
| preserveDrawingBuffer | Các bộ đệm sẽ không bị xóa và sẽ giữ giá trị của chúng cho đến khi bị xóa hoặc ghi đè | false |
| failIfMajorPerformanceCaveat | Việc tạo context sẽ thất bại nếu hiệu suất hệ thống thấp | false |
Để sử dụng các thuộc tính này, chúng ta có thể truyền một đối tượng khi lấy context:
let contextAttributes = {
alpha: false,
depth: true,
stencil: true,
antialias: true,
premultipliedAlpha: false,
preserveDrawingBuffer: false,
failIfMajorPerformanceCaveat: false
};
let gl = canvas.getContext('webgl', contextAttributes);WebGLRenderingContext
Khi chúng ta có context WebGL, chúng ta có thể bắt đầu sử dụng các phương thức và thuộc tính của nó để tạo ra những hình ảnh tuyệt vời. WebGLRenderingContext cung cấp tất cả các hàm vẽ WebGL.
Dưới đây là một ví dụ đơn giản rằng làm sạch canvas với màu xanh lam trời:
if (gl) {
// Đặt màu làm sạch thành xanh lam trời
gl.clearColor(0.529, 0.808, 0.922, 1.0);
// Làm sạch bộ đệm màu với màu đã chỉ định
gl.clear(gl.COLOR_BUFFER_BIT);
}Hãy phân tích điều này:
-
gl.clearColor(0.529, 0.808, 0.922, 1.0): Dette đặt màu chúng ta sẽ sử dụng để làm sạch canvas. Các sốrepresent Red, Green, Blue, và Alpha giá trị, mỗi giá trị từ 0 đến 1. -
gl.clear(gl.COLOR_BUFFER_BIT): Điều này thực sự làm sạch canvas với màu chúng ta đã chỉ định.
Và voila! Bạn đã vẽ xong kiệt tác WebGL đầu tiên của mình - một canvas xanh lam trời đẹp!
Nhớ rằng, đây chỉ là bắt đầu. WebGL có rất nhiều hàm cho phép bạn tạo ra các hình ảnh 3D phức tạp. Nó giống như học vẽ - chúng ta bắt đầu với một canvas trắng và một màu duy nhất, nhưng với sự thực hành, bạn sẽ nhanh chóng tạo ra các thế giới 3D phức tạp!
Khi chúng ta kết thúc phần giới thiệu về context WebGL, tôi nhớ lại lần đầu tiên dạy khái niệm này. Tôi có một học sinh rất háo hức về việc làm sạch canvas với các màu khác nhau, anh ấy đã dành cả buổi chiều tạo một chương trình "đèn thay đổi màu sắc". Điều này chỉ ra rằng ngay cả những khái niệm đơn giản nhất cũng có thể kích thích sự sáng tạo phi thường!
Trong bài học tiếp theo, chúng ta sẽ đi sâu hơn vào WebGL và bắt đầu vẽ một số hình dạng. Cho đến那时, chúc các bạn mã hóa vui vẻ, và mong canvas của bạn luôn đầy màu sắc!
Credits: Image by storyset