Instancing Hình học WebGL: Mở khóa khả năng kết xuất đối tượng trùng lặp hiệu quả cho trải nghiệm toàn cầu

Trong bối cảnh phát triển web hiện đại ngày càng mở rộng, việc tạo ra các trải nghiệm 3D hấp dẫn và hiệu suất cao là điều tối quan trọng. Từ các trò chơi nhập vai và trực quan hóa dữ liệu phức tạp đến các chuyến tham quan kiến trúc chi tiết và công cụ cấu hình sản phẩm tương tác, nhu cầu về đồ họa thời gian thực, phong phú tiếp tục tăng vọt. Một thách thức chung trong các ứng dụng này là kết xuất nhiều đối tượng giống hệt hoặc rất giống nhau – hãy xem xét một khu rừng với hàng ngàn cây, một thành phố nhộn nhịp với vô số tòa nhà, hoặc một hệ thống hạt với hàng triệu phần tử riêng lẻ. Các phương pháp kết xuất truyền thống thường thất bại dưới tải trọng này, dẫn đến tốc độ khung hình chậm chạp và trải nghiệm người dùng không tối ưu, đặc biệt đối với khán giả toàn cầu với các khả năng phần cứng đa dạng.

Đây là lúc Instancing Hình học WebGL nổi lên như một kỹ thuật mang tính chuyển đổi. Instancing là một phương pháp tối ưu hóa mạnh mẽ do GPU điều khiển, cho phép các nhà phát triển kết xuất một số lượng lớn các bản sao của cùng một dữ liệu hình học chỉ với một lệnh gọi vẽ (draw call). Bằng cách giảm đáng kể chi phí giao tiếp giữa CPU và GPU, instancing mở ra hiệu suất chưa từng có, cho phép tạo ra các cảnh rộng lớn, chi tiết và có tính động cao, chạy mượt mà trên nhiều loại thiết bị, từ các máy trạm cao cấp đến các thiết bị di động khiêm tốn hơn, đảm bảo một trải nghiệm nhất quán và hấp dẫn cho người dùng trên toàn thế giới.

Trong hướng dẫn toàn diện này, chúng ta sẽ đi sâu vào thế giới của instancing hình học WebGL. Chúng ta sẽ khám phá các vấn đề cơ bản mà nó giải quyết, hiểu cơ chế cốt lõi của nó, đi qua các bước triển khai thực tế, thảo luận về các kỹ thuật nâng cao, và làm nổi bật những lợi ích sâu sắc và các ứng dụng đa dạng của nó trong nhiều ngành công nghiệp khác nhau. Dù bạn là một lập trình viên đồ họa dày dạn kinh nghiệm hay mới làm quen với WebGL, bài viết này sẽ trang bị cho bạn kiến thức để khai thác sức mạnh của instancing và nâng các ứng dụng 3D dựa trên web của bạn lên một tầm cao mới về hiệu quả và độ trung thực hình ảnh.

Điểm nghẽn trong kết xuất: Tại sao Instancing lại quan trọng

Để thực sự đánh giá cao sức mạnh của instancing hình học, điều cần thiết là phải hiểu các điểm nghẽn cố hữu trong các quy trình kết xuất 3D truyền thống. Khi bạn muốn kết xuất nhiều đối tượng, ngay cả khi chúng giống hệt nhau về mặt hình học, một phương pháp thông thường thường bao gồm việc thực hiện một "lệnh gọi vẽ" (draw call) riêng biệt cho mỗi đối tượng. Một lệnh gọi vẽ là một chỉ thị từ CPU đến GPU để vẽ một lô các đối tượng cơ bản (primitives) (tam giác, đường thẳng, điểm).

Hãy xem xét các thách thức sau:

• Chi phí giao tiếp CPU-GPU: Mỗi lệnh gọi vẽ đều phát sinh một lượng chi phí nhất định. CPU phải chuẩn bị dữ liệu, thiết lập các trạng thái kết xuất (shader, texture, liên kết bộ đệm), và sau đó ra lệnh cho GPU. Đối với hàng ngàn đối tượng, việc qua lại liên tục giữa CPU và GPU có thể nhanh chóng làm bão hòa CPU, trở thành điểm nghẽn chính trước cả khi GPU bắt đầu hoạt động hết công suất. Điều này thường được gọi là "bị giới hạn bởi CPU" (CPU-bound).
• Thay đổi trạng thái: Giữa các lệnh gọi vẽ, nếu cần các vật liệu, texture hoặc shader khác nhau, GPU phải cấu hình lại trạng thái nội bộ của nó. Những thay đổi trạng thái này không diễn ra tức thời và có thể gây ra thêm sự chậm trễ, ảnh hưởng đến hiệu suất kết xuất tổng thể.
• Trùng lặp bộ nhớ: Nếu không có instancing, nếu bạn có 1000 cây giống hệt nhau, bạn có thể bị cám dỗ để tải 1000 bản sao dữ liệu đỉnh của chúng vào bộ nhớ GPU. Mặc dù các engine hiện đại thông minh hơn thế này, chi phí khái niệm về việc quản lý và gửi các chỉ thị riêng lẻ cho mỗi instance vẫn còn đó.

Hiệu ứng tích lũy của các yếu tố này là việc kết xuất hàng ngàn đối tượng bằng các lệnh gọi vẽ riêng biệt có thể dẫn đến tốc độ khung hình cực kỳ thấp, đặc biệt trên các thiết bị có CPU yếu hơn hoặc băng thông bộ nhớ hạn chế. Đối với các ứng dụng toàn cầu, phục vụ cho một lượng người dùng đa dạng, vấn đề hiệu suất này càng trở nên quan trọng hơn. Instancing hình học giải quyết trực tiếp các thách thức này bằng cách hợp nhất nhiều lệnh gọi vẽ thành một, giảm đáng kể khối lượng công việc của CPU và cho phép GPU hoạt động hiệu quả hơn.

Instancing Hình học WebGL là gì?

Về cơ bản, Instancing Hình học WebGL là một kỹ thuật cho phép GPU vẽ cùng một tập hợp các đỉnh nhiều lần bằng một lệnh gọi vẽ duy nhất, nhưng với dữ liệu duy nhất cho mỗi "instance". Thay vì gửi toàn bộ dữ liệu hình học và dữ liệu biến đổi của nó cho từng đối tượng riêng lẻ, bạn gửi dữ liệu hình học một lần, và sau đó cung cấp một tập hợp dữ liệu nhỏ hơn, riêng biệt (như vị trí, xoay, tỷ lệ, hoặc màu sắc) thay đổi theo mỗi instance.

