GithubHelp home page GithubHelp logo

galacean / engine Goto Github PK

View Code? Open in Web Editor NEW
3.9K 62.0 287.0 20.12 MB

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

Home Page: https://galacean.antgroup.com/

License: MIT License

JavaScript 0.32% TypeScript 93.08% GLSL 6.46% Shell 0.01% HTML 0.03% Sass 0.07% EJS 0.04%
webgl typescript graphics javascript 2d 3d animation input physics web3d

engine's Introduction

Galacean Engine

npm-size npm-download codecov

Galacean is a web-first and mobile-first high-performance real-time interactive engine. Use component system design and pursue ease of use and light weight. Developers can independently use and write Typescript scripts to develop projects using pure code.

Features

  • 🖥  Platform - Support HTML5 and Alipay miniprogram
  • 🔮  Graphics - Advanced 2D + 3D graphics engine
  • 🏃  Animation - Powerful animation system
  • 🧱  Physics - Powerful and easy-to-use physical features
  • 👆  Input - Easy-to-use interactive capabilities
  • 📑  Scripts - Use TypeScript to write logic efficiently

npm

The engine is published on npm with full typing support. To install, use:

npm install @galacean/engine

This will allow you to import engine entirely using:

import * as GALACEAN from "@galacean/engine";

or individual classes using:

import { Engine, Scene, Entity } from "@galacean/engine";

Usage

// 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

Everyone is welcome to join us! Whether you find a bug, have a great feature request or you fancy owning a task from the road map feel free to 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 [email protected]:galacean/runtime.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

Links

License

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

engine's People

Contributors

changhuihui0218 avatar cleam avatar colorhook avatar cptbtptpbcptdtptp avatar czizzy avatar eyworldwide avatar guolei1990 avatar gz65555 avatar husong-sudo avatar hypnosnova avatar jtabibito avatar jujiex avatar liulinboyi avatar lixinhang avatar luzhuang avatar max10240 avatar meiya163254 avatar mrkou47 avatar platearmourprogrammer avatar shiguanghai avatar singlecoder avatar susiwen8 avatar sway007 avatar wellsliao avatar yangfengzzz avatar yunyoujun avatar zhuxudong avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

engine's Issues

渲染流程上的一些问题

只有在swithRenderCount或者switchProgram时才会去重新绑定纹理,对于不同纹理的renderElement,在相同pipeline下,会不会出现每帧只绑定第1个渲染物体的材质,导致纹理渲染对不上问题

Add sprite mask feature

Is your feature request related to a problem? Please describe.
Current engine has no sprite mask.

Describe the solution you'd like
Add SpriteMask component.

SpriteRenderer Refactor

Problem

  • The existing rendering process are unreasonable.
  • Not enough performance.
  • Loss of function.

Solution

  • Refactor 2D SpriteRenderer.
  • Optimize the underlying rendering pipeline.

"npm run doc " is error in win10

Expected Behavior

I can run doc in win10

Current Behavior

I can't run doc in win10

Possible Solution

delete "rm && rm -rf doc && " in "rm && rm -rf doc && typedoc --options tools/typedoc/typedoc.js"

Steps to Reproduce

npm run doc

Environment

  • Oasis version: 0.2.0
  • OS & Version: win10

GC is not clean enough

Describe the bug
GC is not clean enough. the memory will continue to increase after switching the same project.

To Reproduce
Steps to reproduce the behavior:

  1. open any project of the playground.
  2. call engine.destroy().
  3. open chrome -> memory -> take heap snapshoot.
  4. observe memory detail info.
  5. load same project and repeat process from 3 to 4.
  6. the memory will continue to increase after switching the same project.

Expected behavior
Memory will not increase after switching the same project.

Screenshots
image

Desktop (please complete the following information):
anyone

Smartphone (please complete the following information):
anyone

Additional context

OrbitControls autoRotateSpeed property's semantic is not accurate

Expected Behavior

OrbitControls autoRotateSpeed propertry is bigger and the rotation speed is faster.

Current Behavior

autoRotateSpeed is smaller and the rotation speed is slower.

Possible Solution

autoRotateSpeed is now actually the time takes for rotating 360 degrees, so there're two solutions for the issue:

  1. Change the property name, such as autoRotateLife
  2. Make the semantic accurate: how many degrees (or radians) rotate per second.

Steps to Reproduce

easy to reproduce, just set the autoRotateSpeed value.

Environment

  • Oasis version: e.g. 0.2.0
  • Browser & Version: e.g. Chrome 67
  • OS & Version: e.g. MacOS 10.15.7
  • Running Example: url

MeshRenderer and GeometryRenderer refactored

Current status

  • The engine currently includes MeshRenderer and GeometryRenderer, with repetitive concepts.
  • The MeshRenderer almost no function.

Solution

  • Unify MeshRenderer and GeometryRenderer as MeshRender and add features.
  • Adjust Mesh and BufferGeometry functions, even naming.
  • Let both Mesh and BufferGeometry be accepted by MeshRenderer.
  • May refactor the Renderer class.

加载一些复杂的模型会报错

Describe the bug
加载一些复杂的模型会报错,这个复杂的模型 有很多可以拆分的子模型。
image

To Reproduce
Steps to reproduce the behavior:
1.创建一个加载脚本
const { animations, defaultSceneRoot } = await this.engine.resourceManager.load<GLTFResource>( 'http://127.0.0.1:8000/gltf/mode.obj', )
2.运行,运行后不显示模型,且浏览器会提示报错。自绘的节点可以被渲染。

