WebVR第4部分：画布数据可视化

本文概述

可能工作的最简单方法：console.log()
用数据可视化仿真
使用2D Canvas可视化仿真
手工定制太阳能系统
艺术从未完成, 必须被遗弃

欢呼！我们着手为WebVR创建概念证明。我们之前的博客文章完成了模拟, 因此现在该进行一些创造性的练习了。

这是成为设计师和开发人员的激动人心的时刻, 因为VR是一种范式转变。

2007年, 苹果销售了第一部iPhone, 掀开了智能手机消费革命。到2012年, 我们已经进入”移动优先”和”响应式”网页设计。在2019年, Facebook和Oculus发布了第一款移动VR头显。我们开工吧！

“移动优先”互联网不是一种时尚, 我预测” VR优先”互联网也不会。在前三篇文章和演示中, 我展示了当前浏览器中的技术可能性。

如果你是在本系列的中间进行讲解的话, 那么我们正在建立一个尖刺行星的天体重力模拟。

第1部分：简介和体系结构
第2部分：Web Workers为我们提供了其他浏览器线程
第3部分：用于我们的O(n²)性能瓶颈代码的WebAssembly和AssemblyScript

站在我们已经完成的工作上, 是时候进行一些创意工作了。在最后两篇文章中, 我们将探讨canvas和WebVR以及用户体验。

第4部分：Canvas数据可视化(本文)
第5部分：WebVR数据可视化

今天, 我们将使仿真变得栩栩如生。回顾过去, 我发现一旦开始使用可视化工具, 我对完成该项目会感到更加兴奋和感兴趣。可视化使其他人感到有趣。

该模拟的目的是探索将使WebVR(浏览器中的虚拟现实)和即将面世的VR优先的Web成为可能的技术。这些相同的技术可以支持浏览器边缘计算。

为了完善概念验证, 今天我们首先创建一个画布可视化。

Canvas Visualizer演示, 示例代码

在最后一篇文章中, 我们将研究VR设计并制作WebVR版本, 以使该项目”完成”。

可能工作的最简单方法：console.log()

返回RR(现实)。让我们为基于浏览器的” n体”模拟创建一些可视化效果。我在过去的项目中曾在网络视频应用程序中使用过画布, 但从未将其用作艺术家的画布。让我们看看我们能做什么。

如果你还记得我们的项目架构, 我们会将可视化委托给nBodyVisualizer.js。

nBodySimulator.js具有一个模拟循环start(), 该循环调用其step()函数, 而step()的底部调用this.visualize()

// src/nBodySimulator.js

  /**

   * This is the simulation loop.

   */

  async step() {

	// Skip calculation if worker not ready. Runs every 33ms (30fps). Will skip.

	if (this.ready()) {

  		await this.calculateForces()

	} else {

  	console.log(`Skipping calculation: ${this.workerReady} ${this.workerCalculating}`)

	}

	// Remove any "debris" that has traveled out of bounds

	// This keeps the button from creating uninteresting work.

	this.trimDebris()

	// Now Update forces. Reuse old forces if worker is already busy calculating.

	this.applyForces()

	// Now Visualize

	this.visualize()

  }

当我们按下绿色按钮时, 主线程将向系统添加10个随机主体。我们触摸了第一篇文章中的按钮代码, 你可以在此处的回购中看到它。这些机构非常适合测试概念验证, 但请记住, 我们处在危险的性能范围内-O(n²)。

人们的设计目的是关心他们所看到的人和物, 因此trimDebris()会移除看不见的物体, 从而不会减慢其余物体的速度。这是感知性能与实际性能之间的差异。

现在我们已经涵盖了除最终的this.visualize()之外的所有内容, 让我们来看一下！

// src/nBodySimulator.js

  /**

   * Loop through our visualizers and paint()

   */

  visualize() {

	this.visualizations.forEach(vis => {

  		vis.paint(this.objBodies)

	})

  }

  /**

   * Add a visualizer to our list

   */

  addVisualization(vis) {

	this.visualizations.push(vis)

  }

这两个功能使我们可以添加多个可视化器。画布版本中有两个可视化器：

// src/main.js 

