Học WebGL và ba.js [đã đóng]

Tôi mới và bắt đầu tìm hiểu về đồ họa máy tính 3D trong trình duyệt web. Tôi thích làm game 3D trên trình duyệt. Đối với bất kỳ ai đã học cả WebGL và ba.js ...

1. Có kiến ​​thức về WebGL cần thiết để sử dụng ba.js không?

2. Những lợi thế của việc sử dụng ba.js so với WebGL là gì?

Vì bạn có tham vọng lớn, bạn phải đầu tư thời gian để tìm hiểu các nguyên tắc cơ bản. Đây không phải là vấn đề bạn học gì trước tiên - bạn có thể học chúng đồng thời nếu bạn muốn. (Đó là những gì tôi đã làm.)

Điều này có nghĩa là bạn cần hiểu:

1. Khái niệm WebGL
2. Three.js
3. Các khái niệm toán học cơ bản

Ba.js. Three.js thực hiện một công việc tuyệt vời là trừu tượng hóa nhiều chi tiết của WebGL, vì vậy, cá nhân tôi, tôi khuyên bạn nên sử dụng Three.js cho dự án của bạn. Nhưng hãy nhớ rằng, Three.js ở dạng alpha và nó đang thay đổi thường xuyên, vì vậy bạn phải chuẩn bị cho điều đó. Hầu hết mọi người học Three.js bằng cách nghiên cứu các ví dụ. Tránh các sách và hướng dẫn lỗi thời và tránh các ví dụ từ mạng liên kết đến các phiên bản cũ của thư viện.

WebGL. Nếu bạn sử dụng Three.js, bạn không cần biết cách lập trình trong WebGL, bạn chỉ cần hiểu các khái niệm WebGL. Điều đó có nghĩa là, bạn chỉ cần có thể đọc mã WebGL của người khác và hiểu những gì bạn đọc. Điều đó dễ dàng hơn nhiều so với dự kiến ​​sẽ tự viết một chương trình WebGL. Bạn có thể tìm hiểu các khái niệm WebGL đủ tốt bằng cách sử dụng bất kỳ hướng dẫn nào trên mạng, chẳng hạn như hướng dẫn cho người mới bắt đầu tại WebGLFundamentals.org và Học WebGL .

Môn Toán. Một lần nữa, bạn ít nhất cần phải hiểu các khái niệm. Ba cuốn sách hay là:

1. 3D Math Primer cho Phát triển đồ họa và trò chơi của Fletcher Dunn và Ian Parberry

2. Toán học cần thiết cho các trò chơi và ứng dụng tương tác: Hướng dẫn lập trình viên của James M. Van Verth và Lars M. Bishop

3. Toán học cho lập trình trò chơi 3D và đồ họa máy tính của Eric Lengyel

Tôi hy vọng điều này hữu ích cho bạn. Chúc may mắn.

Có một khóa học trực tuyến rất tốt - Đồ họa 3D tương tác tại https://www.udacity.com/c thuyết / cs291 trên THREE.js. Khóa học này bao gồm các bài tập cũng để có được kinh nghiệm thực hành. Nó bao gồm tất cả các khái niệm cơ bản về Three.js và Đồ họa máy tính

Suy nghĩ cá nhân của tôi là như sau:

• Nếu bạn có nhiều thời gian, bạn có thể tìm hiểu cả hai, nhưng lưu ý rằng WebGL ở cấp độ thấp hơn nhiều so với Three.js.
• Đối với dự án 3d đầu tiên, các chuyên gia khuyên bạn nên sử dụng thư viện như Three.js để làm quen với các điều khoản và mô hình 3d chung.

Dù bạn chọn hướng đi nào, tôi khuyên bạn nên học hỏi / cải thiện các kỹ năng đại số tuyến tính của mình . Sau đó hãy tiếp tục và tìm hiểu hoặc cải thiện sự hiểu biết của bạn về kích thước MVP (Chiếu hình mẫu) . Three.JS có thể trừu tượng hóa phần lớn điều đó, nhưng tôi nghĩ đó là chìa khóa mà người ta hiểu rõ các khái niệm đó trước khi nghiêm túc về bất kỳ sự phát triển 3D nào.

Tôi đã viết một bài viết giới thiệu về MVP khi tôi lần đầu tiên học lập trình 3D với OpenGL. Tôi nhận ra rằng cho đến khi tôi có thể giải thích những ma trận biến đổi đó là gì và chúng liên quan đến các kích thước / không gian khác nhau như thế nào, tôi thực sự không biết bất kỳ chương trình 3D nào, mặc dù tôi có thể hiển thị các đối tượng lên màn hình.

