Hướng dẫn what 3d game engines use javascript? - những gì công cụ trò chơi 3d sử dụng javascript?

Tôi biết bạn đang nghĩ gì: Tại sao bạn lại sử dụng JavaScript để phát triển trò chơi? Tôi đã nghĩ điều tương tự khi lần đầu tiên tôi phát hiện ra rằng bạn có thể sử dụng JavaScript, cũng như HTML5, để phát triển các trò chơi 3D.

Sự thật là, kể từ khi giới thiệu API JavaScript WebGL, các trình duyệt hiện đại có khả năng trực quan cho phép chúng hiển thị đồ họa 2D và 3D phức tạp và phức tạp hơn mà không cần dựa vào các plugin của bên thứ ba.

Bạn có thể bắt đầu hành trình phát triển trò chơi web của mình với Pure JavaScript, đây có lẽ là cách tốt nhất để tìm hiểu nếu bạn là người mới bắt đầu. Nhưng tại sao lại phát minh lại bánh xe khi có rất nhiều động cơ trò chơi được áp dụng rộng rãi để lựa chọn?

Trong hướng dẫn này, chúng tôi sẽ khám phá sáu công cụ trò chơi JS/HTML5 hàng đầu, được xếp hạng theo số lượng sao GitHub và hướng dẫn bạn cách sử dụng chúng.

1. ba.js

Three.js là một trong những thư viện JavaScript phổ biến nhất để tạo và hoạt hình đồ họa máy tính 3D trong trình duyệt web bằng WebGL. Nó cũng là một công cụ tuyệt vời để tạo các trò chơi 3D cho các trình duyệt web.

Vì ba.js dựa trên JavaScript, nên việc thêm bất kỳ tương tác nào giữa các đối tượng 3D và giao diện người dùng, chẳng hạn như bàn phím và chuột. Điều này làm cho thư viện hoàn toàn phù hợp để tạo các trò chơi 3D trên web.

Ưu điểm

• Dễ học: Ưu điểm quan trọng nhất của ba.js - ngoài khả năng thực hiện kết xuất phức tạp rất tốt - là nó rất dễ bắt đầu với: The most important advantage of Three.js — aside from its ability to perform complex rendering very well — is that it’s very easy to get started with
• Rất nhiều ví dụ: Do sự phổ biến của nó, có vô số ví dụ để giúp bạn bắt đầu: Due to its popularity, there are countless examples to help you get started
• Cộng đồng lớn: Ba.js có rất nhiều người dùng và do đó, một cộng đồng lớn các nhà phát triển hợp tác và tạo ra các công cụ của bên thứ ba khác nhau: Three.js has plenty of users and, therefore, a sizable community of developers working with and creating various third-party tools
• Tài liệu tốt: Tài liệu mạnh mẽ thường là một chỉ số tuyệt vời của một thư viện mạnh mẽ và ba.js có tài liệu tuyệt vời: Robust documentation is usually a great indicator of a strong library, and Three.js has excellent docs
• Hiệu suất tuyệt vời: ba.js có lợi thế về hiệu suất so với các thư viện khác mà tôi đã sử dụng: Three.js has a performance advantage over other libraries I have used
• Kết xuất PBR: ba.js đã kết xuất PBR tích hợp, giúp kết xuất đồ họa chính xác hơn: Three.js has built-in PBR rendering, which makes rendering graphics more accurate

Nhược điểm

• Không có đường ống kết xuất: Điều này làm cho rất nhiều kỹ thuật kết xuất hiện đại không thể thực hiện với ba.js: This makes a lot of modern rendering techniques impossible/infeasible to implement with Three.js
• Không phải là một công cụ trò chơi: Nếu bạn đang tìm kiếm các tính năng ngoài kết xuất - bạn đã giành được nhiều: If you’re looking for features beyond rendering – you won’t find many here
• Hướng đến người mới: Bởi vì API phục vụ cho người mới, nhiều tính năng nâng cao được ẩn: Because the API caters to novices, many advanced features are hidden
• Thiếu hỗ trợ: Không có hỗ trợ tích hợp để lập chỉ mục không gian, làm cho raycast chính xác hoặc loại bỏ frustum và phát hiện va chạm là vô vọng trong các kịch bản phức tạp: There is no built-in support for spatial indexing, making exact raycasting, or frustum culling, and collision detection is hopelessly inefficient in complex scenarios

