ランキングに戻る

galacean/engine

TypeScriptgalacean.com/engine

A typescript interactive engine, support 2D, 3D, animation, physics, built on WebGL and glTF.

webgltypescriptgraphicsjavascript2d3danimationinputphysicsweb3dhtml5webgl2
スター成長
スター
5.8k
フォーク
406
週間成長
Issue
261
2k4k
2020年12月2022年10月2024年9月2026年7月
成果物npmnpm install engine
README

Galacean Engine

npm-size npm-download codecov

Galacean Engine is a high-performance, real-time interactive engine designed primarily for web and mobile platforms. It employs a component system architecture and emphasizes ease of use and lightweight design. Developers can create projects using either editor or pure code.

image

Features

  • 🖥  Platform - Support HTML5 and wechat minigame
  • 🔮  Graphics - Advanced 2D + 3D graphics engine
  • 🏃  Animation - Powerful animation system
  • 🧱  Physics - Powerful and easy-to-use physical features
  • 🎨  GUI - Flexible UI system with drag-and-drop and dynamic interactions
  • 👆  Input - Easy-to-use interactive capabilities
  • 📑  Scripts - Use TypeScript to write logic efficiently

Usage

Using Editor

We recommend using Editor for a streamlined workflow that enables seamless integration between artists and developers. Its intuitive visual tools allow artists to quickly create scenes and enable developers to write custom logic, with convenient platform export. You can even create projects based on pre-built case templates.

image

Using Pure Code

If you want to build your project using pure code via runtime, install the engine from npm:

npm install @galacean/engine

Create a simple scene:

import { BlinnPhongMaterial, Camera, DirectLight, MeshRenderer, WebGLEngine, PrimitiveMesh } from "@galacean/engine";

// Create engine by passing in the HTMLCanvasElement id and adjust canvas size
const engine = await WebGLEngine.create({ canvas: "canvas-id" });
engine.canvas.resizeByClientSize();

// Get scene and create root entity
const scene = engine.sceneManager.activeScene;
const rootEntity = scene.createRootEntity("Root");

// Create light
const lightEntity = rootEntity.createChild("Light");
const directLight = lightEntity.addComponent(DirectLight);
lightEntity.transform.setRotation(-45, -45, 0);
directLight.intensity = 0.4;

// Create camera
const cameraEntity = rootEntity.createChild("Camera");
cameraEntity.addComponent(Camera);
cameraEntity.transform.setPosition(0, 0, 12);

// Create sphere
const meshEntity = rootEntity.createChild("Sphere");
const meshRenderer = meshEntity.addComponent(MeshRenderer);
const material = new BlinnPhongMaterial(engine);
meshRenderer.setMaterial(material);
meshRenderer.mesh = PrimitiveMesh.createSphere(engine, 1);

// Run engine
engine.run();

Contributing

This repository contains the runtime's source code and documentation. Everyone is welcome to contribute—whether you find a bug, have a feature request, or want to tackle a task from our roadmap, please get in touch.

Make sure to read the Contributing Guide / 贡献指南 before submitting changes.

Clone

Prerequisites:

  • git-lfs (Install by official website)

Clone this repository:

git clone git@github.com:galacean/engine.git

Build

Prerequisites:

  • Node.js v15.0.0+ and NPM (Install by official website)
  • PNPM (Install globally by npm install -g pnpm)

In the folder where you have cloned the repository, install the build dependencies using pnpm:

pnpm install

Then, to build the source, using npm:

npm run b:all

License

The engine is released under the MIT license. See LICENSE file.

関連リポジトリ
mrdoob/three.js

JavaScript 3D Library.

JavaScriptnpmMIT Licensejavascript3d
threejs.org
113.9k36.4k
pixijs/pixijs

The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.

TypeScriptnpmMIT Licensecanvas2dpixijs
pixijs.com
47.8k5k
phaserjs/phaser

Phaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering.

JavaScriptnpmMIT Licensephaserphaserjs
phaser.io
40k7.1k
BabylonJS/Babylon.js

Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework.

TypeScriptnpmApache License 2.0webglwebgl2
babylonjs.com
25.8k3.7k
xtermjs/xterm.js

A terminal for the web

TypeScriptnpmMIT Licensextermterminal
xtermjs.org
20.9k1.9k
google/filament

Filament is a real-time physically based rendering engine for Android, iOS, Windows, Linux, macOS, and WebGL2

C++Apache License 2.0pbrgraphics
google.github.io/filament/
20.3k2.2k
lettier/3d-game-shaders-for-beginners

🎮 A step-by-step guide to implementing SSAO, depth of field, lighting, normal mapping, and more for your 3D game.

C++shaders3d
lettier.github.io/3d-game-shaders-for-beginners/index.html
19.8k1.5k
tensorflow/tfjs

A WebGL accelerated JavaScript library for training and deploying ML models.

TypeScriptnpmApache License 2.0deep-learningtypescript
js.tensorflow.org
19.1k2k
plotly/plotly.py

The interactive graphing library for Python :sparkles:

PythonPyPIMIT Licensepythond3
plotly.com/python/
18.7k2.8k
plotly/plotly.js

Open-source JavaScript charting library behind Plotly and Dash

JavaScriptnpmMIT Licensedata-visualizationd3
plotly.com/javascript/
18.3k2k
kitao/pyxel

A retro game engine for Python

Rustcrates.ioOthergamegame-development
17.6k929
aframevr/aframe

:a: Web framework for building virtual reality experiences.

JavaScriptnpmMIT Licensevrwebvr
aframe.io
17.6k4.4k