Trình xem 3D: 4 bước

2024 Tác giả: John Day | [email protected]. Sửa đổi lần cuối: 2024-01-30 13:35

Xin chào! Để thỏa mãn sở thích lập trình của tôi và hy vọng có thể giúp bạn thỏa mãn, tôi muốn giới thiệu cho bạn một Trình xem 3D mà tôi đã viết mã bằng javascript. Nếu bạn muốn nâng cao hiểu biết của mình về các trò chơi 3D hoặc thậm chí tạo trò chơi 3D của riêng mình, thì trình xem 3D nguyên mẫu này hoàn toàn phù hợp với bạn.

Bước 1: Lý thuyết

Để hiểu lý thuyết về trình xem 3D này, bạn có thể chỉ cần xem xét cách bạn xem môi trường xung quanh mình (chỉ có một nguồn ánh sáng đáng kể). Thông báo rằng:

1. Những vật thể ở xa bạn sẽ chiếm một phần nhỏ hơn trong tầm nhìn của bạn.
2. Các vật ở xa nguồn sáng có màu tối hơn.
3. Khi các bề mặt trở nên song song hơn (ít vuông góc hơn) với nguồn sáng, chúng có màu tối hơn.

Tôi quyết định đại diện cho một trường tầm nhìn với một loạt các đường xuất phát từ một điểm duy nhất (tương tự như nhãn cầu). Giống như một quả bóng nhọn, các đường nét cần phải cách đều nhau để đảm bảo rằng mỗi phần của trường tầm nhìn đều được thể hiện như nhau. Trong hình trên, hãy chú ý cách các đường từ quả bóng nhọn trở nên cách xa nhau hơn khi chúng di chuyển ra xa tâm của quả bóng. Điều này giúp hình dung việc thực hiện quan sát 1 của chương trình vì mật độ các đường giảm khi các đối tượng di chuyển ra xa điểm trung tâm hơn.

Các đường là đơn vị cơ bản của tầm nhìn trong chương trình và chúng được ánh xạ đến một pixel trên màn hình. Khi một đường thẳng cắt một đối tượng, pixel tương ứng của nó được tô màu dựa trên khoảng cách từ nguồn sáng và góc của nó so với nguồn sáng.

Bước 2: Lý thuyết triển khai

Để đơn giản hóa chương trình, nguồn sáng giống với điểm trung tâm (nhãn cầu: điểm mà bản đồ được xem và nơi xuất phát của các đường). Tương tự như việc giữ một ánh sáng ngay bên cạnh khuôn mặt của bạn, điều này giúp loại bỏ bóng tối và cho phép tính toán độ sáng của mỗi pixel dễ dàng hơn nhiều.

Chương trình cũng sử dụng tọa độ cầu, với điểm chính giữa của tầm nhìn tại điểm gốc. Điều này cho phép dễ dàng tạo ra các đường (mỗi đường có một theta duy nhất: góc ngang và phi: góc dọc) và cung cấp cơ sở cho các phép tính. Các dòng có cùng một dòng được ánh xạ tới các pixel trong cùng một hàng. Độ lệch của các góc tương ứng tăng lên trên mỗi hàng pixel.

Để đơn giản hóa phép toán, bản đồ 3D bao gồm các mặt phẳng với một biến chung (x, y hoặc z), trong khi hai biến không chung còn lại được giới hạn trong một phạm vi, hoàn thành định nghĩa của từng mặt phẳng.

Để quan sát xung quanh bằng chuột, phương trình của chương trình tính theo chiều dọc và chiều quay ngang trong quá trình chuyển đổi giữa hệ tọa độ cầu và xyz. Điều này có tác dụng định hình trước một vòng quay trên tập hợp các đường tầm nhìn của "quả cầu gai".

Bước 3: Toán học

Các phương trình sau đây cho phép chương trình xác định đường nào cắt từng đối tượng và thông tin về từng giao điểm. Tôi suy ra các phương trình này từ các phương trình tọa độ cầu cơ bản và các phương trình quay 2D:

r = khoảng cách, t = theta (góc ngang), p = phi (góc thẳng đứng), A = quay quanh trục Y (quay dọc), B = quay quanh trục Z (quay ngang)

Kx = (sin (p) * cos (t) * cos (A) + cos (p) * sin (A)) * cos (B) -sin (p) * sin (t) * sin (B)

Ky = (sin (p) * cos (t) * cos (A) + cos (p) * sin (A)) * sin (B) + sin (p) * sin (t) * cos (B)

Kz = -sin (p) * cos (t) * sin (A) + cos (p) * cos (A)

x = r * Kx

y = r * Ky

z = r * Kz

r ^ 2 = x ^ 2 + y ^ 2 + z ^ 2

ánh sáng = Klight / r * (Kx hoặc Ky hoặc Kz)

p = arccos ((x * sin (A) * cos (B) + y * sin (A) * sin (B) + z * cos (A)) / r)

t = arccos ((x * cos (B) + y * sin (B) -p * sin (A) * cos (p)) / (r * cos (A) * sin (p)))

Bước 4: Chương trình

Tôi hy vọng rằng trình xem 3D nguyên mẫu này đã giúp bạn hiểu được hoạt động của thực tế ảo 3D. Với một số hoàn thiện hơn và mã hóa, trình xem này chắc chắn có tiềm năng được sử dụng trong phát triển trò chơi 3D.