From 270476e0387201c85aa686254eb2f4a33205b7d1 Mon Sep 17 00:00:00 2001 From: Ilion Beyst Date: Mon, 18 Jul 2022 07:40:01 +0200 Subject: [PATCH] use texture for rendering planets --- web/pw-visualizer/assets/res/earth.png | Bin 0 -> 12873 bytes .../assets/shaders/frag/image.glsl | 1 - .../assets/shaders/frag/masked_image.glsl | 21 +++ web/pw-visualizer/src/assets.ts | 4 + web/pw-visualizer/src/index.ts | 164 ++++++++++-------- web/pw-visualizer/src/webgl/index.ts | 2 +- 6 files changed, 113 insertions(+), 79 deletions(-) create mode 100644 web/pw-visualizer/assets/res/earth.png create mode 100644 web/pw-visualizer/assets/shaders/frag/masked_image.glsl diff --git a/web/pw-visualizer/assets/res/earth.png b/web/pw-visualizer/assets/res/earth.png new file mode 100644 index 0000000000000000000000000000000000000000..7897e3249f1c5895adfc7a698434875fcd353d7b GIT binary patch literal 12873 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 literal 0 HcmV?d00001 diff --git a/web/pw-visualizer/assets/shaders/frag/image.glsl b/web/pw-visualizer/assets/shaders/frag/image.glsl index 69c8b91..f8d62c9 100644 --- a/web/pw-visualizer/assets/shaders/frag/image.glsl +++ b/web/pw-visualizer/assets/shaders/frag/image.glsl @@ -10,5 +10,4 @@ uniform sampler2D u_texture; void main() { gl_FragColor = texture2D(u_texture, v_texCoord); -// gl_FragColor = vec4(0.7, 0.7, 0.0, 1.0); } diff --git a/web/pw-visualizer/assets/shaders/frag/masked_image.glsl b/web/pw-visualizer/assets/shaders/frag/masked_image.glsl new file mode 100644 index 0000000..da0c787 --- /dev/null +++ b/web/pw-visualizer/assets/shaders/frag/masked_image.glsl @@ -0,0 +1,21 @@ +#ifdef GL_ES +precision mediump float; +#endif + +// Passed in from the vertex shader. +varying vec2 v_texCoord; + +uniform float u_step_interval; +uniform float u_time; +uniform vec3 u_color; +uniform vec3 u_color_next; + + +// The texture. +uniform sampler2D u_texture; + +void main() { + float alpha = texture2D(u_texture, v_texCoord).a; + vec3 color = mix(u_color, u_color_next, u_time); + gl_FragColor = vec4(color, alpha); +} diff --git a/web/pw-visualizer/src/assets.ts b/web/pw-visualizer/src/assets.ts index e04f2c1..be155c5 100644 --- a/web/pw-visualizer/src/assets.ts +++ b/web/pw-visualizer/src/assets.ts @@ -4,9 +4,13 @@ export {default as earthSvg} from "../assets/res/earth.svg"; export {default as marsSvg} from "../assets/res/mars.svg"; export {default as venusSvg} from "../assets/res/venus.svg"; +export {default as earthPng} from "../assets/res/earth.png"; + export {default as fontPng} from "../assets/res/font.png"; export {default as imageFragmentShader} from "../assets/shaders/frag/image.glsl?url"; +export {default as maskedImageFragmentShader} from "../assets/shaders/frag/masked_image.glsl?url"; + export {default as simpleFragmentShader} from "../assets/shaders/frag/simple.glsl?url"; export {default as vorFragmentShader} from "../assets/shaders/frag/vor.glsl?url"; diff --git a/web/pw-visualizer/src/index.ts b/web/pw-visualizer/src/index.ts index cd58aa7..6f2c1b4 100644 --- a/web/pw-visualizer/src/index.ts +++ b/web/pw-visualizer/src/index.ts @@ -22,12 +22,13 @@ import { UniformMatrix3fv, UniformBool, } from "./webgl/shader"; -import { Renderer } from "./webgl/renderer"; +import { DefaultRenderable, Renderer } from "./webgl/renderer"; import { VertexBuffer, IndexBuffer } from "./webgl/buffer"; 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"; function to_bbox(box: number[]): BBox { @@ -133,6 +134,7 @@ export class GameInstance { shader: Shader; vor_shader: Shader; image_shader: Shader; + masked_image_shader: Shader; text_factory: LabelFactory; planet_labels: Label[]; @@ -174,6 +176,7 @@ export class GameInstance { this.vor_shader = shaders["vor"].create_shader(GL, { PLANETS: "" + planets.length, }); + this.masked_image_shader = shaders["masked_image"].create_shader(GL); this.text_factory = defaultLabelFactory(GL, this.image_shader); this.planet_labels = []; @@ -234,45 +237,53 @@ export class GameInstance { } _create_planets(planets: Float32Array, meshes: Mesh[]) { + const earth = Texture.fromImage(GL, assets.earthPng, 'earth'); + for (let i = 0; i < this.planet_count; i++) { { const transform = new UniformMatrix3fv([ - 1, - 0, - 0, - 0, - 1, - 0, - -planets[i * 3], - -planets[i * 3 + 1], - 1, + 1, 0, 0, + 0, 1, 0, + -planets[i * 3], -planets[i * 3 + 1], 1, // TODO: why are negations needed? ]); - const indexBuffer = new IndexBuffer( - GL, - meshes[i % meshes.length].cells - ); - const positionBuffer = new VertexBuffer( - GL, - meshes[i % meshes.length].positions - ); - - const layout = new VertexBufferLayout(); - layout.push(GL.FLOAT, 3, 4, "a_position"); + const gl = GL; + const ib = new IndexBuffer(gl, [ + 0, 1, 2, + 1, 2, 3 + ]); + const vb_pos = new VertexBuffer(gl, [ + -1, 1, + 1, 1, + -1, -1, + 1, -1 + ]); + const vb_tex = new VertexBuffer(gl, [ + 0, 0, + 1, 0, + 0, 1, + 1, 1]); + + const layout_pos = new VertexBufferLayout(); + // 2? + layout_pos.push(gl.FLOAT, 2, 4, "a_position"); + + const layout_tex = new VertexBufferLayout(); + layout_tex.push(gl.FLOAT, 2, 4, "a_texCoord"); + const vao = new VertexArray(); - vao.addBuffer(positionBuffer, layout); - - this.renderer.addToDraw( - indexBuffer, - vao, - this.shader, - { - u_trans: transform, - u_trans_next: transform, - }, - [], - LAYERS.planet - ); + vao.addBuffer(vb_pos, layout_pos); + vao.addBuffer(vb_tex, layout_tex); + + const uniforms = { + u_trans: transform, + u_trans_next: transform, + }; + + const renderable = new DefaultRenderable(ib, vao, this.masked_image_shader, [earth], uniforms); + + this.renderer.addRenderable(renderable, LAYERS.planet); + } { @@ -430,25 +441,30 @@ export class GameInstance { this.use_vor = false; } + const shaders_to_update = [ + this.shader, + this.image_shader, + this.masked_image_shader, + ]; + + // If not playing, still reder with different viewbox, so people can still pan etc. if (!this.playing) { this.last_time = time; - this.shader.uniform( - GL, - "u_viewbox", - new Uniform4f(this.resizer.get_viewbox()) - ); + shaders_to_update.forEach((shader) => { + shader.uniform( + GL, + "u_viewbox", + new Uniform4f(this.resizer.get_viewbox()) + ); + }) + this.vor_shader.uniform( GL, "u_viewbox", new Uniform4f(this.resizer.get_viewbox()) ); - this.image_shader.uniform( - GL, - "u_viewbox", - new Uniform4f(this.resizer.get_viewbox()) - ); this.renderer.render(GL); return; @@ -481,39 +497,24 @@ export class GameInstance { this.vor_shader.uniform(GL, "u_resolution", new Uniform2f(RESOLUTION)); this.vor_shader.uniform(GL, "u_vor", new UniformBool(this.use_vor)); - this.shader.uniform( - GL, - "u_time", - new Uniform1f((time - this.last_time) / ms_per_frame) - ); - this.shader.uniform( - GL, - "u_mouse", - new Uniform2f(this.resizer.get_mouse_pos()) - ); - this.shader.uniform( - GL, - "u_viewbox", - new Uniform4f(this.resizer.get_viewbox()) - ); - this.shader.uniform(GL, "u_resolution", new Uniform2f(RESOLUTION)); - - this.image_shader.uniform( - GL, - "u_time", - new Uniform1f((time - this.last_time) / ms_per_frame) - ); - this.image_shader.uniform( - GL, - "u_mouse", - new Uniform2f(this.resizer.get_mouse_pos()) - ); - this.image_shader.uniform( - GL, - "u_viewbox", - new Uniform4f(this.resizer.get_viewbox()) - ); - this.image_shader.uniform(GL, "u_resolution", new Uniform2f(RESOLUTION)); + shaders_to_update.forEach((shader) => { + shader.uniform( + GL, + "u_time", + new Uniform1f((time - this.last_time) / ms_per_frame) + ); + shader.uniform( + GL, + "u_mouse", + new Uniform2f(this.resizer.get_mouse_pos()) + ); + shader.uniform( + GL, + "u_viewbox", + new Uniform4f(this.resizer.get_viewbox()) + ); + shader.uniform(GL, "u_resolution", new Uniform2f(RESOLUTION)); + }); // Render this.renderer.render(GL); @@ -616,6 +617,15 @@ export async function set_instance(source: string): Promise { assets.simpleVertexShader, ), ])(), + (async () => + <[string, ShaderFactory]>[ + "masked_image", + await ShaderFactory.create_factory( + assets.maskedImageFragmentShader, + assets.simpleVertexShader, + ), + ])(), + ]; let shaders_array: [string, ShaderFactory][]; [meshes, shaders_array] = await Promise.all([ diff --git a/web/pw-visualizer/src/webgl/index.ts b/web/pw-visualizer/src/webgl/index.ts index 1742713..8d785ef 100644 --- a/web/pw-visualizer/src/webgl/index.ts +++ b/web/pw-visualizer/src/webgl/index.ts @@ -57,8 +57,8 @@ async function main() { return; } + // TODO: do we still need this? const mesh = await url_to_mesh("static/res/images/earth.svg"); - console.log(Math.max(...mesh.positions), Math.min(...mesh.positions)); const renderer = new Renderer(); const factory = await ShaderFactory.create_factory(assets.simpleFragmentShader, assets.simpleVertexShader);