Ba.js trong hành động

Nếu bạn đang tìm cách đi sâu vào việc tạo các đối tượng 3D đơn giản hoặc phức tạp trên web, ba.js là thư viện đi. Những lợi thế hàng đầu của nó bao gồm một cộng đồng tài năng và rộng lớn và rất nhiều ví dụ và tài nguyên.

Three.js là thư viện hoạt hình 3D đầu tiên mà tôi đã làm việc và tôi đã giới thiệu nó cho bất kỳ ai bắt đầu phát triển trò chơi.

Hãy để tạo ra một hình học xoay đơn giản để chứng minh những gì ba.js có thể làm.

import * as THREE from 'js/three.module.js';

var camera, scene, renderer;
var geometry, material, mesh;

animate();

Tạo chức năng

function init() {
  const camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, .01, 20 );
  camera.position.z = 1;

  const scene = new THREE.Scene();

  const geometry = new THREE.BoxGeometry( 0.5, 0.5, 0.5 );
  const material = new THREE.MeshNormalMaterial();

  const mesh = new THREE.Mesh( geometry, material );
  scene.add( mesh );

  const renderer = new THREE.WebGLRenderer( { antialias: true } );
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );
}

function init() {
  const camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, .01, 20 );
  camera.position.z = 1;

  const scene = new THREE.Scene();

  const geometry = new THREE.BoxGeometry( 0.5, 0.5, 0.5 );
  const material = new THREE.MeshNormalMaterial();

  const mesh = new THREE.Mesh( geometry, material );
  scene.add( mesh );

  const renderer = new THREE.WebGLRenderer( { antialias: true } );
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );
}

Tiếp theo, tạo hàm

function animate() {
    init();
    requestAnimationFrame( animate );
    mesh.rotation.x += .01;
    mesh.rotation.y += .02;
    renderer.render( scene, camera );
}

function animate() {
    init();
    requestAnimationFrame( animate );
    mesh.rotation.x += .01;
    mesh.rotation.y += .02;
    renderer.render( scene, camera );
}

Kết quả đã hoàn thành sẽ trông như thế này:

2. pixijs

Nếu bạn đang tìm kiếm một thư viện JS để tạo đồ họa phong phú và tương tác với sự hỗ trợ cho các ứng dụng đa nền tảng, thì không có gì khác ngoài PIXIJS. Công cụ tạo HTML5 này cho phép bạn phát triển hoạt hình và trò chơi mà không có kiến ​​thức trước về API WebGL.

Ưu điểm

• Dễ học: Ưu điểm quan trọng nhất của ba.js - ngoài khả năng thực hiện kết xuất phức tạp rất tốt - là nó rất dễ bắt đầu với: Just like Three.js, PixiJS is very fast
• Rất nhiều ví dụ: Do sự phổ biến của nó, có vô số ví dụ để giúp bạn bắt đầu: Also like Three.js, Pixi.js supports multiple platforms
• Cộng đồng lớn: Ba.js có rất nhiều người dùng và do đó, một cộng đồng lớn các nhà phát triển hợp tác và tạo ra các công cụ của bên thứ ba khác nhau: The API is easy for a beginner to understand
• Tài liệu tốt: Tài liệu mạnh mẽ thường là một chỉ số tuyệt vời của một thư viện mạnh mẽ và ba.js có tài liệu tuyệt vời: Pixi.js uses a WebGL renderer but also supports a Canvas fallback

Nhược điểm

• Không có đường ống kết xuất: Điều này làm cho rất nhiều kỹ thuật kết xuất hiện đại không thể thực hiện với ba.js: In my experience, Three.js is much easier to get started with
• Không phải là một công cụ trò chơi: Nếu bạn đang tìm kiếm các tính năng ngoài kết xuất - bạn đã giành được nhiều: Pixi.js proudly only support renderer