Vì mục tiêu của bạn là tạo trò chơi, tôi nghĩ rằng bạn sẽ được hưởng lợi nhiều từ việc học một số WebGL thô trước tiên, ngay cả khi bạn kết thúc bằng cách sử dụng một khung như Three.js để giúp bạn viết mã sau này.

"WebGL là API 2D chứ không phải API 3D"

http://webglfundamentals.org/webgl/lessons/webgl-2d-vs-3d-l Library.html

Bài viết này mô tả sự khác biệt cơ bản giữa các thư viện WebGL & 3d như ba.js.
Điều này khiến tôi lựa chọn giữa WebGL hoặc Three.js là không có trí tuệ.

Tôi đến từ nền tảng Unity3D cũng như Papervision3D ngày trước, vì vậy tôi đã hiểu rõ về cách xử lý không gian 3D. Three.js là cách để bạn bắt đầu học cách đối phó với các dự án WebGL. Api rất tốt, nó rất mạnh và nếu bạn đến từ một công nghệ 3D khác, bạn sẽ bắt đầu và chạy với rất ít thời gian.

Tôi đã dành rất nhiều thời gian với các ví dụ của Threejs.org - có rất nhiều trong số họ và họ rất giỏi trong việc giúp bạn thoát ra và chạy đúng hướng. Các tài liệu đủ phong nha, đặc biệt nếu bạn so sánh chúng với các ứng dụng webGL 3D khác ngoài kia.

Bạn cũng có thể xem xét nhận phiên bản miễn phí của Unity3D và collada miễn phí (miễn phí khi tôi nhận nó) từ cửa hàng ứng dụng của họ (Window> App store). Tôi thấy đủ dễ dàng để thiết lập cảnh của mình trong Unity và xuất nó sang Collada để sử dụng với Three.js.

Ngoài ra, tôi đã đăng lớp này mà tôi sử dụng với Three.js được gọi là neo ( http://rockonflash.com/webGL/three/neo.js ). Chỉ cần thêm nó vào dự án của bạn, sau đó gọi Neo.JackIntoThree () và nó sẽ thêm các phương thức / thuộc tính vào Object3D để sử dụng trong dự án của bạn. Những thứ như DrawAllAxis () là vô giá khi gỡ lỗi cảnh của bạn, v.v.

Mặc dù vậy, Three.js là một cách tuyệt vời để đi - nó đủ linh hoạt để cho phép bạn viết các shader / đối tượng của riêng bạn, v.v. và đủ mạnh mẽ ngay lập tức để giúp bạn hoàn thành mục tiêu của mình.

Tôi đã chọn ba.js, nhưng cũng đã nhảy vào GLSL và thử nghiệm rất nhiều với ba.js shaderM vật liệu. Một cách để làm điều đó - ba.js vẫn trừu tượng nhiều thứ cho bạn, nhưng nó cũng cung cấp cho bạn quyền truy cập rất thấp, sạch sẽ vào tất cả các khả năng kết xuất (trình chiếu, hoạt hình).

Bằng cách này, bạn có thể làm theo ngay cả những thứ như hướng dẫn open-gl tuyệt vời này . Bạn không phải thiết lập ma trận, gõ các mảng, vì ba đã thiết lập nó cho bạn, cập nhật chúng khi cần. Mặc dù vậy, shader bạn có thể viết từ đầu - một kết xuất màu đơn giản sẽ là hai dòng GLSL. Ngoài ra còn có một trình cắm xử lý bài đăng cho ba.js, thiết lập tất cả các bộ đệm, quads toàn màn hình và những thứ bạn cần để thực hiện các hiệu ứng, nhưng trình tạo bóng có thể rất đơn giản để bắt đầu.

Vì các trình tạo bóng lập trình là bản chất của đồ họa 3d hiện đại, tôi hy vọng câu trả lời của tôi không bị mất điểm :) Sớm hay muộn, bất cứ ai làm điều này ít nhất cũng cần phải hiểu những gì diễn ra dưới mui xe, đó là bản chất của quái thú. Ngoài ra, hiểu được chiều thứ 4 trong không gian đồng nhất có lẽ cũng quan trọng.

Cuốn sách này tốt cho WebGL.

Tôi chỉ học được một chút về cả hai và tôi cảm thấy hiểu được những điều cơ bản của webgl, tôi nghĩ rằng một giới thiệu về webgl là đủ và sau đó nhảy vào ba js. Sẽ khá dễ dàng một khi bạn hiểu các khái niệm cơ bản của WebGL. Liên kết hữu ích:

1. Giới thiệu tốt nhất tôi đã đọc: http://dev.opera.com/articles/view/an-int sinhtion-to-webgl /
2. Hướng dẫn toàn diện: http://www.johannes-raida.de/tutorials.htm