Hãy nghĩ về nó như thế này:

• Không có Instancing: Hãy tưởng tượng bạn đang nướng 1000 chiếc bánh quy. Đối với mỗi chiếc bánh, bạn cán bột, cắt bằng cùng một khuôn cắt bánh, đặt lên khay, trang trí riêng lẻ, và sau đó cho vào lò. Điều này lặp đi lặp lại và tốn thời gian.
• Với Instancing: Bạn cán một tấm bột lớn một lần. Sau đó, bạn sử dụng cùng một khuôn cắt bánh để cắt ra 1000 chiếc bánh quy đồng thời hoặc liên tiếp nhanh chóng mà không cần phải chuẩn bị lại bột. Mỗi chiếc bánh sau đó có thể được trang trí hơi khác một chút (dữ liệu cho mỗi instance), nhưng hình dạng cơ bản (hình học) được chia sẻ và xử lý một cách hiệu quả.

Trong WebGL, điều này được chuyển thành:

• Dữ liệu đỉnh được chia sẻ: Mô hình 3D (ví dụ: một cái cây, một chiếc xe hơi, một khối nhà) được định nghĩa một lần bằng cách sử dụng các Đối tượng Bộ đệm Đỉnh (Vertex Buffer Objects - VBOs) tiêu chuẩn và có thể là các Đối tượng Bộ đệm Chỉ số (Index Buffer Objects - IBOs). Dữ liệu này được tải lên GPU một lần.
• Dữ liệu cho mỗi Instance: Đối với mỗi bản sao riêng lẻ của mô hình, bạn cung cấp các thuộc tính bổ sung. Các thuộc tính này thường bao gồm một ma trận biến đổi 4x4 (cho vị trí, xoay và tỷ lệ), nhưng cũng có thể là màu sắc, độ lệch texture, hoặc bất kỳ thuộc tính nào khác để phân biệt các instance với nhau. Dữ liệu cho mỗi instance này cũng được tải lên GPU, nhưng quan trọng là nó được cấu hình theo một cách đặc biệt.
• Lệnh gọi vẽ duy nhất: Thay vì gọi gl.drawElements() hoặc gl.drawArrays() hàng ngàn lần, bạn sử dụng các lệnh gọi vẽ instancing chuyên dụng như gl.drawElementsInstanced() hoặc gl.drawArraysInstanced(). Các lệnh này nói với GPU, "Vẽ hình học này N lần, và đối với mỗi instance, hãy sử dụng tập dữ liệu cho mỗi instance tiếp theo."

GPU sau đó xử lý hiệu quả hình học được chia sẻ cho mỗi instance, áp dụng dữ liệu duy nhất cho mỗi instance trong vertex shader. Điều này giảm tải đáng kể công việc từ CPU sang GPU có khả năng xử lý song song cao, vốn phù hợp hơn nhiều cho các tác vụ lặp đi lặp lại như vậy, dẫn đến những cải thiện hiệu suất đáng kể.

WebGL 1 và WebGL 2: Sự phát triển của Instancing

Tính khả dụng và việc triển khai instancing hình học khác nhau giữa WebGL 1.0 và WebGL 2.0. Việc hiểu những khác biệt này là rất quan trọng để phát triển các ứng dụng đồ họa web mạnh mẽ và tương thích rộng rãi.

WebGL 1.0 (với Tiện ích mở rộng: ANGLE_instanced_arrays)

Khi WebGL 1.0 lần đầu tiên được giới thiệu, instancing không phải là một tính năng cốt lõi. Để sử dụng nó, các nhà phát triển phải dựa vào một tiện ích mở rộng của nhà cung cấp: ANGLE_instanced_arrays. Tiện ích mở rộng này cung cấp các lệnh gọi API cần thiết để cho phép kết xuất instanced.

Các khía cạnh chính của instancing trong WebGL 1.0:

• Khám phá Tiện ích mở rộng: Bạn phải truy vấn và kích hoạt tiện ích mở rộng một cách tường minh bằng cách sử dụng gl.getExtension('ANGLE_instanced_arrays').
• Các hàm dành riêng cho Tiện ích mở rộng: Các lệnh gọi vẽ instancing (ví dụ: drawElementsInstancedANGLE) và hàm chia thuộc tính (vertexAttribDivisorANGLE) có tiền tố là ANGLE.
• Khả năng tương thích: Mặc dù được hỗ trợ rộng rãi trên các trình duyệt hiện đại, việc dựa vào một tiện ích mở rộng đôi khi có thể gây ra các biến thể nhỏ hoặc các vấn đề tương thích trên các nền tảng cũ hơn hoặc ít phổ biến hơn.
• Hiệu suất: Vẫn cung cấp những cải thiện hiệu suất đáng kể so với kết xuất không dùng instancing.

WebGL 2.0 (Tính năng cốt lõi)

WebGL 2.0, dựa trên OpenGL ES 3.0, bao gồm instancing như một tính năng cốt lõi. Điều này có nghĩa là không cần phải kích hoạt tiện ích mở rộng nào một cách tường minh, giúp đơn giản hóa quy trình làm việc của nhà phát triển và đảm bảo hành vi nhất quán trên tất cả các môi trường WebGL 2.0 tuân thủ.

Các khía cạnh chính của instancing trong WebGL 2.0:

• Không cần Tiện ích mở rộng: Các hàm instancing (gl.drawElementsInstanced, gl.drawArraysInstanced, gl.vertexAttribDivisor) có sẵn trực tiếp trên context kết xuất WebGL.
• Hỗ trợ được đảm bảo: Nếu một trình duyệt hỗ trợ WebGL 2.0, nó đảm bảo hỗ trợ instancing, loại bỏ nhu cầu kiểm tra trong thời gian chạy.
• Các tính năng của ngôn ngữ Shader: Ngôn ngữ đổ bóng GLSL ES 3.00 của WebGL 2.0 cung cấp hỗ trợ tích hợp cho gl_InstanceID, một biến đầu vào đặc biệt trong vertex shader cung cấp chỉ số của instance hiện tại. Điều này đơn giản hóa logic của shader.
• Khả năng rộng hơn: WebGL 2.0 cung cấp các cải tiến khác về hiệu suất và tính năng (như Transform Feedback, Multiple Render Targets, và các định dạng texture tiên tiến hơn) có thể bổ sung cho instancing trong các cảnh phức tạp.