Hướng đến người mới: Bởi vì API phục vụ cho người mới, nhiều tính năng nâng cao được ẩn

Thiếu hỗ trợ: Không có hỗ trợ tích hợp để lập chỉ mục không gian, làm cho raycast chính xác hoặc loại bỏ frustum và phát hiện va chạm là vô vọng trong các kịch bản phức tạp

Ba.js trong hành động

  npm install pixi.js
  import * as PIXI from 'pixijs'

  //or CDN
  

Nếu bạn đang tìm cách đi sâu vào việc tạo các đối tượng 3D đơn giản hoặc phức tạp trên web, ba.js là thư viện đi. Những lợi thế hàng đầu của nó bao gồm một cộng đồng tài năng và rộng lớn và rất nhiều ví dụ và tài nguyên.

import * as PIXI from 'pixi.js';

const app = new PIXI.Application();
document.body.appendChild(app.view);

app.loader.add('jumper', 'jumper.png').load((loader, resources) => {
    const bunny = new PIXI.Sprite(resources.bunny.texture);
    bunny.x = app.renderer.width / 2;
    bunny.y = app.renderer.height / 2;

    bunny.anchor.x = .5;
    bunny.anchor.y = .5;

    app.stage.addChild(bunny);

    app.ticker.add(() => {
        bunny.rotation += .01;
    });
});

Three.js là thư viện hoạt hình 3D đầu tiên mà tôi đã làm việc và tôi đã giới thiệu nó cho bất kỳ ai bắt đầu phát triển trò chơi.

Hãy để tạo ra một hình học xoay đơn giản để chứng minh những gì ba.js có thể làm.

Tạo chức năng

function init() {
  const camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, .01, 20 );
  camera.position.z = 1;

  const scene = new THREE.Scene();

  const geometry = new THREE.BoxGeometry( 0.5, 0.5, 0.5 );
  const material = new THREE.MeshNormalMaterial();

  const mesh = new THREE.Mesh( geometry, material );
  scene.add( mesh );

  const renderer = new THREE.WebGLRenderer( { antialias: true } );
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );
}

Ưu điểm

• Dễ học: Ưu điểm quan trọng nhất của ba.js - ngoài khả năng thực hiện kết xuất phức tạp rất tốt - là nó rất dễ bắt đầu với: Phaser is known to have a well-designed structure
• Hỗ trợ TypeScript: Thư viện hỗ trợ việc sử dụng TypeScript để phát triển trò chơi: The library supports the use of TypeScript for game development
• Tập trung vào phát triển trò chơi: Phaser chủ yếu là một công cụ phát triển trò chơi - và là một công cụ tốt ở đó: Phaser primarily is a game development engine — and a good one at that
• Plugins APLenty: Phaser hỗ trợ một danh sách các plugin khổng lồ: Phaser supports a huge list of plugins
• Hỗ trợ Webgl và Canvas: Phaser hỗ trợ WebGL và đã bật Canvas như một dự phòng: Phaser supports WebGL and has Canvas enabled as a fallback

Nhược điểm

• Kích thước xây dựng: Kích thước bản dựng của Phaser cho máy tính để bàn khá lớn: The build size of Phaser for desktop is quite massive
• Hỗ trợ kém cho phát triển di động: Tạo các ứng dụng di động gốc yêu cầu sử dụng Cordova hoặc một số khung của bên thứ ba khác: Creating native mobile apps requires using Cordova or some other third-party framework
• Quản lý nhà nước: Có thể hơi khó khăn để bắt đầu với người quản lý nhà nước Phaser: It can be somewhat difficult to get started with Phaser’s state manager

Phaser trong hành động

Phaser tốt để phát triển các ứng dụng trò chơi đa nền tảng. Sự hỗ trợ của nó cho một loạt các plugin và cộng đồng lớn các nhà phát triển xây dựng các trò chơi với Phaser giúp việc bắt đầu với khung.

Hãy để xây dựng một ứng dụng cơ bản với Phaser.

  npm install [email protected]
  //OR