An open API service indexing awesome lists of open source software.

https://github.com/sharpcoder/webgl-engine

A webGL game engine
https://github.com/sharpcoder/webgl-engine

Last synced: 7 months ago
JSON representation

A webGL game engine

Awesome Lists containing this project

README

          

# webgl-engine

WebGL Engine is a typescript library for making games! It is intended as a learning platform to grow my openGL knowledge,
as such, it's probably only useful for game jams and education. A lot of the concepts come from the wonderful [WebGL Fundamentals](https://webglfundamentals.org/)
but the engine itself is my own construct. I've taken their ideas and adapted it to something a little reusable.

## Installation

Hmm, maybe copy the code and include it? This isn't published to npm, although, you can reference it in your package.json
with a little bit of magic. This is how I do it for other projects:

```
"dependencies": {
"webgl-engine": "git+git@github.com:SharpCoder/webgl-engine.git"
},
```

## Usage

```
import { Engine, Scene, cuboid, rads, Repeat, Vec3 } from 'webgl-engine';

// In your project, something like this
let engine = new Engine();

// Register the scenes
const DemoScene = new Scene({
title: 'demo'
});

const RANGE = 2000;
for (let i = 0; i < 300; i++) {
const positions = [
Math.random() * RANGE - Math.random() * RANGE,
Math.random() * RANGE - Math.random() * RANGE,
Math.random() * RANGE - Math.random() * RANGE,
];

const scale = Math.random() * 50 + 10;
DemoScene.addObject({
position: positions,
vertexes: cuboid(scale, scale, scale),
dimensions: [scale, scale, scale],
offsets: [-scale / 2, -scale / 2, -scale / 2],
properties: {
rx: Math.random() * 20 + 2,
ry: Math.random() * 20 + 2,
},
colors: Flatten([
Repeat(Vec3(0, 199, 255), 6),
Repeat(Vec3(255, 0, 199), 6),
Repeat(Vec3(199, 255, 0), 6),
Repeat(Vec3(0, 255, 222), 6),
Repeat(Vec3(222, 0, 255), 6),
Repeat(Vec3(255, 222, 0), 6),
]),
update: function (t: number) {
this.rotation[0] += rads((t * 1) / this.properties.rx);
this.rotation[1] += rads((-t * 1) / this.properties.ry);
},
rotation: [
rads(Math.random() * 360),
rads(Math.random() * 360),
rads(Math.random() * 360),
],
});
}

engine.addScene(DemoScene);

function draw() {
engine.draw();
requestAnimationFrame(draw.bind(this));
}

function update() {
engine.update();
requestAnimationFrame(update.bind(this));
}

draw();
update();
```

## Contributing

I'm not sure anyone will want to contribute, but if you are so inspired, I'd gladly encourage discussions through
the issues feature on github.

## License

[MIT](https://choosealicense.com/licenses/mit/)