Khuyến nghị: Đối với các dự án mới và hiệu suất tối đa, rất nên nhắm mục tiêu đến WebGL 2.0 nếu khả năng tương thích trình duyệt rộng rãi không phải là một ràng buộc tuyệt đối (vì WebGL 2.0 có sự hỗ trợ xuất sắc, mặc dù không phải là toàn cầu). Nếu khả năng tương thích rộng hơn với các thiết bị cũ là quan trọng, có thể cần một phương án dự phòng cho WebGL 1.0 với tiện ích mở rộng ANGLE_instanced_arrays, hoặc một cách tiếp cận lai trong đó WebGL 2.0 được ưu tiên, và đường dẫn WebGL 1.0 được sử dụng làm phương án dự phòng.

Tìm hiểu cơ chế hoạt động của Instancing

Để triển khai instancing một cách hiệu quả, người ta phải nắm bắt cách dữ liệu hình học dùng chung và dữ liệu cho mỗi instance được GPU xử lý.

Dữ liệu hình học dùng chung

Định nghĩa hình học của đối tượng của bạn (ví dụ: một mô hình 3D của một tảng đá, một nhân vật, một phương tiện) được lưu trữ trong các đối tượng bộ đệm tiêu chuẩn:

• Đối tượng Bộ đệm Đỉnh (VBOs): Chúng chứa dữ liệu đỉnh thô cho mô hình. Điều này bao gồm các thuộc tính như vị trí (a_position), vector pháp tuyến (a_normal), tọa độ texture (a_texCoord), và có thể là các vector tiếp tuyến/bitangent. Dữ liệu này được tải lên GPU một lần.
• Đối tượng Bộ đệm Chỉ số (IBOs) / Đối tượng Bộ đệm Phần tử (EBOs): Nếu hình học của bạn sử dụng vẽ theo chỉ số (rất được khuyến khích vì hiệu quả, vì nó tránh trùng lặp dữ liệu đỉnh cho các đỉnh được chia sẻ), các chỉ số xác định cách các đỉnh tạo thành tam giác được lưu trữ trong một IBO. Điều này cũng được tải lên một lần.

Khi sử dụng instancing, GPU lặp qua các đỉnh của hình học được chia sẻ cho mỗi instance, áp dụng các phép biến đổi và dữ liệu khác dành riêng cho instance đó.

Dữ liệu cho mỗi Instance: Chìa khóa để tạo sự khác biệt

Đây là điểm mà instancing khác biệt so với kết xuất truyền thống. Thay vì gửi tất cả các thuộc tính đối tượng với mỗi lệnh gọi vẽ, chúng ta tạo một bộ đệm (hoặc nhiều bộ đệm) riêng để chứa dữ liệu thay đổi cho mỗi instance. Dữ liệu này được gọi là thuộc tính instanced.

• Nó là gì: Các thuộc tính cho mỗi instance phổ biến bao gồm:
  • Ma trận Mô hình: Một ma trận 4x4 kết hợp vị trí, xoay, và tỷ lệ cho mỗi instance. Đây là thuộc tính cho mỗi instance phổ biến và mạnh mẽ nhất.
  • Màu sắc: Một màu sắc duy nhất cho mỗi instance.
  • Độ lệch/Chỉ số Texture: Nếu sử dụng một atlas texture hoặc mảng texture, điều này có thể chỉ định phần nào của bản đồ texture sẽ được sử dụng cho một instance cụ thể.
  • Dữ liệu tùy chỉnh: Bất kỳ dữ liệu số nào khác giúp phân biệt các instance, chẳng hạn như trạng thái vật lý, giá trị máu, hoặc giai đoạn hoạt ảnh.
• Cách truyền dữ liệu: Mảng Instanced: Dữ liệu cho mỗi instance được lưu trữ trong một hoặc nhiều VBO, giống như các thuộc tính đỉnh thông thường. Sự khác biệt quan trọng là cách các thuộc tính này được cấu hình bằng gl.vertexAttribDivisor().
• gl.vertexAttribDivisor(attributeLocation, divisor): Hàm này là nền tảng của instancing. Nó cho WebGL biết một thuộc tính nên được cập nhật thường xuyên như thế nào:
  • Nếu divisor là 0 (mặc định cho các thuộc tính thông thường), giá trị của thuộc tính thay đổi cho mỗi đỉnh.
  • Nếu divisor là 1, giá trị của thuộc tính thay đổi cho mỗi instance. Điều này có nghĩa là đối với tất cả các đỉnh trong một instance duy nhất, thuộc tính sẽ sử dụng cùng một giá trị từ bộ đệm, và sau đó cho instance tiếp theo, nó sẽ chuyển sang giá trị tiếp theo trong bộ đệm.
  • Các giá trị khác cho divisor (ví dụ: 2, 3) là có thể nhưng ít phổ biến hơn, cho biết thuộc tính thay đổi sau mỗi N instance.
  Đối với một ma trận mô hình 4x4, yêu cầu 4 vị trí thuộc tính (một cho mỗi cột vec4), mỗi trong số 4 thuộc tính này sẽ có divisor được đặt thành 1.
• gl_InstanceID trong Shaders: Trong vertex shader (đặc biệt là trong GLSL ES 3.00 của WebGL 2.0), một biến đầu vào tích hợp có tên là gl_InstanceID cung cấp chỉ số của instance hiện tại đang được kết xuất. Điều này cực kỳ hữu ích để truy cập dữ liệu cho mỗi instance trực tiếp từ một mảng hoặc để tính toán các giá trị duy nhất dựa trên chỉ số của instance. Đối với WebGL 1.0, bạn thường sẽ truyền gl_InstanceID như một varying từ vertex shader đến fragment shader, hoặc phổ biến hơn, chỉ cần dựa trực tiếp vào các thuộc tính instance mà không cần một ID rõ ràng nếu tất cả dữ liệu cần thiết đã có trong các thuộc tính.

