Merge pull request #18 from Absulit/dev

texture optimizations

Author: Absulit

src/main.js

@@ -4,7 +4,7 @@ import frag0 from './renderpasses/renderpass0/frag.js';
 import vert from './renderpasses/renderpass0/vert.js';
 import * as dat from 'datgui';
 import { Dexie } from 'https://unpkg.com/dexie/dist/modern/dexie.mjs';
-import { countImageColors, readTags, strToCodes } from './utils.js';
+import { countImageColors, loadImage, readTags, sprite, strToCodes, strToImage } from './utils.js';
 
 /**
  * @type {Points}
@@ -47,17 +47,21 @@ function clickSong() {
     playSong(this);
 }
 
-function playSong(song) {
+async function playSong(song) {
     const { file } = song;
     points.setUniform('showMessage', 0);
     const audioUrl = URL.createObjectURL(file);
     const name = song?.name || file.name;
-    const title = song?.title || name;
+    const title = name;
 
     audio && audio.pause() && (audio = null);
     audio = points.setAudio('audio', audioUrl, options.volume, false, false);
     points.setUniform('numChars', title.length < MAXCHARS ? title.length : MAXCHARS);
-    points.setStorageMap('chars', strToCodes(title));
+    // points.setStorageMap('chars', strToCodes(title));
+
+    const songNameImg = strToImage(title, atlas, size);
+    await points.setTextureImage('songName', songNameImg);
+
     let artworkLoaded = 0;
     song?.artworkColors && points.setStorageMap('artworkColors', song?.artworkColors.flat());
     song?.artworkColors && (artworkLoaded = 1);
@@ -129,7 +133,8 @@ async function onCompleteTags(result) {
     const { tag, song } = result;
     const { file } = song;
     const { title, album, picture } = tag.tags;
-    const name = `${title} - ${album}`
+    const albumExists = album?` - ${album}`: '';
+    const name = `${title}${albumExists}`
     let artworkImageUrl = null;
     let artworkColors = null;
 
@@ -147,7 +152,7 @@ async function onCompleteTags(result) {
     }
 
     song.name = name || file.name;
-    song.title = title || name;
+    song.title = name;
 
 
     if (!song.default) {
@@ -162,7 +167,10 @@ async function onCompleteTags(result) {
 
     folderSongs.add(song, 'fn').name(song.name);
     points.setUniform('numChars', title.length < MAXCHARS ? title.length : MAXCHARS);
-    points.setStorageMap('chars', strToCodes(title));
+    // points.setStorageMap('chars', strToCodes(title));
+
+    const songNameImg = strToImage(title, atlas, size);
+    await points.setTextureImage('songName', songNameImg);
 }
 
 async function onErrorTags(response) {
@@ -333,11 +341,24 @@ points.setUniform('progress', 0);
 points.setUniform('artworkLoaded', 0);
 // points.setUniform('somecolor', colors.color2, 'vec3f');
 points.setUniform('numChars', 12);
-points.setStorageMap('chars', strToCodes('Gravity Pull'), 'array<f32>')// TODO: setStorageMap doesn't work with u32 wrong sized
-points.setStorageMap('message', strToCodes('Select a song to Play'), 'array<f32>')// TODO: setStorageMap doesn't work with u32 wrong sized
+// points.setStorageMap('chars', strToCodes('Gravity Pull'), 'array<f32>')// TODO: setStorageMap doesn't work with u32 wrong sized
 points.setStorageMap('artworkColors', Array(16).fill(1), 'array<vec4f>');
 points.setStorage('variables', 'Variables');
 await points.setTextureImage('font', './src/img/inconsolata_regular_8x22.png');
+
+
+
+const size = { x: 8, y: 22 };
+const atlas =  await loadImage('src/img/inconsolata_regular_8x22.png');
+const messageStringImg = strToImage('Select a song to Play', atlas, size);
+await points.setTextureImage('messageString', messageStringImg);
+
+
+
+const songNameImg = strToImage('Gravity Pull', atlas, size);
+await points.setTextureImage('songName', songNameImg);
+
+
 const renderPasses = [
     new RenderPass(vert, frag0, null),
 ];
@@ -432,4 +453,4 @@ async function loadSongFromURL() {
     window.history.replaceState(null, '', url.toString());
 }
 
-loadSongFromURL()
+loadSongFromURL()

src/renderpasses/renderpass0/frag.js

@@ -238,30 +238,16 @@ fn main(
     var stringMask = 0.;
     var stringMask2 = 0.;
     let textScale = 2.476 * ratio.y + c0;
-    let textUVR = uvr / textScale;
-    let spaceRatio = .0017 * ratio.x;
-
-    for (var index = 0; index < i32(params.numChars); index++) {
-        let indexF32 = f32(index);
-        let charIndex = u32(chars[index]);
-        let charPosition = charSizeF32 * vec2(indexF32, 0);
-        let space = spaceRatio * vec2(indexF32, 0);
-        let sfPcP = space + fontPosition + charPosition;
-        let cIcO = charIndex - charOffset;
-        stringMask += sprite(font, textImageSampler, sfPcP, textUVR, cIcO, charSize).x;
-        stringMask2 += sprite(font, textImageSampler, sfPcP, textUVR + .0005, cIcO, charSize).x;
-    }
+    var textUVR = uvr / textScale;
+
+    stringMask = texturePosition(songName, textImageSampler, fontPosition, textUVR, false).r;
+    stringMask2 = texturePosition(songName, textImageSampler, fontPosition, textUVR + .0005, false).r;
 
     var messageStringMask = 0.;
     if(params.showMessage == 1.){
         let messagePosition = vec2(.15, .19) * ratio;
-        for (var index = 0; index < 21; index++) {
-            let indexF32 = f32(index);
-            let charIndex = u32(message[index]);
-            let charPosition = charSizeF32 * vec2(indexF32, sin(params.time + indexF32 * .1));
-            let space = spaceRatio * vec2(indexF32, 0);
-            messageStringMask += sprite(font, textImageSampler, space + messagePosition + charPosition, textUVR, charIndex - charOffset, charSize).x;
-        }
+        textUVR = vec2f(textUVR.x, textUVR.y + sin(params.time + textUVR.x * 10 ) * .01);
+        messageStringMask = texturePosition(messageString, textImageSampler, messagePosition, textUVR, false).r;
     }
 
 

src/utils.js

@@ -60,3 +60,52 @@ export async function countImageColors(src) {
 
     });
 }
+
+/**
+ *
+ * @param {Image} atlas Image atlas to parse
+ * @param {CanvasRenderingContext2D} ctx Canvas context
+ * @param {Number} index index in the atlas, so 0 is the first char
+ * @param {Object} size cell dimensions
+ * @param {Number} finalIndex final positional index in the canvas
+ */
+export function sprite(atlas, ctx, index, size, finalIndex) {
+    const { width } = atlas;
+    const numColumns = width / size.x
+
+    const x = index % numColumns;
+    const y = Math.floor(index / numColumns);
+
+    ctx.drawImage(
+        atlas,
+        x * size.x,
+        y * size.y,
+        size.x,
+        size.y,
+
+        size.x * finalIndex,
+        0,
+
+        size.x,
+        size.y);
+}
+
+export function strToImage(str, atlasImg, size){
+    const chars = strToCodes(str);
+    const canvas = document.createElement('canvas');
+    canvas.width = chars.length * size.x;
+    canvas.height = size.y;
+    const ctx = canvas.getContext('2d');
+
+    chars.forEach((c, i) => sprite(atlasImg, ctx, c - 32, size, i));
+    return canvas.toDataURL('image/png');
+}
+
+export async function loadImage(src) {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.src = src;
+        img.onload = () => resolve(img);
+        img.onerror = err => reject(err);
+    });
+}