Coder Social home page Coder Social logo

lume / glas Goto Github PK

View Code? Open in Web Editor NEW
847.0 42.0 42.0 2.02 MB

WebGL in WebAssembly with AssemblyScript

Home Page: https://lume.io

License: MIT License

JavaScript 37.08% TypeScript 62.68% HTML 0.23%
assemblyscript typescript webgl 3d 3d-graphics 3d-engine 3d-game-engine glas webassembly wasm

glas's Introduction

LUME

GLAS

WebGL in WebAssembly with AssemblyScript.

This is a work-in-progress port of Three.js, a JavaScript 3D WebGL library, into AssemblyScript.

Motivation

It'd be sweet to have a high-performing WebGL engine that runs in the web via WebAssembly and is written in a language that web developers are already familiar with: JavaScript, in the form of TypeScript (a superset of JavaScript with types).

Enter AssemblyScript, a toolchain that allows us to write a strictly-typed subset of TypeScript code and compile it to WebAssembly (an assembly-like language representing machine code) for speed.

Status

⚠️ ALPHA STATE

The project is currently in its very early alpha stages. We have an amazing group of programmers building the initial ASWebGLue library. This library allows AssemblyScript programs to call the browser's underlying WebGL interface. This is required before we are able render anything to the screen. A majority of the Three.js library and their unit test have been ported over.

See the current progress in the project board or review our issues.

Goal

Our initial port project board we're tracking all the classes that need to be ported. The initial goal is to reproduce the following basic Three.js demo, but entirely in AssemblyScript:

Initial Goal: https://codepen.io/trusktr/pen/EzBKYM

A brief overview of the work consists of picking a Three.js class, translating it from JavaScript (with TypeScript declaration files), and porting into AssemblyScript (effectively merging the .js and .d.ts files).

Most logic can be ported unchanged, but sometimes there are features of plain JS that AssemblyScript does not support. For example Assembly script does not support any type. Three.js APIs that accept plain object literals with arbitrary properties need to be converted into class structures with specific property types. Additionally unit test files also need to be ported over from *.test.js and into as-pect *.spec.ts files.

If you would like to help, awesome! We are currenty looking for help, testing, and feedback. Please read about how to contribute or view a detailed example of how to port some of the code.

How It Works

We have an HTML page that loads the glas WebAssembly module and runs it, but so far this module only instantiates an Object3D instance to show that we're able to run the module.

Later we'll eventually connect the module to a <canvas> element in the DOM and actually render something.

Build & Run

To run the example GLAS application in your browser use the following command:

# install or update dependencies
npm install

# build and serve the project in browser
npm start

Now see the devtools console in your browser tab for some output that tell us that our GLAS program has been loaded and initialized.

NOTE: the project does not currently have a watch mode with automatic rebuild. So you will need to execute npm run build again and then refresh to see the changes.

Our goal is to get GLAS distributed as a library on NPM so that you can include into your own AssemblyScript application. Until this is implemented, you can add your application code into the src/as/index.ts AssemblyScript file. This is currently the entry point for GLAS.

Testing

Unit testing is handled by the as-pect test runner for AssemblyScript. It is based on Mocha testing API with similar describe and it functions, etc.

To run the tests, run the following commands in your terminal:

# run unit tests
npm test

The console output should report which tests pass and which tests fail.

If you are interested in developing GLAS please read the detailed process on our development page

glas's People

Contributors

corruptedzulu avatar data-ux avatar dependabot[bot] avatar gitter-badger avatar jbbe avatar jtenner avatar mbmcmullen27 avatar p3ngu1nzz avatar romdotdog avatar stevugnin avatar trusktr 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

glas's Issues

Mesh

  • updateMorphTargets()

npm install fail

It make an error when I run npm install:
npm ERR! code 1 npm ERR! Command failed: git checkout runtime npm ERR! error: pathspec 'runtime' did not match any file(s) known to git.

Using yarn install also prompts for failure:
error Couldn't find match for "runtime" in "refs/heads/2.4.2,refs/heads/asc_to_devDep,refs/heads/fix_ts_output,refs/heads/greenkeeper/ts-jest-24.1.0,refs/heads/greenkeeper/ts-jest-pin-24.0.2,refs/heads/master,refs/heads/v2.2.1,refs/heads/v2.3.2,refs/heads/v2.3.3,refs/heads/v2.4.1.0,refs/pull/100/head,refs/pull/...

PerspectiveCamera

  • constructor
  • updateProjectionMatrix
  • updateMatrixWorld
  • updateMatrix

LightShadow

Constructed, but not used, so closing this and leaving it commented out.

ESLint

Prettier is good at formatting. But it leaves open for contributions and tests to be deployed without respecting project rules.

I propose to add and configure ESLint to include our project rules and add no-var-keyword rules and also ES5 rules about comma.

What is the goal of glas?

I would love to help reduce heap allocations and speed up the matrix math/copying, but I don't know the reasons for the code choices?

For instance, Matrix4 would be much better off as a single heap allocation, so that copying can just be a single memory.copy() function call. Also, SIMD can also be used to speed up calculations. This might require that float math should probably be done in f32 to reduce memory usage and increase the number of SIMD lanes that can be used.

Using an Array<f64> is slower because it requires 2 additional heap allocations, and there are runtime checks for each set and get to validate the indexes don't go out of bounds. You can use unchecked(expression) but that still doesn't produce optimal code.

Even the clone() methods should ultimately result in a single function call to a custom clone(pointer) call and then cloning its children combined with a couple of store operations.

All of the generated TypeScript currently can compile to JavaScript. Is this a requirement for the project? If not, I would love to hammer away at a ton of optimizations for you and explain all of them.

Should Use `asconfig.js` file instead of cli within `package.json`

This is a more maintainable way to create multiple compile time configurations. This will also allow us to more easily configure out table import and exports. see this page for more information on the compiler options and implementation of the configuration file. Might also want to looking at implementing a dev and production build targets

Incomplete Build Process

Need to finish creating a working build process that is able to compile and build the project to be tested in an example web application by using npm run start. This requires making sure that aswebglue imports into the project before using rollup to generate a javascript module that can be loaded by an html page with live-server

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.