Expected behavior
我希望能有个加载模型的万能函数,或者准确的加载模型。

Screenshots

Desktop (please complete the following information):

  • OS: window
  • Browser chrome
  • Version 87.0.4280.141

Additional context

Refactor the basic functions of the animation system

The current animation system performance and experience are bad, we decided to redesign.

  • Enhanced AnimationClip: Add Hermite Interpolation, Add Splitting, Optimize API
  • Optimize mix and crossFade
  • Add Animator Component to realize state machine driven animation

When using ParticleRenderer, white border appears around particle.

Describe the bug
It looks like this:
image

I'm not sure this problem is about the png image I use or the render system.
Here is the image I use: https://gw.alipayobjects.com/zos/gltf-asset/mars-cli/QUTYGTEWBLYN/1622456348-b6060.png
And Here is my code:
image

To Reproduce
Steps to reproduce the behavior:
Just use ParticleRenderer and set texture to the image above.

Expected behavior
White border should not appear.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: mac OS
  • Browser chrome

Smartphone (please complete the following information):

  • Device: iphone and android

Additional context
Something may be helpful: The same problem appears on @alipay/mars-player (I dont remeber specific version), but the latest version has fixed this.

GLTF Load error

Describe the bug
Load gltf modle failed.

Desktop (please complete the following information):

  • OS: [MAC]
  • Browser [chrome]

scene.gltf.zip

Expected a symbol for node with kind StringLiteral

Current Behavior

npm run doc

Steps to Reproduce

D:\work\webgl\engine\node_modules\typedoc\dist\lib\converter\context.js:56
throw new Error(Expected a symbol for node with kind ${ts.SyntaxKind[node.kind]});
^
Error: Expected a symbol for node with kind StringLiteral
at Context.expectSymbolAtLocation (D:\work\webgl\engine\node_modules\typedoc\dist\lib\converter\context.js:56:19)
at ExportDeclarationConverter.convert (D:\work\webgl\engine\node_modules\typedoc\dist\lib\converter\nodes\export.js:98:46)
at Converter.convertNode (D:\work\webgl\engine\node_modules\typedoc\dist\lib\converter\converter.js:117:53)
at D:\work\webgl\engine\node_modules\typedoc\dist\lib\converter\nodes\block.js:66:28
at Array.forEach ()
at BlockConverter.convertStatements (D:\work\webgl\engine\node_modules\typedoc\dist\lib\converter\nodes\block.js:65:24)
at D:\work\webgl\engine\node_modules\typedoc\dist\lib\converter\nodes\block.js:44:26
at Context.withScope (D:\work\webgl\engine\node_modules\typedoc\dist\lib\converter\context.js:109:9)
at D:\work\webgl\engine\node_modules\typedoc\dist\lib\converter\nodes\block.js:43:25
at Context.withSourceFile (D:\work\webgl\engine\node_modules\typedoc\dist\lib\converter\context.js:93:9)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] doc: typedoc --options tools/typedoc/typedoc.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] doc script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\86136\AppData\Roaming\npm-cache_logs\2021-02-07T12_30_30_818Z-debug.log

Environment

  • Oasis version: 0.2.0
  • OS & Version: win10

Custom Asset Loader

Custom Asset File Encoder/Decoder

For the reason that we shall edit assets on our web editor, we use custom files of asset to replace glTF files.

  • Texture2D
  • TextureCube
  • Material
  • Mesh
  • A Tool for generating encoder/decoder.

Render Queue Sort Optimization

RenderQueue need sort every frame, JS inner sort fucntion is slow. We should improve the performance of sort.

Use custom sort function to improve perfromance.

Possible solution.

  • Quick sort
  • Merge sort

Animation System Enhancement

  • Enhanced AnimationClip: Add Hermite Interpolation, Add Splitting, Optimize API
  • Optimize mix and crossFade
  • Add Animator Component to realize state machine driven animation

A CLI for Oasis

Problem

Users need a template to create a project.

Solution

Use vite as a build tool. And we need:

  • A template for React Users.
  • A template for Vue Users.
  • A template for VanillaJS Users.
  • A CLI to create a project.

Shader framework

  • Determine the shader frame format
  • Support shader pass
  • Support subShader fall back

Sprite interface design optimization

Is your feature request related to a problem? Please describe.
Part of the interface of the current wizard is not perfect

Describe the solution you'd like

  • Adjust the interface of pixelsPerUnit.
  • ........

camera tranparent background not behavior correctly in mobile

Describe the bug
When set camera's background color to 'new Vector(0, 0, 0, 0)', it behavior normally in both PC and mobile.
But when set camra's background color to 'new Vector(1, 1, 1, 0)', it behavior normally in PC (transparent background), while still have white background in mobile.

(have tried Mi10 utlra, IPhone 12 Simulator, and IPhone 11)

Clear package build scripts.

Current build scripts confuses me.

"b:types": build types.
"b:moudle": build moudle verison lib.
"b:umd": build moudle verison lib.
"b:miniprogram": build miniprogram version moudle verison lib.
"b:all": build all above.

Redesign environment interface

Is your feature request related to a problem? Please describe.
Currently adding global ambient light needs to add components.

Describe the solution you'd like
Put the ambient light interface into the scene.

Implement camera clearMode interface.

Is your feature request related to a problem? Please describe.
camera clearMode interface not implemented

Use ClearFlags instead of deprecated API setClearMode() and delete.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.