Bằng cách sử dụng các cơ chế này, GPU có thể tìm nạp hình học một cách hiệu quả một lần, và đối với mỗi instance, kết hợp nó với các thuộc tính duy nhất của nó, biến đổi và đổ bóng cho nó tương ứng. Khả năng xử lý song song này là điều làm cho instancing trở nên rất mạnh mẽ đối với các cảnh có độ phức tạp cao.

Triển khai Instancing Hình học WebGL (Ví dụ mã nguồn)

Hãy cùng xem qua một ví dụ triển khai đơn giản của instancing hình học WebGL. Chúng ta sẽ tập trung vào việc kết xuất nhiều instance của một hình dạng đơn giản (như một khối lập phương) với các vị trí và màu sắc khác nhau. Ví dụ này giả định bạn đã có kiến thức cơ bản về thiết lập context WebGL và biên dịch shader.

1. Context WebGL cơ bản và Chương trình Shader

Đầu tiên, thiết lập context WebGL 2.0 và một chương trình shader cơ bản.

Vertex Shader (vertexShaderSource):

#version 300 es layout(location = 0) in vec4 a_position; layout(location = 1) in vec4 a_color; layout(location = 2) in mat4 a_modelMatrix; uniform mat4 u_viewProjectionMatrix; out vec4 v_color; void main() { v_color = a_color; gl_Position = u_viewProjectionMatrix * a_modelMatrix * a_position; }

Fragment Shader (fragmentShaderSource):

#version 300 es precision highp float; in vec4 v_color; out vec4 outColor; void main() { outColor = v_color; }

Lưu ý thuộc tính a_modelMatrix, là một mat4. Đây sẽ là thuộc tính cho mỗi instance của chúng ta. Vì một mat4 chiếm bốn vị trí vec4, nó sẽ tiêu thụ các vị trí 2, 3, 4, và 5 trong danh sách thuộc tính. `a_color` ở đây cũng là cho mỗi instance.

2. Tạo dữ liệu hình học dùng chung (ví dụ: một hình lập phương)

Xác định vị trí các đỉnh cho một khối lập phương đơn giản. Để đơn giản, chúng ta sẽ sử dụng một mảng trực tiếp, nhưng trong một ứng dụng thực tế, bạn sẽ sử dụng vẽ theo chỉ số với một IBO.

