Kelder/planet-wars
33
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

make renderer use multiple layers

Browse source
This commit is contained in:
ajuvercr 2020-04-20 10:54:21 +02:00
parent da4c7b84b7
commit 55dbd5ff2e
2 changed files with 69 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
frontend/www/src/index.ts
View file

@ -11,6 +11,14 @@ import { defaultLabelFactory, LabelFactory, Align, Label } from "./webgl/text";
import Voronoi = require("./voronoi/voronoi-core"); import Voronoi = require("./voronoi/voronoi-core");
import { VoronoiBuilder } from "./voronoi/voronoi"; import { VoronoiBuilder } from "./voronoi/voronoi";
const LAYERS = {
'vor': -1, // Background
'planet': 1,
'planet_label': 2,
'ship': 3,
'ship_label': 4
}
function f32v(ptr: number, size: number): Float32Array { function f32v(ptr: number, size: number): Float32Array {
return new Float32Array(memory.buffer, ptr, size); return new Float32Array(memory.buffer, ptr, size);
} }
@ -101,8 +109,6 @@ class GameInstance {
last_time = 0; last_time = 0;
frame = -1; frame = -1;
ship_indices: number[];
turn_count = 0; turn_count = 0;
constructor(game: Game, meshes: Mesh[], ship_mesh: Mesh) { constructor(game: Game, meshes: Mesh[], ship_mesh: Mesh) {
@ -138,7 +144,7 @@ class GameInstance {
}; };
this.vor_builder = new VoronoiBuilder(GL, this.vor_shader, planet_points, bbox); this.vor_builder = new VoronoiBuilder(GL, this.vor_shader, planet_points, bbox);
this.renderer.addRenderable(this.vor_builder.getRenderable()); this.renderer.addRenderable(this.vor_builder.getRenderable(), LAYERS.vor);
for (let i = 0; i < this.planet_count; i++) { for (let i = 0; i < this.planet_count; i++) {
{ {
@ -163,7 +169,9 @@ class GameInstance {
{ {
"u_trans": transform, "u_trans": transform,
"u_trans_next": transform, "u_trans_next": transform,
} },
[],
LAYERS.planet
); );
} }
@ -176,13 +184,12 @@ class GameInstance {
const label = this.text_factory.build(GL, transform); const label = this.text_factory.build(GL, transform);
this.planet_labels.push(label); this.planet_labels.push(label);
this.renderer.addRenderable(label.getRenderable()); this.renderer.addRenderable(label.getRenderable(), LAYERS.planet_label);
} }
} }
this.turn_count = game.turn_count(); this.turn_count = game.turn_count();
this.ship_indices = [];
const ship_ibo = new IndexBuffer(GL, ship_mesh.cells); const ship_ibo = new IndexBuffer(GL, ship_mesh.cells);
const ship_positions = new VertexBuffer(GL, ship_mesh.positions); const ship_positions = new VertexBuffer(GL, ship_mesh.positions);
const ship_layout = new VertexBufferLayout(); const ship_layout = new VertexBufferLayout();
@ -191,18 +198,18 @@ class GameInstance {
ship_vao.addBuffer(ship_positions, ship_layout); ship_vao.addBuffer(ship_positions, ship_layout);
for (let i = 0; i < this.game.get_max_ships(); i++) { for (let i = 0; i < this.game.get_max_ships(); i++) {
this.ship_indices.push( this.renderer.addToDraw(
this.renderer.addToDraw( ship_ibo,
ship_ibo, ship_vao,
ship_vao, this.shader,
this.shader, {},
{} [],
) LAYERS.ship
); );
const label = this.text_factory.build(GL); const label = this.text_factory.build(GL);
this.ship_labels.push(label); this.ship_labels.push(label);
this.renderer.addRenderable(label.getRenderable()) this.renderer.addRenderable(label.getRenderable(), LAYERS.ship_label)
} }
// this.vor_shader.uniform(GL, "u_planets", new Uniform3fv(planets)); // this.vor_shader.uniform(GL, "u_planets", new Uniform3fv(planets));
@ -223,9 +230,9 @@ class GameInstance {
for (let i = 0; i < this.planet_count; i++) { for (let i = 0; i < this.planet_count; i++) {
const u = new Uniform3f(colours[i * 6], colours[i * 6 + 1], colours[i * 6 + 2]); const u = new Uniform3f(colours[i * 6], colours[i * 6 + 1], colours[i * 6 + 2]);
this.renderer.updateUniform(2 * i + 1, (us) => us["u_color"] = u); this.renderer.updateUniform(i, (us) => us["u_color"] = u, LAYERS.planet);
const u2 = new Uniform3f(colours[i * 6 + 3], colours[i * 6 + 4], colours[i * 6 + 5]); const u2 = new Uniform3f(colours[i * 6 + 3], colours[i * 6 + 4], colours[i * 6 + 5]);
this.renderer.updateUniform(2 * i + 1, (us) => us["u_color_next"] = u2); this.renderer.updateUniform(i, (us) => us["u_color_next"] = u2, LAYERS.planet);
this.planet_labels[i].setText(GL, "*"+planet_ships[i], Align.Middle, Align.Begin); this.planet_labels[i].setText(GL, "*"+planet_ships[i], Align.Middle, Align.Begin);
} }
@ -237,17 +244,13 @@ class GameInstance {
const ship_colours = f32v(this.game.get_ship_colours(), ship_count * 3); const ship_colours = f32v(this.game.get_ship_colours(), ship_count * 3);
for (let i = 0; i < this.game.get_max_ships(); i++) { for (let i = 0; i < this.game.get_max_ships(); i++) {
const index = this.ship_indices[i];
if (i < ship_count) { if (i < ship_count) {
this.ship_labels[i].setText(GL, ""+ship_counts[i], Align.Middle, Align.Middle); this.ship_labels[i].setText(GL, ""+ship_counts[i], Align.Middle, Align.Middle);
this.renderer.enableRenderable(index); this.renderer.enableRenderable(i, LAYERS.ship);
this.renderer.enableRenderable(index+1); this.renderer.enableRenderable(i, LAYERS.ship_label);
const u = new Uniform3f(ship_colours[i * 3], ship_colours[i * 3 + 1], ship_colours[i * 3 + 2]); const u = new Uniform3f(ship_colours[i * 3], ship_colours[i * 3 + 1], ship_colours[i * 3 + 2]);
// const t1 = new UniformMatrix3fv(new Float32Array(ships, i * 18, 9));
// const t2 = new UniformMatrix3fv(new Float32Array(ships, i * 18 + 9, 9));
const t1 = new UniformMatrix3fv(ships.slice(i * 18, i * 18 + 9)); const t1 = new UniformMatrix3fv(ships.slice(i * 18, i * 18 + 9));
const t2 = new UniformMatrix3fv(ships.slice(i * 18 + 9, i * 18 + 18)); const t2 = new UniformMatrix3fv(ships.slice(i * 18 + 9, i * 18 + 18));
@ -255,21 +258,21 @@ class GameInstance {
const tl1 = new UniformMatrix3fv(labels.slice(i * 18, i * 18 + 9)); const tl1 = new UniformMatrix3fv(labels.slice(i * 18, i * 18 + 9));
const tl2 = new UniformMatrix3fv(labels.slice(i * 18 + 9, i * 18 + 18)); const tl2 = new UniformMatrix3fv(labels.slice(i * 18 + 9, i * 18 + 18));
this.renderer.updateUniform(index, (us) => { this.renderer.updateUniform(i, (us) => {
us["u_color"] = u; us["u_color"] = u;
us["u_color_next"] = u; us["u_color_next"] = u;
us["u_trans"] = t1; us["u_trans"] = t1;
us["u_trans_next"] = t2; us["u_trans_next"] = t2;
}); }, LAYERS.ship);
this.renderer.updateUniform(index+1, (us) => { this.renderer.updateUniform(i, (us) => {
us["u_trans"] = tl1; us["u_trans"] = tl1;
us["u_trans_next"] = tl2; us["u_trans_next"] = tl2;
}); }, LAYERS.ship_label);
} else { } else {
this.renderer.disableRenderable(index); this.renderer.disableRenderable(i, LAYERS.ship);
this.renderer.disableRenderable(index+1); this.renderer.disableRenderable(i, LAYERS.ship_label);
} }
} }
} }

55
frontend/www/src/webgl/renderer.ts
View file

@ -5,6 +5,18 @@ import { VertexArray } from './vertexBufferLayout';
import { Texture } from './texture'; import { Texture } from './texture';
import { Dictionary } from './util'; import { Dictionary } from './util';
function sortedIndex(array, value) {
var low = 0,
high = array.length;
while (low < high) {
var mid = (low + high) >>> 1;
if (array[mid] < value) low = mid + 1;
else high = mid;
}
return low;
}
export interface Renderable { export interface Renderable {
getUniforms() : Dictionary<Uniform>; getUniforms() : Dictionary<Uniform>;
render(gl: WebGLRenderingContext): void; render(gl: WebGLRenderingContext): void;
@ -85,30 +97,38 @@ export class DefaultRenderable implements Renderable {
} }
export class Renderer { export class Renderer {
renderables: [Renderable, boolean][]; renderables: { [id: number] : [Renderable, boolean][]; };
renderable_layers: number[];
constructor() { constructor() {
this.renderables = []; this.renderables = {};
this.renderable_layers = [];
} }
updateUniform(i: number, f: (uniforms: Dictionary<Uniform>) => void) { updateUniform(i: number, f: (uniforms: Dictionary<Uniform>) => void, layer=0, ) {
f(this.renderables[i][0].getUniforms()); f(this.renderables[layer][i][0].getUniforms());
} }
disableRenderable(i: number) { disableRenderable(i: number, layer=0) {
this.renderables[i][1] = false; this.renderables[layer][i][1] = false;
} }
enableRenderable(i: number) { enableRenderable(i: number, layer=0) {
this.renderables[i][1] = true; this.renderables[layer][i][1] = true;
} }
addRenderable(item: Renderable): number { addRenderable(item: Renderable, layer=0): number {
this.renderables.push([item, true]); if(!this.renderables[layer]) {
return this.renderables.length - 1; const idx = sortedIndex(this.renderable_layers, layer);
this.renderable_layers.splice(idx, 0, layer);
this.renderables[layer] = [];
}
this.renderables[layer].push([item, true]);
return this.renderables[layer].length - 1;
} }
addToDraw(indexBuffer: IndexBuffer, vertexArray: VertexArray, shader: Shader, uniforms?: Dictionary<Uniform>, texture?: Texture[]): number { addToDraw(indexBuffer: IndexBuffer, vertexArray: VertexArray, shader: Shader, uniforms?: Dictionary<Uniform>, texture?: Texture[], layer=0): number {
return this.addRenderable( return this.addRenderable(
new DefaultRenderable( new DefaultRenderable(
indexBuffer, indexBuffer,
@ -116,7 +136,7 @@ export class Renderer {
shader, shader,
texture || [], texture || [],
uniforms || {}, uniforms || {},
) ), layer
); );
} }
@ -129,10 +149,11 @@ export class Renderer {
const maxTextures = gl.getParameter(gl.MAX_VERTEX_TEXTURE_IMAGE_UNITS); const maxTextures = gl.getParameter(gl.MAX_VERTEX_TEXTURE_IMAGE_UNITS);
for (let [r, e] of this.renderables) { for (let layer of this.renderable_layers) {
if (!e) continue; for (let [r, e] of this.renderables[layer]) {
r.render(gl); if (!e) continue;
r.render(gl);
}
} }
} }
} }