From 0db1093e8fb20abf41a34dfa4912d6e8e82b0e46 Mon Sep 17 00:00:00 2001 From: Mononaut Date: Mon, 13 Jun 2022 02:02:00 +0000 Subject: [PATCH] Clean up graphics scaling --- client/package.json | 2 +- client/src/components/Settings.svelte | 10 +---- client/src/components/TxRender.svelte | 62 ++++++--------------------- client/src/components/TxViz.svelte | 3 +- client/src/stores.js | 5 --- server/mix.exs | 2 +- 6 files changed, 18 insertions(+), 66 deletions(-) diff --git a/client/package.json b/client/package.json index 36fcb13..710e91c 100644 --- a/client/package.json +++ b/client/package.json @@ -1,6 +1,6 @@ { "name": "bitfeed-client", - "version": "2.3.3", + "version": "2.3.4", "scripts": { "build": "rollup -c", "dev": "rollup -c -w", diff --git a/client/src/components/Settings.svelte b/client/src/components/Settings.svelte index ea16b82..b054714 100644 --- a/client/src/components/Settings.svelte +++ b/client/src/components/Settings.svelte @@ -2,7 +2,7 @@ import config from '../config.js' import analytics from '../utils/analytics.js' import SidebarMenuItem from '../components/SidebarMenuItem.svelte' -import { settings, nativeAntialias, exchangeRates, haveMessages } from '../stores.js' +import { settings, exchangeRates, haveMessages } from '../stores.js' import { currencies } from '../utils/fx.js' function toggle(setting) { @@ -59,14 +59,6 @@ let settingConfig = { } } $: { - if ($nativeAntialias) { - settingConfig.fancyGraphics = false - } else { - settingConfig.fancyGraphics = { - label: 'Fancy Graphics', - valueType: 'bool' - } - } if (config.messagesEnabled && $haveMessages) { settingConfig.showMessages = { label: 'Message Bar', diff --git a/client/src/components/TxRender.svelte b/client/src/components/TxRender.svelte index 5815062..5b0c28d 100644 --- a/client/src/components/TxRender.svelte +++ b/client/src/components/TxRender.svelte @@ -4,16 +4,16 @@ import fragShaderSrc from '../shaders/tx.frag' import TxSprite from '../models/TxSprite.js' import { color, hcl } from 'd3-color' - import { darkMode, frameRate, avgFrameRate, nativeAntialias, settings, devSettings, freezeResize } from '../stores.js' + import { darkMode, settings, devSettings, freezeResize } from '../stores.js' import config from '../config.js' let canvas let gl let animationFrameRequest - let simulateAntialiasing = false - let autoSetGraphicsMode = false let displayWidth let displayHeight + let cssWidth + let cssHeight let shaderProgram let aspectRatio let sceneScale = [1.0, 1.0] @@ -21,10 +21,6 @@ let debugPointArray let lastTime = performance.now() - let rawFrameRate = 0 - const frameRateSamples = Array(60).fill(60) - const frameRateReducer = (acc, rate) => { return acc + rate } - let frameRateSampleIndex = 0 const nullPointArray = new Float32Array() @@ -68,11 +64,6 @@ if (running) run() } - $: { - simulateAntialiasing = !$nativeAntialias && $settings.fancyGraphics - resizeCanvas() - } - function windowReady () { resizeCanvas() } @@ -83,16 +74,13 @@ resizeTimer = null // var rect = canvas.parentNode.getBoundingClientRect() if (canvas && !sizeFrozen) { - displayWidth = window.innerWidth - displayHeight = window.innerHeight - if (simulateAntialiasing) { - canvas.width = displayWidth * 2 - canvas.height = displayHeight * 2 - } else { - canvas.width = displayWidth - canvas.height = displayHeight - } - if (gl) gl.viewport(0, 0, canvas.width, canvas.height) + cssWidth = window.innerWidth + cssHeight = window.innerHeight + displayWidth = cssWidth * window.devicePixelRatio + displayHeight = cssHeight * window.devicePixelRatio + canvas.width = displayWidth + canvas.height = displayHeight + if (gl) gl.viewport(0, 0, displayWidth, displayHeight) } else { resizeTimer = setTimeout(resizeCanvas, 500) } @@ -167,7 +155,7 @@ /* SET UP SHADER UNIFORMS */ // screen dimensions - gl.uniform2f(gl.getUniformLocation(shaderProgram, 'screenSize'), displayWidth, displayHeight) + gl.uniform2f(gl.getUniformLocation(shaderProgram, 'screenSize'), cssWidth, cssHeight) // frame timestamp gl.uniform1f(gl.getUniformLocation(shaderProgram, 'now'), now) gl.uniform1i(gl.getUniformLocation(shaderProgram, 'colorTexture'), 0); @@ -187,25 +175,8 @@ gl.drawArrays(gl.TRIANGLES, 0, pointArray.length / TxSprite.vertexSize) } - const rawFrameRate = (1000 / (now - lastTime)) + 0.075 - frameRateSamples[frameRateSampleIndex++] = rawFrameRate - if (frameRateSampleIndex >= frameRateSamples.length) frameRateSampleIndex = 0 - const rawAvgFrameRate = frameRateSamples.reduce(frameRateReducer, 0) / frameRateSamples.length - // rawFrameRate = Math.max(1, (rawFrameRate * 0.8) + (0.2 * (1 / (frameTime / 1000)))) - if (rawAvgFrameRate < 45 && !autoSetGraphicsMode) { - autoSetGraphicsMode = true - $settings.fancyGraphics = false - } - frameRate.set(rawFrameRate) - avgFrameRate.set(rawAvgFrameRate) - lastTime = now - /* LOOP */ if (running) { - // if (animationFrameRequest) { - // cancelAnimationFrame(animationFrameRequest) - // animationFrameRequest = null - // } animationFrameRequest = requestAnimationFrame(run) } } @@ -253,8 +224,6 @@ } function initCanvas () { - $nativeAntialias = gl.getContextAttributes().antialias - gl.clearColor(0.0, 0.0, 0.0, 0.0) gl.clear(gl.COLOR_BUFFER_BIT) @@ -327,11 +296,6 @@ bottom: 0; /* pointer-events: none; */ overflow: hidden; - - &.sim-antialias { - transform: scale(0.5); - transform-origin: top left; - } } @@ -339,6 +303,8 @@ diff --git a/client/src/components/TxViz.svelte b/client/src/components/TxViz.svelte index 99b87cc..6eabf4a 100644 --- a/client/src/components/TxViz.svelte +++ b/client/src/components/TxViz.svelte @@ -4,7 +4,7 @@ import TxRender from './TxRender.svelte' import getTxStream from '../controllers/TxStream.js' import { settings, overlay, serverConnected, serverDelay, txCount, mempoolCount, - mempoolScreenHeight, frameRate, avgFrameRate, blockVisible, tinyScreen, + mempoolScreenHeight, blockVisible, tinyScreen, compactScreen, currentBlock, latestBlockHeight, selectedTx, blockAreaSize, devEvents, devSettings, pageWidth, pageHeight, loading, freezeResize } from '../stores.js' import BlockInfo from '../components/BlockInfo.svelte' @@ -30,7 +30,6 @@ let running = false let lastFrameUpdate = 0 - let frameRateLabel = '' let txStream if (!config.noTxFeed || !config.noBlockFeed) txStream = getTxStream() diff --git a/client/src/stores.js b/client/src/stores.js index bf7ca51..ec8229d 100644 --- a/client/src/stores.js +++ b/client/src/stores.js @@ -87,8 +87,6 @@ export const txCount = createCounter() export const lastBlockId = writable(null) export const mempoolCount = tweened(0) export const mempoolScreenHeight = writable(0) -export const frameRate = writable(null) -export const avgFrameRate = writable(null) export const blockVisible = writable(false) export const currentBlock = writable(null) export const selectedTx = writable(null) @@ -107,7 +105,6 @@ const defaultSettings = { showFX: true, vbytes: false, colorByFee: false, - fancyGraphics: true, showMessages: true, showSearch: true, noTrack: false, @@ -140,8 +137,6 @@ export const devSettings = (config.dev && config.debug) ? createCachedDict('dev- export const sidebarToggle = writable(null) -export const nativeAntialias = writable(false) - const newVisitor = !localStorage.getItem('seen-welcome-msg') // export const overlay = writable(newVisitor ? 'about' : null) export const overlay = writable(null) diff --git a/server/mix.exs b/server/mix.exs index de8185c..198e8af 100644 --- a/server/mix.exs +++ b/server/mix.exs @@ -4,7 +4,7 @@ defmodule BitcoinStream.MixProject do def project do [ app: :bitcoin_stream, - version: "2.3.3", + version: "2.3.4", elixir: "~> 1.10", start_permanent: Mix.env() == :prod, deps: deps(),