67 lines
1.7 KiB
JavaScript
67 lines
1.7 KiB
JavaScript
const WIDTH = 1024
|
|
const HEIGHT = 1024
|
|
const MODE = 3
|
|
|
|
import * as novnc from './novnc'
|
|
import { memory } from './novnc_bg'
|
|
|
|
const canvas = document.getElementById('target')
|
|
const ctx = canvas.getContext('2d')
|
|
|
|
canvas.width = WIDTH;
|
|
canvas.height = HEIGHT;
|
|
|
|
if (MODE === 2 || MODE === 3) {
|
|
let byteSize = WIDTH * HEIGHT * 4
|
|
var pointer = novnc.alloc( byteSize )
|
|
|
|
var u8array = new Uint8ClampedArray(memory.buffer, pointer, byteSize)
|
|
var imgData = new ImageData(u8array, WIDTH, HEIGHT)
|
|
console.log("imgData:", imgData)
|
|
}
|
|
|
|
let msList1 = []
|
|
let msList2 = []
|
|
|
|
function avg(l) {
|
|
return (l.reduce((a,b) => a+b, 0)/l.length).toFixed(2)
|
|
}
|
|
|
|
function update() {
|
|
let ms1, ms2
|
|
const startMs = (new Date()).getTime()
|
|
const red = parseInt(Math.random()*256)
|
|
const green = parseInt(Math.random()*256)
|
|
const blue = parseInt(Math.random()*256)
|
|
console.log(`red: ${red}, green: ${green}, blue: ${blue}`)
|
|
if (MODE === 1) {
|
|
novnc.draw1(ctx, WIDTH, HEIGHT,
|
|
red, green, blue)
|
|
ms1 = (new Date()).getTime()
|
|
msList1.push(ms1 - startMs)
|
|
console.log(`frame elapsed: ${ms1 - startMs} (${avg(msList1)})`)
|
|
} else {
|
|
if (MODE === 2) {
|
|
novnc.draw2(pointer, WIDTH, HEIGHT,
|
|
red, green, blue)
|
|
} else if (MODE === 3) {
|
|
novnc.draw3(pointer, WIDTH, HEIGHT,
|
|
red, green, blue)
|
|
}
|
|
ms1 = (new Date()).getTime()
|
|
ctx.putImageData(imgData, 0, 0)
|
|
ms2 = (new Date()).getTime()
|
|
msList1.push(ms1 - startMs)
|
|
msList2.push(ms2 - ms1)
|
|
console.log(`draw elapsed: ${ms1 - startMs} (${avg(msList1)}), ` +
|
|
`putIMageData elapsed: ${ms2 - ms1} (${avg(msList2)})`)
|
|
|
|
//window.requestAnimationFrame(update)
|
|
}
|
|
}
|
|
|
|
canvas.addEventListener('click', () => {
|
|
update()
|
|
})
|
|
update()
|