window.onload = function() {

  // Create a Simulation

  const sim = new nBodySimulator()

  

  // Add some visualizers

  sim.addVisualization(

    new nBodyVisPrettyPrint(document.getElementById("visPrettyPrint"))

  )

  sim.addVisualization(

    new nBodyVisCanvas(document.getElementById("visCanvas"))

  )

  …

在画布版本中, 第一个可视化器是显示为HTML的白色数字表。第二个可视化器是下面的黑色画布元素。

左侧的HTML可视化器是白色数字表。黑色画布可视化工具在下面

为此, 我从nBodyVisualizer.js中的一个简单基类开始：

// src/nBodyVisualizer.js

/**

 * This is a toolkit of visualizers for our simulation.

 */

/**

 * Base class that console.log()s the simulation state.

 */

export class nBodyVisualizer {

  constructor(htmlElement) {

	this.htmlElement = htmlElement

	this.resize()

  }

  resize() {}

  paint(bodies) {

	console.log(JSON.stringify(bodies, null, 2))

  }

}

此类会打印到控制台(每隔33毫秒！), 并跟踪一个htmlElement-我们将在子类中使用该元素, 以便在main.js中轻松声明它们。

这是可能可行的最简单的方法。

但是, 尽管此控制台可视化绝对简单, 但实际上并不”起作用”。浏览器控制台(和正在浏览的人)并非旨在以33ms的速度处理日志消息。让我们找到可能可行的下一个最简单的方法。

用数据可视化仿真

下一个”漂亮打印”迭代是将文本打印到HTML元素。这也是我们用于canvas实现的模式。

请注意, 我们正在保存对可视化工具将在其上绘制的htmlElement的引用。像网络上的所有其他内容一样, 它具有移动优先的设计。在桌面上, 这会在页面左侧打印对象的数据表及其坐标。在移动设备上会导致视觉混乱, 因此我们将其跳过。

/**

 * Pretty print simulation to an htmlElement's innerHTML

 */

export class nBodyVisPrettyPrint extends nBodyVisualizer {

  constructor(htmlElement) {

	super(htmlElement)

	this.isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);

  }

  resize() {}

  paint(bodies) {

    

	if (this.isMobile) return

	let text = ''

	function pretty(number) {

  		return number.toPrecision(2).padStart(10)

	}

	bodies.forEach( body => {

  	text += `<br>${body.name.padStart(12)} {  x:${pretty(body.x)}  y:${pretty(body.y)}  z:${pretty(body.z)}  mass:${pretty(body.mass)}) }`

	})

	if (this.htmlElement) this.htmlElement.innerHTML = text

  }

}

此”数据流”可视化器具有两个功能：

这是一种”合理检查”仿真器在可视化器中的输入的方法。这是一个”调试”窗口。
看起来很酷, 因此让我们将其保留在桌面演示中！

现在我们对输入内容非常有信心, 让我们来谈谈图形和画布。

使用2D Canvas可视化仿真

“游戏引擎”是带有爆炸的”模拟引擎”。两者都是难以置信的复杂工具, 因为它们专注于资产管道, 流级别加载以及永远不应该被注意到的各种令人厌烦的东西。

网络还通过”移动优先”设计创建了自己的”不应该引起注意的事物”。如果浏览器调整大小, 我们画布的CSS将调整DOM中画布元素的大小, 因此我们的可视化工具必须适应或遭受用户的鄙视。

#visCanvas {

  	margin: 0;

  	padding: 0;

  	background-color: #1F1F1F;

  	overflow: hidden;

  	width: 100vw;

  	height: 100vh;

}

此要求在nBodyVisualizer基类和canvas实现中驱动resize()。

/**

 * Draw simulation state to canvas

 */

export class nBodyVisCanvas extends nBodyVisualizer {

  constructor(htmlElement) {

	super(htmlElement)

	// Listen for resize to scale our simulation

	window.onresize = this.resize.bind(this)

  }

	// If the window is resized, we need to resize our visualization

