Web浏览器中的模拟[关闭]答案

【问题标题】：Simulation in a Web Browser [closed]Web浏览器中的模拟[关闭]
【发布时间】：2012-02-29 00:48:48
【问题描述】：

对不起，如果标题令人困惑，很难用一句话来概括。

我正在开展一个项目，该项目包括在网络浏览器中渲染机器人模拟。更具体地说，在我正在学习的大学中，他们使用用 C++ 编写的模拟器，该程序模拟机器人在环境中的进化。该模拟器有许多可用的输出，如 3D OpenGL 可视化等。一个可用的输出是基本文本渲染，它为每个时间步输出，每个机器人在环境中的位置。

好的，所以他们要求我研究一种在浏览器中进行的新型可视化。这意味着可以上传他的模拟器代码，在服务器上启动它，然后在浏览器中查看模拟（在 HTML5 Canvas 或 SVG 中），同时在服务器上进行模拟！

好吧，我首先想到的是使用 Ajax 从模拟器中获取数据并使用一些 Canvas 库在屏幕上绘制机器人。但是他们不想需要 Web 服务器，所以我想直接在模拟器中编写一种新型可视化（如果确实存在，则使用 C++ WebSocket 库），它将充当 WebSocket 服务器，以便浏览器可以直接对话到模拟器不需要Web服务器（不知道是否可能）。

嗯……就是这样。如果你能告诉我你的想法并给我一些建议/链接，那就太棒了。是否可以在没有 Web 服务器的情况下处理这个问题？如果没有在模拟器中实现 HTTP 协议是不可能的，那么我将跳过这个想法并使用 Web 服务器：)

第二个问题更准确：我已经看过一些 HTML5 Canvas 库、fabric.js、jCanvaScript、dojo.gfx、cake、doodle.js、bHive、KineticJS。我仍然不确定要使用哪一个。我开始使用 jCanvaScript 进行一些实验，但遇到了一个问题。我从服务器获取数据（每个时间步的机器人位置），然后必须在画布中绘制它们。我正在使用一些 .animate 函数来获得平滑的动作。这个函数需要数毫秒，即动画的时间，我不知道如何同步在模拟的每个时间步我必须移动的所有对象的动画。你知道一个有助于实现这种模拟的框架吗？（只是在每个时间步之间移动对象）。

就是这样，为我的英语不好道歉，我希望它是可以理解的，如果不是，告诉我，我会改写。

提前感谢您的帮助。我对那个项目有点迷茫，任何建议都将不胜感激！

祝你有美好的一天。

巴尔扎德。

【问题讨论】：

标签： javascript ajax websocket simulation html5-canvas

【解决方案1】：

1) 如果您想从 Internet 访问任何外部数据，则无法避免运行服务器。

我假设您将运行 simulator.exe 并以文本模式捕获其输出。

如果这个模拟器是windows应用我推荐C++

如果是linux，我会尝试node.js

你希望每秒更新多少次

< 5 使用 AJAX

> 5 使用 WebSockets

2) Canvas API 本身使用起来非常简单，因此您可能不需要任何库来处理它。

关于动画的注意事项 - 只是在新旧数据之间及时插值 - 我的意思是：

PSEUDO CODE:

duration = 20; // it's equal to synchronising interval
onDataReceived(data) {
  // get the step width needed to achieve `new x` in `duration`
  robot.stepX = abs(robot.x - data.x) / duration;
  robot.newX = data.x;
}

timerLoop {
  if(robot.x < robot.newX) robot.x += robot.stepX;
  // ...
}

如果您决定使用 node 来做这件事，这可能会对您有所帮助 Multiplayer JavaScript game built with Node.JS - Separating players

【讨论】：

【解决方案2】：

如果您可以访问模拟源并希望直接在其中构建 WebSocket 服务器组件，我已经编写了一个独立的 C++ WebSocket 库（WebSocket++，https://github.com/zaphoyd/websocketpp/，BSD 许可）来完成这类事情。 WebSocket++ 提供了通过独立的 WebSocket 服务器公开 C++ 应用程序输出所需的所有组件。另一方面，如果您只需要通过 WebSocket node.js/socket.io 或 Autobahn WebSocket 库 (python) 公开标准输出，则设置起来可能更简单。

到目前为止，我已经使用 WebSocket++ 将实时数据从 C++ 虚拟世界服务器推送到浏览器以通过画布进行渲染，并且目前正在开发一个 C++ 热扩散模拟器，它将在配套的 javascript 应用程序中显示模拟的实时可视化。如果您正在考虑所有 C++ 路线，请随时在 GitHub 上联系我。

【讨论】：