diff --git a/frontend/www/src/index.ts b/frontend/www/src/index.ts index 805c989..3bb8993 100644 --- a/frontend/www/src/index.ts +++ b/frontend/www/src/index.ts @@ -60,6 +60,7 @@ GL.clear(GL.COLOR_BUFFER_BIT); GL.enable(GL.BLEND); GL.blendFunc(GL.SRC_ALPHA, GL.ONE_MINUS_SRC_ALPHA); +// TODO: fix this var SHADERFACOTRY: ShaderFactory; ShaderFactory.create_factory( LOCATION + "static/shaders/frag/simple.glsl", LOCATION + "static/shaders/vert/simple.glsl" @@ -180,8 +181,8 @@ class GameInstance { ]); const label = this.text_factory.build(GL, transform); - this.renderer.addRenderable(label); this.planet_labels.push(label); + this.renderer.addRenderable(label.getRenderable()); } } @@ -207,7 +208,7 @@ class GameInstance { const label = this.text_factory.build(GL); this.ship_labels.push(label); - this.renderer.addRenderable(label) + this.renderer.addRenderable(label.getRenderable()) } this.vor_shader.uniform(GL, "u_planets", new Uniform3fv(planets)); @@ -247,8 +248,8 @@ class GameInstance { this.ship_labels[i].setText(GL, ""+ship_counts[i], Align.Middle, Align.Middle); - this.renderer.enableRendershit(index); - this.renderer.enableRendershit(index+1); + this.renderer.enableRenderable(index); + this.renderer.enableRenderable(index+1); 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)); @@ -273,8 +274,8 @@ class GameInstance { }); } else { - this.renderer.disableRenderShift(index); - this.renderer.disableRenderShift(index+1); + this.renderer.disableRenderable(index); + this.renderer.disableRenderable(index+1); } } } diff --git a/frontend/www/src/webgl/instance.ts b/frontend/www/src/webgl/instance.ts deleted file mode 100644 index 6020940..0000000 --- a/frontend/www/src/webgl/instance.ts +++ /dev/null @@ -1,84 +0,0 @@ -import { Renderable } from './renderer'; -import { Shader, Uniform } from './shader'; -import { Dictionary } from './util'; - -function createAndSetupTexture(gl: WebGLRenderingContext): WebGLTexture { - var texture = gl.createTexture(); - gl.bindTexture(gl.TEXTURE_2D, texture); - - // Set up texture so we can render any size image and so we are - // working with pixels. - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); - - return texture; -} - -export class Foo implements Renderable { - uniforms: Dictionary; - - stages: Stage[]; - - textures: WebGLTexture[]; - framebuffers: WebGLFramebuffer[]; - - width: number; - height: number; - - - constructor(gl: WebGLRenderingContext, width: number, height: number) { - this.uniforms = {}; - this.width = width; - this.height = height; - - for (let ii = 0; ii < 2; ++ii) { - const texture = createAndSetupTexture(gl); - this.textures.push(texture); - - // make the texture the same size as the image - gl.texImage2D( - gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, - gl.RGBA, gl.UNSIGNED_BYTE, null); - - // Create a framebuffer - const fbo = gl.createFramebuffer(); - this.framebuffers.push(fbo); - gl.bindFramebuffer(gl.FRAMEBUFFER, fbo); - - // Attach a texture to it. - gl.framebufferTexture2D( - gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0); - } - } - - getUniforms(): Dictionary { - return this.uniforms; - } - - render(gl: WebGLRenderingContext) { - this.stages.forEach( (item, i) => { - gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffers[i%2]); - item.render(gl); - gl.bindTexture(gl.TEXTURE_2D, this.textures[i % 2]); - }); - } -} - -class Stage implements Renderable { - program: Shader; - uniforms: Dictionary; - - getUniforms(): Dictionary { - return this.uniforms; - } - - render(gl: WebGLRenderingContext) { - this.program.bind(gl); - - for (let name in this.uniforms) { - this.program.uniform(gl, name, this.uniforms[name]); - } - } -} diff --git a/frontend/www/src/webgl/renderer.ts b/frontend/www/src/webgl/renderer.ts index b9e2f9f..0953b81 100644 --- a/frontend/www/src/webgl/renderer.ts +++ b/frontend/www/src/webgl/renderer.ts @@ -8,9 +8,11 @@ import { Dictionary } from './util'; export interface Renderable { getUniforms() : Dictionary; render(gl: WebGLRenderingContext): void; + updateVAOBuffer(gl: WebGLRenderingContext, index: number, data: number[]); + updateIndexBuffer(gl: WebGLRenderingContext, data: number[]); } -export class RenderShit implements Renderable { +export class DefaultRenderable implements Renderable { ibo: IndexBuffer; va: VertexArray; shader: Shader; @@ -35,6 +37,14 @@ export class RenderShit implements Renderable { return this.uniforms; } + updateVAOBuffer(gl: WebGLRenderingContext, index: number, data: number[]) { + this.va.updateBuffer(gl, index, data); + } + + updateIndexBuffer(gl: WebGLRenderingContext, data: number[]) { + this.ibo.updateData(gl, data); + } + render(gl: WebGLRenderingContext): void { const indexBuffer = this.ibo; @@ -85,11 +95,11 @@ export class Renderer { f(this.renderables[i][0].getUniforms()); } - disableRenderShift(i: number) { + disableRenderable(i: number) { this.renderables[i][1] = false; } - enableRendershit(i: number) { + enableRenderable(i: number) { this.renderables[i][1] = true; } @@ -100,7 +110,7 @@ export class Renderer { addToDraw(indexBuffer: IndexBuffer, vertexArray: VertexArray, shader: Shader, uniforms?: Dictionary, texture?: Texture[]): number { return this.addRenderable( - new RenderShit( + new DefaultRenderable( indexBuffer, vertexArray, shader, diff --git a/frontend/www/src/webgl/text.ts b/frontend/www/src/webgl/text.ts index ce72cb0..2732f11 100644 --- a/frontend/www/src/webgl/text.ts +++ b/frontend/www/src/webgl/text.ts @@ -1,6 +1,6 @@ import { Texture } from "./texture"; import { Dictionary } from "./util"; -import { Renderable, RenderShit } from "./renderer"; +import { Renderable, DefaultRenderable } from "./renderer"; import { Uniform, Shader, UniformMatrix3fv } from "./shader"; import { IndexBuffer, VertexBuffer } from "./buffer"; import { VertexBufferLayout, VertexArray } from "./vertexBufferLayout"; @@ -43,10 +43,8 @@ export class LabelFactory { } } -export class Label implements Renderable { - inner: Renderable; - ib: IndexBuffer; - vb: VertexBuffer; +export class Label { + inner: DefaultRenderable; font: FontInfo; @@ -54,25 +52,21 @@ export class Label implements Renderable { this.font = font; const uniforms = transform ? { "u_trans": transform, "u_trans_next": transform, } : {}; - this.ib = new IndexBuffer(gl, []); - this.vb = new VertexBuffer(gl, []); + const ib = new IndexBuffer(gl, []); + const vb = new VertexBuffer(gl, []); const layout = new VertexBufferLayout(); layout.push(gl.FLOAT, 2, 4, "a_position"); layout.push(gl.FLOAT, 2, 4, "a_texCoord"); const vao = new VertexArray(); - vao.addBuffer(this.vb, layout); + vao.addBuffer(vb, layout); - this.inner = new RenderShit(this.ib, vao, shader, [tex], uniforms); + this.inner = new DefaultRenderable(ib, vao, shader, [tex], uniforms); } - getUniforms(): Dictionary { - return this.inner.getUniforms(); - } - - render(gl: WebGLRenderingContext): void { - return this.inner.render(gl); + getRenderable(): DefaultRenderable { + return this.inner; } setText(gl: WebGLRenderingContext, text: string, h_align = Align.Begin, v_align = Align.Begin) { @@ -126,8 +120,8 @@ export class Label implements Renderable { } } - this.ib.updateData(gl, idxs); - this.vb.updateData(gl, verts); + this.inner.updateIndexBuffer(gl, idxs); + this.inner.updateVAOBuffer(gl, 0, verts); } } diff --git a/frontend/www/src/webgl/vertexBufferLayout.ts b/frontend/www/src/webgl/vertexBufferLayout.ts index 22fd868..66a1576 100644 --- a/frontend/www/src/webgl/vertexBufferLayout.ts +++ b/frontend/www/src/webgl/vertexBufferLayout.ts @@ -1,4 +1,4 @@ -import { Buffer, VertexBuffer } from './buffer'; +import { VertexBuffer } from './buffer'; import { Shader } from './shader'; export class VertexBufferElement { @@ -59,7 +59,7 @@ export class VertexBufferLayout { // glVertexAttribPointer tells gl that that data is at which location in the supplied data export class VertexArray { // There is no renderer ID, always at bind buffers and use glVertexAttribPointer - buffers: Buffer[]; + buffers: VertexBuffer[]; layouts: VertexBufferLayout[]; constructor() { @@ -72,6 +72,10 @@ export class VertexArray { this.layouts.push(layout); } + updateBuffer(gl: WebGLRenderingContext, index: number, data: number[]) { + this.buffers[index].updateData(gl, data); + } + /// Bind buffers providing program data bind(gl: WebGLRenderingContext, shader: Shader) { shader.bind(gl); @@ -94,7 +98,7 @@ export class VertexArray { element.normalized, layout.stride, offset ); } - + offset += element.amount * element.type_size; } } @@ -109,4 +113,3 @@ export class VertexArray { }) } } -