const positions = [ // Mặt trước -0.5, -0.5, 0.5, 0.5, -0.5, 0.5, 0.5, 0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, 0.5, -0.5, 0.5, 0.5, // Mặt sau -0.5, -0.5, -0.5, -0.5, 0.5, -0.5, 0.5, 0.5, -0.5, -0.5, -0.5, -0.5, 0.5, 0.5, -0.5, 0.5, -0.5, -0.5, // Mặt trên -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, 0.5, 0.5, -0.5, 0.5, -0.5, 0.5, 0.5, 0.5, 0.5, 0.5, -0.5, // Mặt dưới -0.5, -0.5, -0.5, 0.5, -0.5, -0.5, 0.5, -0.5, 0.5, -0.5, -0.5, -0.5, 0.5, -0.5, 0.5, -0.5, -0.5, 0.5, // Mặt phải 0.5, -0.5, -0.5, 0.5, 0.5, -0.5, 0.5, 0.5, 0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, 0.5, -0.5, 0.5, // Mặt trái -0.5, -0.5, -0.5, -0.5, -0.5, 0.5, -0.5, 0.5, 0.5, -0.5, -0.5, -0.5, -0.5, 0.5, 0.5, -0.5, 0.5, -0.5 ]; const positionBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW); // Thiết lập thuộc tính đỉnh cho vị trí (location 0) gl.enableVertexAttribArray(0); gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0); gl.vertexAttribDivisor(0, 0); // Divisor 0: thuộc tính thay đổi mỗi đỉnh

3. Tạo dữ liệu cho mỗi Instance (Ma trận và Màu sắc)

Tạo các ma trận biến đổi và màu sắc cho mỗi instance. Ví dụ, chúng ta sẽ tạo 1000 instance được sắp xếp trong một lưới.

const numInstances = 1000; const instanceMatrices = new Float32Array(numInstances * 16); // 16 float mỗi mat4 const instanceColors = new Float32Array(numInstances * 4); // 4 float mỗi vec4 (RGBA) // Điền dữ liệu instance for (let i = 0; i < numInstances; ++i) { const matrixOffset = i * 16; const colorOffset = i * 4; const x = (i % 30) * 1.5 - 22.5; // Ví dụ bố cục lưới const y = Math.floor(i / 30) * 1.5 - 22.5; const z = (Math.sin(i * 0.1) * 5); const rotation = i * 0.05; // Ví dụ phép xoay const scale = 0.5 + Math.sin(i * 0.03) * 0.2; // Ví dụ tỷ lệ // Tạo ma trận mô hình cho mỗi instance (sử dụng thư viện toán học như gl-matrix) const m = mat4.create(); mat4.translate(m, m, [x, y, z]); mat4.rotateY(m, m, rotation); mat4.scale(m, m, [scale, scale, scale]); // Sao chép ma trận vào mảng instanceMatrices của chúng ta instanceMatrices.set(m, matrixOffset); // Gán một màu ngẫu nhiên cho mỗi instance instanceColors[colorOffset + 0] = Math.random(); instanceColors[colorOffset + 1] = Math.random(); instanceColors[colorOffset + 2] = Math.random(); instanceColors[colorOffset + 3] = 1.0; // Alpha } // Tạo và điền dữ liệu vào bộ đệm instance const instanceMatrixBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, instanceMatrixBuffer); gl.bufferData(gl.ARRAY_BUFFER, instanceMatrices, gl.DYNAMIC_DRAW); // Sử dụng DYNAMIC_DRAW nếu dữ liệu thay đổi const instanceColorBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, instanceColorBuffer); gl.bufferData(gl.ARRAY_BUFFER, instanceColors, gl.DYNAMIC_DRAW);

4. Liên kết VBO của mỗi Instance với các thuộc tính và thiết lập Divisor

Đây là bước quan trọng nhất cho instancing. Chúng ta nói cho WebGL biết rằng các thuộc tính này thay đổi một lần cho mỗi instance, không phải một lần cho mỗi đỉnh.

// Thiết lập thuộc tính màu của instance (location 1) gl.enableVertexAttribArray(1); gl.bindBuffer(gl.ARRAY_BUFFER, instanceColorBuffer); gl.vertexAttribPointer(1, 4, gl.FLOAT, false, 0, 0); gl.vertexAttribDivisor(1, 1); // Divisor 1: thuộc tính thay đổi mỗi instance // Thiết lập thuộc tính ma trận mô hình của instance (locations 2, 3, 4, 5) // Một mat4 là 4 vec4, vì vậy chúng ta cần 4 vị trí thuộc tính. const matrixLocation = 2; // Vị trí bắt đầu cho a_modelMatrix gl.bindBuffer(gl.ARRAY_BUFFER, instanceMatrixBuffer); for (let i = 0; i < 4; ++i) { gl.enableVertexAttribArray(matrixLocation + i); gl.vertexAttribPointer( matrixLocation + i, // location 4, // size (vec4) gl.FLOAT, // type false, // normalize 16 * 4, // stride (sizeof(mat4) = 16 float * 4 byte/float) i * 4 * 4 // offset (độ lệch cho mỗi cột vec4) ); gl.vertexAttribDivisor(matrixLocation + i, 1); // Divisor 1: thuộc tính thay đổi mỗi instance }

5. Lệnh gọi vẽ Instanced

Cuối cùng, kết xuất tất cả các instance bằng một lệnh gọi vẽ duy nhất. Ở đây, chúng ta đang vẽ 36 đỉnh (6 mặt * 2 tam giác/mặt * 3 đỉnh/tam giác) cho mỗi khối lập phương, numInstances lần.

function render() { // ... (cập nhật viewProjectionMatrix và tải lên uniform) gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); // Sử dụng chương trình shader gl.useProgram(program); // Liên kết bộ đệm hình học (vị trí) - đã được liên kết để thiết lập thuộc tính gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); // Đối với các thuộc tính cho mỗi instance, chúng đã được liên kết và thiết lập để chia // Tuy nhiên, nếu dữ liệu instance cập nhật, bạn sẽ tải lại dữ liệu vào bộ đệm ở đây // gl.bindBuffer(gl.ARRAY_BUFFER, instanceMatrixBuffer); // gl.bufferData(gl.ARRAY_BUFFER, instanceMatrices, gl.DYNAMIC_DRAW); gl.drawArraysInstanced( gl.TRIANGLES, // mode 0, // đỉnh đầu tiên 36, // count (số đỉnh mỗi instance, một khối lập phương có 36) numInstances // instanceCount ); requestAnimationFrame(render); } render(); // Bắt đầu vòng lặp kết xuất

Cấu trúc này thể hiện các nguyên tắc cốt lõi. positionBuffer dùng chung được thiết lập với divisor là 0, có nghĩa là các giá trị của nó được sử dụng tuần tự cho mỗi đỉnh. instanceColorBuffer và instanceMatrixBuffer được thiết lập với divisor là 1, có nghĩa là các giá trị của chúng được lấy một lần cho mỗi instance. Lệnh gọi gl.drawArraysInstanced sau đó kết xuất hiệu quả tất cả các khối lập phương trong một lần.

Các kỹ thuật Instancing nâng cao và những điều cần lưu ý

Mặc dù việc triển khai cơ bản mang lại lợi ích hiệu suất to lớn, các kỹ thuật nâng cao có thể tối ưu hóa và tăng cường hơn nữa việc kết xuất instanced.

Loại bỏ (Culling) các Instance

Kết xuất hàng ngàn hoặc hàng triệu đối tượng, ngay cả với instancing, vẫn có thể gây tốn kém nếu một tỷ lệ lớn trong số chúng nằm ngoài tầm nhìn của máy ảnh (frustum) hoặc bị che khuất bởi các đối tượng khác. Việc triển khai culling có thể giảm đáng kể khối lượng công việc của GPU.

• Frustum Culling: Kỹ thuật này bao gồm việc kiểm tra xem khối lượng bao (bounding volume) của mỗi instance (ví dụ: hộp bao hoặc hình cầu bao) có giao với khối nhìn (view frustum) của máy ảnh hay không. Nếu một instance hoàn toàn nằm ngoài frustum, dữ liệu của nó có thể được loại trừ khỏi bộ đệm dữ liệu instance trước khi kết xuất. Điều này làm giảm instanceCount trong lệnh gọi vẽ.
  • Triển khai: Thường được thực hiện trên CPU. Trước khi cập nhật bộ đệm dữ liệu instance, lặp qua tất cả các instance tiềm năng, thực hiện kiểm tra frustum, và chỉ thêm dữ liệu cho các instance có thể nhìn thấy vào bộ đệm.
  • Đánh đổi hiệu suất: Mặc dù nó tiết kiệm công việc cho GPU, logic culling trên CPU tự nó có thể trở thành một điểm nghẽn đối với số lượng instance cực lớn. Với hàng triệu instance, chi phí CPU này có thể làm mất đi một số lợi ích của instancing.
• Occlusion Culling: Kỹ thuật này phức tạp hơn, nhằm mục đích tránh kết xuất các instance bị che khuất sau các đối tượng khác. Điều này thường được thực hiện trên GPU bằng các kỹ thuật như Z-buffering phân cấp hoặc bằng cách kết xuất các hộp bao để truy vấn GPU về khả năng hiển thị. Điều này nằm ngoài phạm vi của một hướng dẫn instancing cơ bản nhưng là một tối ưu hóa mạnh mẽ cho các cảnh dày đặc.

Mức độ chi tiết (LOD) cho các Instance

Đối với các đối tượng ở xa, các mô hình có độ phân giải cao thường không cần thiết và lãng phí. Hệ thống LOD tự động chuyển đổi giữa các phiên bản khác nhau của một mô hình (thay đổi về số lượng đa giác và chi tiết texture) dựa trên khoảng cách của một instance so với máy ảnh.

• Triển khai: Điều này có thể đạt được bằng cách có nhiều bộ bộ đệm hình học dùng chung (ví dụ: cube_high_lod_positions, cube_medium_lod_positions, cube_low_lod_positions).
• Chiến lược: Nhóm các instance theo LOD yêu cầu của chúng. Sau đó, thực hiện các lệnh gọi vẽ instanced riêng biệt cho mỗi nhóm LOD, liên kết bộ đệm hình học phù hợp cho mỗi nhóm. Ví dụ, tất cả các instance trong phạm vi 50 đơn vị sử dụng LOD 0, 50-200 đơn vị sử dụng LOD 1, và ngoài 200 đơn vị sử dụng LOD 2.
• Lợi ích: Duy trì chất lượng hình ảnh cho các đối tượng ở gần trong khi giảm độ phức tạp hình học của các đối tượng ở xa, tăng cường đáng kể hiệu suất GPU.

Instancing động: Cập nhật dữ liệu Instance hiệu quả

Nhiều ứng dụng yêu cầu các instance phải di chuyển, thay đổi màu sắc, hoặc hoạt ảnh theo thời gian. Việc cập nhật bộ đệm dữ liệu instance thường xuyên là rất quan trọng.

• Sử dụng bộ đệm: Khi tạo các bộ đệm dữ liệu instance, hãy sử dụng gl.DYNAMIC_DRAW hoặc gl.STREAM_DRAW thay vì gl.STATIC_DRAW. Điều này gợi ý cho trình điều khiển GPU rằng dữ liệu sẽ được cập nhật thường xuyên.
• Tần suất cập nhật: Trong vòng lặp kết xuất của bạn, sửa đổi các mảng instanceMatrices hoặc instanceColors trên CPU và sau đó tải lại toàn bộ mảng (hoặc một phạm vi con nếu chỉ có một vài instance thay đổi) lên GPU bằng gl.bufferData() hoặc gl.bufferSubData().
• Lưu ý về hiệu suất: Mặc dù việc cập nhật dữ liệu instance là hiệu quả, việc tải lên các bộ đệm rất lớn lặp đi lặp lại vẫn có thể là một điểm nghẽn. Tối ưu hóa bằng cách chỉ cập nhật các phần đã thay đổi hoặc sử dụng các kỹ thuật như nhiều đối tượng bộ đệm (ping-ponging) để tránh làm GPU bị đình trệ.

So sánh Batching và Instancing

Điều quan trọng là phải phân biệt giữa batching và instancing, vì cả hai đều nhằm mục đích giảm số lượng lệnh gọi vẽ nhưng phù hợp với các kịch bản khác nhau.

• Batching: Kết hợp dữ liệu đỉnh của nhiều đối tượng riêng biệt (hoặc tương tự nhưng không giống hệt nhau) thành một bộ đệm đỉnh lớn hơn duy nhất. Điều này cho phép chúng được vẽ bằng một lệnh gọi vẽ. Hữu ích cho các đối tượng chia sẻ vật liệu nhưng có hình học khác nhau hoặc các phép biến đổi duy nhất không dễ dàng biểu diễn dưới dạng thuộc tính cho mỗi instance.
  • Ví dụ: Hợp nhất nhiều bộ phận tòa nhà độc đáo thành một lưới để kết xuất một tòa nhà phức tạp bằng một lệnh gọi vẽ duy nhất.
• Instancing: Vẽ cùng một hình học nhiều lần với các thuộc tính cho mỗi instance khác nhau. Lý tưởng cho các hình học thực sự giống hệt nhau mà chỉ có một vài thuộc tính thay đổi cho mỗi bản sao.
  • Ví dụ: Kết xuất hàng ngàn cây giống hệt nhau, mỗi cây có vị trí, xoay và tỷ lệ khác nhau.
• Phương pháp kết hợp: Thông thường, sự kết hợp giữa batching và instancing mang lại kết quả tốt nhất. Ví dụ, batching các bộ phận khác nhau của một cây phức tạp thành một lưới duy nhất, và sau đó instancing toàn bộ cây đã được batch đó hàng ngàn lần.

Các chỉ số hiệu suất

Để thực sự hiểu tác động của instancing, hãy theo dõi các chỉ số hiệu suất chính:

• Lệnh gọi vẽ (Draw Calls): Chỉ số trực tiếp nhất. Instancing sẽ giảm đáng kể con số này.
• Tốc độ khung hình (FPS): FPS cao hơn cho thấy hiệu suất tổng thể tốt hơn.
• Sử dụng CPU: Instancing thường làm giảm các đột biến sử dụng CPU liên quan đến việc kết xuất.
• Sử dụng GPU: Mặc dù instancing giảm tải công việc cho GPU, nó cũng có nghĩa là GPU đang làm nhiều việc hơn cho mỗi lệnh gọi vẽ. Theo dõi thời gian khung hình của GPU để đảm bảo bạn không bị giới hạn bởi GPU.

Lợi ích của Instancing Hình học WebGL

Việc áp dụng instancing hình học WebGL mang lại vô số lợi thế cho các ứng dụng 3D dựa trên web, tác động đến mọi thứ từ hiệu quả phát triển đến trải nghiệm người dùng cuối.

• Giảm đáng kể số lượng lệnh gọi vẽ: Đây là lợi ích chính và tức thì nhất. Bằng cách thay thế hàng trăm hoặc hàng ngàn lệnh gọi vẽ riêng lẻ bằng một lệnh gọi instanced duy nhất, chi phí trên CPU được cắt giảm đáng kể, dẫn đến một quy trình kết xuất mượt mà hơn nhiều.
• Giảm chi phí CPU: CPU dành ít thời gian hơn để chuẩn bị và gửi các lệnh kết xuất, giải phóng tài nguyên cho các tác vụ khác như mô phỏng vật lý, logic trò chơi, hoặc cập nhật giao diện người dùng. Điều này rất quan trọng để duy trì tính tương tác trong các cảnh phức tạp.
• Cải thiện việc sử dụng GPU: Các GPU hiện đại được thiết kế để xử lý song song cao. Instancing khai thác trực tiếp thế mạnh này, cho phép GPU xử lý nhiều instance của cùng một hình học một cách đồng thời và hiệu quả, dẫn đến thời gian kết xuất nhanh hơn.
• Cho phép tạo cảnh có độ phức tạp lớn: Instancing trao quyền cho các nhà phát triển tạo ra các cảnh với số lượng đối tượng nhiều hơn một bậc so với khả năng trước đây. Hãy tưởng tượng một thành phố nhộn nhịp với hàng ngàn xe hơi và người đi bộ, một khu rừng rậm rạp với hàng triệu chiếc lá, hoặc các trực quan hóa khoa học biểu diễn các bộ dữ liệu khổng lồ – tất cả đều được kết xuất trong thời gian thực trong một trình duyệt web.
• Độ trung thực hình ảnh và tính chân thực cao hơn: Bằng cách cho phép kết xuất nhiều đối tượng hơn, instancing góp phần trực tiếp tạo ra các môi trường 3D phong phú, nhập vai và đáng tin cậy hơn. Điều này trực tiếp chuyển thành các trải nghiệm hấp dẫn hơn cho người dùng trên toàn thế giới, bất kể sức mạnh xử lý của phần cứng của họ.
• Giảm dung lượng bộ nhớ: Mặc dù dữ liệu cho mỗi instance được lưu trữ, dữ liệu hình học cốt lõi chỉ được tải một lần, làm giảm tổng mức tiêu thụ bộ nhớ trên GPU, điều này có thể rất quan trọng đối với các thiết bị có bộ nhớ hạn chế.
• Đơn giản hóa việc quản lý tài sản: Thay vì quản lý các tài sản duy nhất cho mỗi đối tượng tương tự, bạn có thể tập trung vào một mô hình cơ sở chất lượng cao duy nhất và sau đó sử dụng instancing để lấp đầy cảnh, hợp lý hóa quy trình tạo nội dung.

Những lợi ích này cùng nhau góp phần tạo ra các ứng dụng web nhanh hơn, mạnh mẽ hơn và có hình ảnh tuyệt đẹp, có thể chạy mượt mà trên nhiều loại thiết bị khách hàng khác nhau, nâng cao khả năng tiếp cận và sự hài lòng của người dùng trên toàn cầu.

Những cạm bẫy thường gặp và cách khắc phục sự cố

Mặc dù mạnh mẽ, instancing có thể gây ra những thách thức mới. Dưới đây là một số cạm bẫy phổ biến và mẹo để khắc phục sự cố:

• Thiết lập gl.vertexAttribDivisor() không chính xác: Đây là nguồn lỗi thường gặp nhất. Nếu một thuộc tính dành cho instancing không được đặt với divisor là 1, nó sẽ hoặc sử dụng cùng một giá trị cho tất cả các instance (nếu nó là một uniform toàn cục) hoặc lặp qua mỗi đỉnh, dẫn đến các hiện vật hình ảnh hoặc kết xuất không chính xác. Kiểm tra kỹ rằng tất cả các thuộc tính cho mỗi instance đều có divisor được đặt thành 1.
• Không khớp vị trí thuộc tính cho ma trận: Một mat4 yêu cầu bốn vị trí thuộc tính liên tiếp. Đảm bảo layout(location = X) của shader cho ma trận tương ứng với cách bạn đang thiết lập các lệnh gọi gl.vertexAttribPointer cho matrixLocation và matrixLocation + 1, +2, +3.
• Vấn đề đồng bộ hóa dữ liệu (Instancing động): Nếu các instance của bạn không cập nhật chính xác hoặc dường như bị 'nhảy', hãy đảm bảo bạn đang tải lại bộ đệm dữ liệu instance lên GPU (gl.bufferData hoặc gl.bufferSubData) bất cứ khi nào dữ liệu phía CPU thay đổi. Đồng thời, đảm bảo bộ đệm được liên kết trước khi cập nhật.
• Lỗi biên dịch Shader liên quan đến gl_InstanceID: Nếu bạn đang sử dụng gl_InstanceID, hãy đảm bảo shader của bạn là #version 300 es (cho WebGL 2.0) hoặc bạn đã kích hoạt đúng tiện ích mở rộng ANGLE_instanced_arrays và có thể đã truyền ID instance thủ công như một thuộc tính trong WebGL 1.0.
• Hiệu suất không cải thiện như mong đợi: Nếu tốc độ khung hình của bạn không tăng đáng kể, có thể instancing không giải quyết được điểm nghẽn chính của bạn. Các công cụ phân tích (như tab hiệu suất của công cụ dành cho nhà phát triển của trình duyệt hoặc các công cụ phân tích GPU chuyên dụng) có thể giúp xác định xem ứng dụng của bạn có còn bị giới hạn bởi CPU hay không (ví dụ: do tính toán vật lý quá mức, logic JavaScript, hoặc culling phức tạp) hoặc liệu một điểm nghẽn GPU khác (ví dụ: shader phức tạp, quá nhiều đa giác, băng thông texture) đang diễn ra.
• Bộ đệm dữ liệu instance lớn: Mặc dù instancing hiệu quả, các bộ đệm dữ liệu instance cực lớn (ví dụ: hàng triệu instance với dữ liệu cho mỗi instance phức tạp) vẫn có thể tiêu thụ bộ nhớ và băng thông GPU đáng kể, có khả năng trở thành một điểm nghẽn trong quá trình tải lên hoặc tìm nạp dữ liệu. Hãy xem xét culling, LOD, hoặc tối ưu hóa kích thước dữ liệu cho mỗi instance của bạn.
• Thứ tự kết xuất và độ trong suốt: Đối với các instance trong suốt, thứ tự kết xuất có thể trở nên phức tạp. Vì tất cả các instance được vẽ trong một lệnh gọi vẽ duy nhất, việc kết xuất từ sau ra trước thông thường cho độ trong suốt không thể thực hiện trực tiếp cho mỗi instance. Các giải pháp thường bao gồm việc sắp xếp các instance trên CPU và sau đó tải lại dữ liệu instance đã được sắp xếp, hoặc sử dụng các kỹ thuật trong suốt không phụ thuộc vào thứ tự.

Việc gỡ lỗi cẩn thận và chú ý đến chi tiết, đặc biệt là liên quan đến cấu hình thuộc tính, là chìa khóa để triển khai instancing thành công.

Ứng dụng thực tế và Tác động toàn cầu

Các ứng dụng thực tế của instancing hình học WebGL rất rộng lớn và không ngừng mở rộng, thúc đẩy sự đổi mới trong nhiều lĩnh vực và làm phong phú thêm trải nghiệm kỹ thuật số cho người dùng trên toàn thế giới.

• Phát triển trò chơi: Đây có lẽ là ứng dụng nổi bật nhất. Instancing là không thể thiếu để kết xuất:
  • Môi trường rộng lớn: Những khu rừng với hàng ngàn cây cối và bụi rậm, những thành phố rộng lớn với vô số tòa nhà, hoặc những cảnh quan thế giới mở với các thành tạo đá đa dạng.
  • Đám đông và quân đội: Lấp đầy các cảnh với nhiều nhân vật, mỗi nhân vật có thể có những biến thể nhỏ về vị trí, hướng, và màu sắc, mang lại sự sống cho thế giới ảo.
  • Hệ thống hạt: Hàng triệu hạt cho khói, lửa, mưa, hoặc các hiệu ứng ma thuật, tất cả đều được kết xuất một cách hiệu quả.
  Khả năng này cho phép các trò chơi dựa trên web cung cấp đồ họa và chi tiết chất lượng console, thu hút một lượng người chơi toàn cầu trên các thiết bị ưa thích của họ.
• Trực quan hóa dữ liệu: Để biểu diễn các bộ dữ liệu lớn, instancing cung cấp một công cụ mạnh mẽ:
  • Biểu đồ phân tán: Trực quan hóa hàng triệu điểm dữ liệu (ví dụ: dưới dạng các quả cầu nhỏ hoặc khối lập phương), trong đó vị trí, màu sắc và kích thước của mỗi điểm có thể đại diện cho các chiều dữ liệu khác nhau.
  • Cấu trúc phân tử: Kết xuất các phân tử phức tạp với hàng trăm hoặc hàng ngàn nguyên tử và liên kết, mỗi cái là một instance của một quả cầu hoặc hình trụ.
  • Dữ liệu không gian địa lý: Hiển thị các thành phố, dân số, hoặc dữ liệu môi trường trên các vùng địa lý rộng lớn, trong đó mỗi điểm dữ liệu là một điểm đánh dấu trực quan được instanced.
  Những trực quan hóa này giúp các nhà nghiên cứu, nhà phân tích và người ra quyết định trên toàn cầu giải thích thông tin phức tạp một cách trực quan hơn.
• Trực quan hóa kiến trúc và kỹ thuật:
  • Các cấu trúc lớn: Kết xuất hiệu quả các yếu tố cấu trúc lặp đi lặp lại như dầm, cột, cửa sổ, hoặc các mẫu mặt tiền phức tạp trong các tòa nhà lớn hoặc nhà máy công nghiệp.
  • Quy hoạch đô thị: Lấp đầy các mô hình kiến trúc với cây, cột đèn, và phương tiện giữ chỗ để tạo cảm giác về quy mô và môi trường.
  Điều này cho phép các kiến trúc sư và kỹ sư trên toàn thế giới tạo và chia sẻ các mô hình 3D tương tác, chi tiết cao về thiết kế của họ mà không làm giảm hiệu suất.
• Công cụ cấu hình sản phẩm tương tác: Đối với các ngành công nghiệp như ô tô, nội thất, hoặc thời trang, nơi khách hàng tùy chỉnh sản phẩm trong không gian 3D:
  • Các biến thể thành phần: Hiển thị nhiều thành phần giống hệt nhau (ví dụ: bu lông, đinh tán, các mẫu lặp đi lặp lại) trên một sản phẩm.
  • Mô phỏng sản xuất hàng loạt: Trực quan hóa một sản phẩm có thể trông như thế nào khi được sản xuất với số lượng lớn.
  Điều này nâng cao trải nghiệm mua sắm trực tuyến trên toàn cầu, cho phép khách hàng khám phá và cá nhân hóa sản phẩm với độ trung thực cao.
• Mô phỏng và Tính toán khoa học:
  • Mô hình dựa trên tác nhân: Mô phỏng hành vi của một số lượng lớn các tác nhân riêng lẻ (ví dụ: đàn chim bay, luồng giao thông, động lực đám đông) trong đó mỗi tác nhân là một biểu diễn trực quan được instanced.
  • Động lực học chất lỏng: Trực quan hóa các mô phỏng chất lỏng dựa trên hạt.
  Những ứng dụng này trao quyền cho các nhà khoa học và nhà nghiên cứu trên toàn cầu để trực quan hóa các hiện tượng phức tạp và chia sẻ kết quả của họ một cách hiệu quả.

Trong mỗi lĩnh vực này, instancing hình học WebGL loại bỏ một rào cản đáng kể để tạo ra các trải nghiệm web phong phú, tương tác và hiệu suất cao. Bằng cách làm cho việc kết xuất 3D tiên tiến trở nên dễ tiếp cận và hiệu quả trên nhiều loại phần cứng khác nhau, nó dân chủ hóa các công cụ trực quan hóa mạnh mẽ và thúc đẩy sự đổi mới trên quy mô toàn cầu.

Kết luận

Instancing hình học WebGL là một kỹ thuật nền tảng cho việc kết xuất 3D hiệu quả trên web. Nó giải quyết trực tiếp vấn đề lâu đời về việc kết xuất nhiều đối tượng trùng lặp với hiệu suất tối ưu, biến những gì từng là một điểm nghẽn thành một khả năng mạnh mẽ. Bằng cách tận dụng sức mạnh xử lý song song của GPU và giảm thiểu giao tiếp CPU-GPU, instancing trao quyền cho các nhà phát triển tạo ra các cảnh vô cùng chi tiết, rộng lớn và năng động, chạy mượt mà trên một loạt các thiết bị, từ máy tính để bàn đến điện thoại di động, phục vụ cho một khán giả thực sự toàn cầu.

Từ việc lấp đầy các thế giới trò chơi rộng lớn và trực quan hóa các bộ dữ liệu khổng lồ đến việc thiết kế các mô hình kiến trúc phức tạp và cho phép các công cụ cấu hình sản phẩm phong phú, các ứng dụng của instancing hình học vừa đa dạng vừa có tác động. Việc nắm bắt kỹ thuật này không chỉ đơn thuần là một sự tối ưu hóa; nó là một yếu tố thúc đẩy cho một thế hệ trải nghiệm web nhập vai và hiệu suất cao mới.

Dù bạn đang phát triển cho giải trí, giáo dục, khoa học hay thương mại, việc thành thạo instancing hình học WebGL sẽ là một tài sản vô giá trong bộ công cụ của bạn. Chúng tôi khuyến khích bạn thử nghiệm với các khái niệm và ví dụ mã nguồn đã được thảo luận, tích hợp chúng vào các dự án của riêng bạn. Hành trình vào đồ họa web nâng cao rất đáng giá, và với các kỹ thuật như instancing, tiềm năng cho những gì có thể đạt được trực tiếp trong trình duyệt tiếp tục mở rộng, đẩy lùi các giới hạn của nội dung kỹ thuật số tương tác cho tất cả mọi người, ở mọi nơi.