UON ENGINE

A simple WebGL2 (and WebGL1!) game engine framework

Usage

npm i @uon/engine

Display

A collection of object-oriented WebGL2 wrappers, shader/material system and command system.

Commands

Rendering in @uon/engine works with command buffers and commands.

Commands are responsible for keeping the command data and issuing state changes to the GL context.

// create a display contextconstcontext=newDisplayContext({canvas: canvas_el_ref});// create a command bufferconstcmd_buffer=newCommandBuffer(context);// create a clear commandconstclear_cmd=newClearCommand();clear_cmd.color.g=1.0;// set clear color to bright greencmd_buffer.add(clear_cmd);// add the command to the buffer// submit the command buffer to the pipelinecmd_buffer.submit();

We provide basic commands to get you started:

• ClearCommand
• SetViewportCommand
• DrawArraysCommand
• DrawElementsCommand
• SetMaterialCommand
• SetUniformsCommand

Implementing you own commands

You can easily implement your own command by implementing the following interface:

exportinterfaceCommandLike{/** * Submit state changes to gl */call: (context: DisplayContext)=>void;/** * Prepare the command, this is called only once on * CommandBuffer.add() */compile?: (context: DisplayContext)=>void;/** * Do clean up, called on CommandBuffer.remove() */destroy?: (context: DisplayContext)=>void;}

Shaders & Materials

@uon/engine provides mechanisms to generate shaders using typescript decorators. You can define shader parts with @ShaderDeclaration and then combine them with @Material.

Declaring shader parts

import{ShaderDeclaration,ShaderDataType}from'@uon/engine';
@ShaderDeclaration({vin: [{name: "POSITION",type: ShaderDataType.vec3,location: 0},{name: "NORMAL",type: ShaderDataType.vec3,location: 1},{name: "TEXCOORD",type: ShaderDataType.vec2,location: 2}]})exportclassDefaultShaderInputs{}
@ShaderDeclaration({deps: [DefaultShaderInputs],uniform: [{name: 'u_World',type: ShaderDataType.mat4},{name: 'u_ViewProjection',type: ShaderDataType.mat4}],vout: [{name: 'v_Texcoord',type: ShaderDataType.vec2},],vs: ` vec4 wp = u_World * vec4(POSITION, 1.0); gl_Position = u_ViewProjection * wp; v_Texcoord = TEXCOORD; `})exportclassShaderDefaultTransform{}
@ShaderDeclaration({deps: [ShaderDefaultTransform],uniform: [{name: 'u_Texture1',type: ShaderDataType.sampler2D}],fout: [{name: 'o_Color',type: ShaderDataType.vec4}],fs: 'o_Color = texture(u_Texture1, v_Texcoord);'})exportclassShaderTextureSample{}

Creating materials from shader declarations

import{Material,Uniform,Texture2D}from'@uon/engine';
@Material({imports: [ShaderTextureSample]})exportclassTextureMaterial{
@Uniform()u_Texture1: Texture2D;}

Note that we did not set u_World and U_ViewProjection as uniforms in the material. Instead we recommend that you manage these uniforms separate from materials and use a SetUniformsCommand.

World

An implementation of Entity-Component-System.

The World class provides the interface to manage entities, their components and the systems used to update them.

Example:

import{World,Transform3D,TransformSystem3D}from'@uon/engine';letworld=newWorld([TransformSystem3D]);letentity=world.createEntity();lettransform=world.addComponent(entity,Transform3D);transform.translation.set(0,10,0);transform.dirty=true;world.update();

To be continued...