Clean up graphics scaling

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",

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',

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
+      cssWidth = window.innerWidth
-      displayHeight = window.innerHeight
+      cssHeight = window.innerHeight
-      if (simulateAntialiasing) {
+      displayWidth = cssWidth * window.devicePixelRatio
-        canvas.width = displayWidth * 2
+      displayHeight = cssHeight * window.devicePixelRatio
-        canvas.height = displayHeight * 2
-      } else {
       canvas.width = displayWidth
       canvas.height = displayHeight
-      }
+      if (gl) gl.viewport(0, 0, displayWidth, displayHeight)
-      if (gl) gl.viewport(0, 0, canvas.width, canvas.height)
     } 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;
-  }
 }
 </style>
 
@@ -339,6 +303,8 @@
 
 <canvas
   class="tx-scene"
-  class:sim-antialias={simulateAntialiasing}
+  width={displayWidth}
+  height={displayHeight}
+  style="width: {cssWidth}px; height: {cssHeight}px;"
   bind:this={canvas}
 ></canvas>

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()

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)

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(),