  resize() {

	if (!this.htmlElement) return

	this.sizeX = this.htmlElement.offsetWidth

	this.sizeY = this.htmlElement.offsetHeight

	this.htmlElement.width = this.sizeX

	this.htmlElement.height = this.sizeY

	this.vis = this.htmlElement.getContext('2d')

  }

这导致我们的可视化器具有三个基本属性：

this.vis-可用于绘制图元
this.sizeX
this.sizeY-绘图区域的尺寸

Canvas 2D可视化设计说明

我们的调整大小针对默认的画布实现。如果我们要可视化产品或数据图, 则需要：

在画布上绘制(以首选的尺寸和纵横比)
然后让浏览器在页面布局期间将该图形调整为DOM元素的大小

在这种更常见的用例中, 产品或图形是体验的重点。

相反, 我们的可视化是对广阔空间的戏剧性可视化, 通过将数十个微小的世界扑向虚空以进行娱乐来进行戏剧化。

我们的天体通过谦虚展示了空间-将自身保持在0到20像素之间。调整大小可缩放点之间的空间, 以创建”科学的”宽敞感并增强感知的速度。

为了在质量大不相同的对象之间创建比例感, 我们使用与质量成比例的drawSize初始化物体：

// nBodySimulation.js

export class Body {

  constructor(name, color, x, y, z, mass, vX, vY, vZ) {

	...

	this.drawSize = Math.min(   Math.max( Math.log10(mass), 1), 10)

  }

}

手工定制太阳能系统

现在, 当我们在main.js中创建太阳系时, 将拥有实现可视化所需的所有工具：

	// Set Z coords to 1 for best visualization in overhead 2D canvas

	// Making up stable universes is hard

	//   name        	color 	x	y	z	m  	vz	vy   vz

  sim.addBody(new Body("star", "yellow", 0, 0, 0, 1e9))

  sim.addBody(new Body("hot jupiter", "red", -1, -1, 0, 1e4, .24, -0.05, 0))

  sim.addBody(new Body("cold jupiter", "purple", 4, 4, -.1, 1e4, -.07, 0.04, 0))

	// A couple far-out asteroids to pin the canvas visualization in place.

  sim.addBody(new Body("asteroid", "black", -15, -15, 0, 0))  

  sim.addBody(new Body("asteroid", "black", 15, 15, 0, 0))

	// Start simulation  

  sim.start()

你可能会注意到底部的两个”小行星”。这些零质量的对象是用于将模拟的最小视口”固定”在以0, 0为中心的30×30区域的hack。

现在我们准备好绘画功能。物体的云可以从原点(0, 0, 0)”摆动”开, 因此除了比例之外, 我们还必须移动。

当模拟具有自然感觉时, 我们就”完成”了。没有做到这一点的”正确”方法。为了排列行星的初始位置, 我只是弄弄数字, 直到它们保持足够长的时间以至于变得有趣。

	// Paint on the canvas

paint(bodies) {

	if (!this.htmlElement) return

	// We need to convert our 3d float universe to a 2d pixel visualization

	// calculate shift and scale

	const bounds = this.bounds(bodies)

	const shiftX = bounds.xMin

	const shiftY = bounds.yMin

	const twoPie = 2 * Math.PI

    

	let scaleX = this.sizeX / (bounds.xMax - bounds.xMin)

	let scaleY = this.sizeY / (bounds.yMax - bounds.yMin)

	if (isNaN(scaleX) || !isFinite(scaleX) || scaleX < 15) scaleX = 15

	if (isNaN(scaleY) || !isFinite(scaleY) || scaleY < 15) scaleY = 15

	// Begin Draw

	this.vis.clearRect(0, 0, this.vis.canvas.width, this.vis.canvas.height)

		bodies.forEach((body, index) => {

  	// Center

  		const drawX = (body.x - shiftX) * scaleX

  		const drawY = (body.y - shiftY) * scaleY

  	// Draw on canvas

  		this.vis.beginPath();

  		this.vis.arc(drawX, drawY, body.drawSize, 0, twoPie, false);

  		this.vis.fillStyle = body.color || "#aaa"

  		this.vis.fill();

	});

  }

	// Because we draw the 3D space in 2D from the top, we ignore z

bounds(bodies) {

	const ret = { xMin: 0, xMax: 0, yMin: 0, yMax: 0, zMin: 0, zMax: 0 }
    
	bodies.forEach(body => {
    
		if (ret.xMin > body.x) ret.xMin = body.x
            
		if (ret.xMax < body.x) ret.xMax = body.x
            
		if (ret.yMin > body.y) ret.yMin = body.y
            
		if (ret.yMax < body.y) ret.yMax = body.y
            
		if (ret.zMin > body.z) ret.zMin = body.z
            
		if (ret.zMax < body.z) ret.zMax = body.z
	})
	return ret
  }

}

实际的画布绘制代码只有五行-每行以this.vis开头。其余的代码是场景的抓地力。