From 338dc6ac63a2292e191099e3424e7d28bc11f31b Mon Sep 17 00:00:00 2001 From: Ilion Beyst Date: Mon, 18 Jul 2022 21:55:35 +0200 Subject: [PATCH] bugfix: don't cache textures bound to a specific GLContext --- web/pw-visualizer/src/index.ts | 29 ++++++++++++++------------ web/pw-visualizer/src/webgl/texture.ts | 28 +++++++++++++------------ 2 files changed, 31 insertions(+), 26 deletions(-) diff --git a/web/pw-visualizer/src/index.ts b/web/pw-visualizer/src/index.ts index bee1bab..4231707 100644 --- a/web/pw-visualizer/src/index.ts +++ b/web/pw-visualizer/src/index.ts @@ -24,7 +24,7 @@ import { VertexBufferLayout, VertexArray } from "./webgl/vertexBufferLayout"; import { defaultLabelFactory, LabelFactory, Align, Label } from "./webgl/text"; import { VoronoiBuilder } from "./voronoi/voronoi"; import * as assets from "./assets"; -import { Texture } from "./webgl/texture"; +import { loadImage, Texture } from "./webgl/texture"; function to_bbox(box: number[]): BBox { @@ -585,16 +585,16 @@ export class GameInstance { } var game_instance: GameInstance; -var textures: Texture[]; +var texture_images: HTMLImageElement[]; var shaders: Dictionary; export async function set_instance(source: string): Promise { - // TODO: embed shader programs - if (!textures || !shaders) { - const texture_promises = [ - Texture.fromImage(GL, assets.fontPng, "font"), - Texture.fromImage(GL, assets.shipPng, "ship"), - Texture.fromImage(GL, assets.earthPng, "earth") + // TODO: this loading code is a mess. Please clean me up! + if (!texture_images || !shaders) { + const image_promises = [ + loadImage(assets.fontPng), + loadImage(assets.shipPng), + loadImage(assets.earthPng), ]; const shader_promies = [ @@ -633,8 +633,8 @@ export async function set_instance(source: string): Promise { ]; let shaders_array: [string, ShaderFactory][]; - [textures, shaders_array] = await Promise.all([ - Promise.all(texture_promises), + [texture_images, shaders_array] = await Promise.all([ + Promise.all(image_promises), Promise.all(shader_promies), ]); @@ -643,12 +643,15 @@ export async function set_instance(source: string): Promise { } resizeCanvasToDisplaySize(CANVAS); + const fontTexture = Texture.fromImage(GL, texture_images[0], "font"); + const shipTexture = Texture.fromImage(GL, texture_images[1], "ship"); + const earthTexture = Texture.fromImage(GL, texture_images[2], "earth"); game_instance = new GameInstance( Game.new(source), - textures.slice(2), - textures[1], - textures[0], + [earthTexture], + shipTexture, + fontTexture, shaders ); diff --git a/web/pw-visualizer/src/webgl/texture.ts b/web/pw-visualizer/src/webgl/texture.ts index faafe76..9624489 100644 --- a/web/pw-visualizer/src/webgl/texture.ts +++ b/web/pw-visualizer/src/webgl/texture.ts @@ -1,5 +1,15 @@ import type { Renderer } from "./renderer"; + +export function loadImage(image_url: string): Promise { + return new Promise((resolve, reject) => { + const image = new Image(); + image.onload = () => { resolve(image) } + image.onerror = reject; + image.src = image_url; + }) +} + export class Texture { texture: WebGLTexture; width: number; @@ -9,20 +19,12 @@ export class Texture { static fromImage( gl: WebGLRenderingContext, - path: string, + image: HTMLImageElement, name: string, - ): Promise { - return new Promise((resolve, reject) => { - const out = new Texture(gl, name); - - const image = new Image(); - image.onload = () => { - out.setImage(gl, image); - resolve(out); - } - image.onerror = reject; - image.src = path; - }) + ): Texture { + const tx = new Texture(gl, name); + tx.setImage(gl, image); + return tx; } static fromRenderer(