lume / glas

WebGL in WebAssembly with AssemblyScript

A toolkit that simplifies the creation of rich and interactive 2D or 3D experiences.

Home  ·  Documentation  ·  Examples  ·  Forum  ·  Chat  ·  Source

npm install lume

Features

LUME is composed of several packages that can be used individually, or together as a whole:

lume - HTML elements for rich graphics

HTML elements for easily defining rich and interactive 2D or 3D applications powered by CSS3D, WebGL, or a combination of both.

This package uses and re-exports features from the below packages.

@lume/element - System for defining HTML elements

This is a web component system that allows you to create new, fast, and performant HTML elements in a simple way. It provides the foundation for LUME's HTML elements, and a standard pattern for building new elements that extend the features of LUME.

element-behaviors - Mix functionalities onto HTML elements

This allows you to augment HTML elements with features called "behaviors" that are similar to custom elements: each behavior is defined as a class that has the same lifecycle methods as custom elements. The difference is that an unlimited number of behaviors can be associated with an element.

glas - WebGL engine written in AssemblyScript (WIP)

This is a WebGL engine with the consistent performance of WebAssembly, written in AssemblyScript (a TypeScript-to-WebAssembly compiler).

LUMECraft

LUMECraft is a collection of applications made with LUME, showing what LUME can do, and serving as forkable starting points for further customization.

first-person-shooter - First-person shooter game

A first-person shooter game foundation made with LUME, Solid.js, and Meteor.

Getting involved

There are various ways to get involved!

• Visit the documentation and make something awesome!
• Submit fixes or new features to any packages or the website! See the contributing guide.
• Discuss LUME, get help, or help others in the forums or on our Discord chat server.

Status

glas's Issues

Port Matrix4

Mesh

• updateMorphTargets()

WebGLAnimation

Port Three.js WebGLAnimation to AssemblyScript.

Progress tracking in https://github.com/lume/glas/projects/1

WebGLInfo

Port Three.js WebGLInfo to AssemblyScript.

Progress tracking in https://github.com/lume/glas/projects/1

BoxBufferGeometry

Scene

• https://github.com/mrdoob/three.js/blob/dev/src/scenes/Scene.js

• https://github.com/mrdoob/three.js/blob/dev/src/scenes/Scene.d.ts

• https://github.com/mrdoob/three.js/blob/dev/test/unit/src/scenes/Scene.tests.js

• "Scene"

• "Object3D"

• "add"

• "updateMatrixWorld"

• "updateMatrix"

• "addEventListener"

• "onBeforeRender"

• "onAfterRender"

WebGLProperties

LightShadow

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

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.

PointLight

MeshPhongMaterial

Port Three.js MeshPhongMaterial to AssemblyScript.

Project tracking in https://github.com/lume/glas/projects/1

PerspectiveCamera

• constructor
• updateProjectionMatrix
• updateMatrixWorld
• updateMatrix

MeshDistanceMaterial

Port Three.js MeshDistanceMaterial to AssemblyScript.

Progress tracking in https://github.com/lume/glas/projects/1

WebGLUniforms

Uint16BufferAttribute

Camera

• Constructor

WebVRManager

WebGLShader

port the WebGLShader class

WebGLGeometries

Port Three.js WebGLGeometries to AssemblyScript.

Progress tracking in https://github.com/lume/glas/projects/1

utils.js

WebGLObjects

Port Three.js WebGLObjects to AssemblyScript.

Progress tracking in https://github.com/lume/glas/projects/1

Light

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

MeshDepthMaterial

Port Three.js MeshDepthMaterial to AssemblyScript.

Project tracking in https://github.com/lume/glas/projects/1

ArrayCamera

• constructor,
• updateProjectionMatrix

Ray

• https://github.com/mrdoob/three.js/blob/dev/src/math/Ray.js
• https://github.com/mrdoob/three.js/blob/dev/src/math/Ray.d.ts
• https://github.com/mrdoob/three.js/blob/dev/test/unit/src/math/Ray.tests.js

wire up AS-to-JS function passing, write a unit test for it.

Conversation is here: https://discord.com/channels/721472913886281818/721497900932137090/811322629755240528

Basically we need to make an abstraction for passing functions from AS to JS (maybe the other way too, but there's not a need for JS-to-AS right now).

Then we can implement requestAnimationFrame, setTimeout, etc, all callable inside AssemblyScript code.

convert Math.sin/Math.cos into Math.sincos calls for 1.5 to 1.8x perf improvement

(as per the AssemblyScript team)

We need to update AS first.

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.

WebGLPrograms

Port Three.js WebGLPrograms to AssemblyScript.

Progress tracking in https://github.com/lume/glas/projects/1

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

BufferGeometry

BufferAttribute

WebGLRenderList(s)

Frustum

• https://github.com/mrdoob/three.js/blob/dev/src/math/Frustum.js
• https://github.com/mrdoob/three.js/blob/dev/src/math/Frustum.d.ts
• https://github.com/mrdoob/three.js/blob/dev/test/unit/src/math/Frustum.tests.js
• "Frustum"
• "setFromMatrix"
• "intersectsObject"
• "intersectsSphere"

Geometry

BoxGeometry

Base class for Geometry and BufferGeometry with common properties

Create base class for Geometry and BufferGeometry, inheriting from EventDispatcher. Move id, uuid, name, type to the base class.

This might be applicable to any other classes that also have fields like id, type, name, etc.

WebGLRenderStates

Bring stuff in from the Google Doc

Bring stuff in from the Google Doc into the Initial Port project.

WebGLShadowMap

Port Three.js WebGLShadowMap to AssemblyScript.

Progress tracking in https://github.com/lume/glas/projects/1

Material

completed in #74

mention how to import spec files in CONTRIBUTING.md

Need to add a blurb about the test entry points and all spec files being imported.

Porting Three to AssemblyScript!

We are moving the task organization to a project, but currently most stuff is tracked in this Google Doc.

See the project board for more details.

Float32BufferAttribute

WebGLRenderer

WebGLProgram

Port Three.js WebGLProgram to AssemblyScript.

Progress tracking in https://github.com/lume/glas/projects/1

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

Face3

Get the directory structure compatible with Three.js structure...

...eventually, and make the workflow almost the same, with the same docs/examples site, so that we can render everything in a way that's familiar to the existing community?