Javascript Web浏览器中的仿真

抱歉，如果标题令人困惑，很难用一个短语来概括

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

好的，所以他们让我研究一种新型的在浏览器中进行的可视化。 这意味着可以上传模拟器的代码，在服务器上启动，并在服务器上模拟时在浏览器（HTML5画布或SVG）中查看模拟

好的，我首先想到使用Ajax从模拟器获取数据，并使用一些画布库在屏幕上绘制机器人。但是他们不想需要一个Web服务器，所以我想在模拟器中直接编写一种新的可视化（如果使用C++的WebSoCub库，如果它实际上存在），它将充当WebSoSver服务器，这样浏览器就可以直接与模拟器对话而不需要Web服务器（不知道是否有可能）。 嗯。。。这就是我的想法。如果你能告诉我你对它的看法并给我一些建议/链接，那就太棒了。 是否可以在没有Web服务器的情况下处理此问题？如果不在模拟器中实现HTTP协议是不可能的，那么我将跳过这个想法，使用Web服务器：）

第二个问题更确切地说： 我已经看过一些HTML5画布库，fabric.js，jCanvaScript，dojo.gfx，cake，doodle.js，bHive，KineticJS。我还不知道该用哪一个。 我用jCanvaScript开始了一些实验，现在我面临一个问题。 我从服务器获取数据（机器人在每个时间步的位置），然后在画布上绘制它们。我使用了一些。动画功能可以使动作平滑。此函数需要若干毫秒，即动画的时间，我不知道如何在模拟的每个时间步同步我必须移动的所有对象的动画。 你知道一个有助于实现这种模拟的框架吗？（只是在每个时间步之间移动对象）

就这样，为我糟糕的英语道歉，我希望这是可以理解的，如果不能，请告诉我，我会重新措辞

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

祝你今天愉快

巴尔扎德。

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

我假设您将运行

simulator.exe

，并以文本模式捕获其输出

如果这个模拟器是

windows

应用程序，我推荐

C++

如果是针对

linux

的，我会尝试

node.js

您希望每秒更新多少次

<5

使用AJAX

>5

选择WebSocket

2） CanvasAPI本身使用起来非常简单，所以您可能不需要任何库来处理它

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

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;
  // ...
}

伪代码：
持续时间=20；//它等于同步间隔
onDataReceived（数据）{
//获取在“持续时间”中实现“新x”所需的步长`
robot.stepX=abs（robot.x-data.x）/duration；
robot.newX=data.x；
}
定时器环路{
如果（robot.x

如果您决定使用node执行此操作，这可能会帮助您

1）如果您希望从internet访问任何外部数据，则无法避免运行服务器

我假设您将运行

simulator.exe

，并以文本模式捕获其输出

如果这个模拟器是

windows

应用程序，我推荐

C++

如果是针对

linux

的，我会尝试

node.js

您希望每秒更新多少次

<5

使用AJAX

>5

选择WebSocket

2） CanvasAPI本身使用起来非常简单，所以您可能不需要任何库来处理它

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

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;
  // ...
}

伪代码：
持续时间=20；//它等于同步间隔
onDataReceived（数据）{
//获取在“持续时间”中实现“新x”所需的步长`
robot.stepX=abs（robot.x-data.x）/duration；
robot.newX=data.x；
}
定时器环路{
如果（robot.x

---

如果你决定用节点来做这件事，这可能有助于你

如果你有访问仿真源并想直接构建一个WebSosil服务器组件的话，我已经写了一个独立的C++ WebSoScabor库（WebSuth+++，BSD许可）来做这类事情。WebStuts++提供了通过一个独立的WebSoCulver服务器公开C++应用程序输出所需的所有组件。另一方面，如果只需要通过WebSocket node.js/socket.io或Autobahn WebSocket库（python）公开stdout，则设置起来可能更简单

---

迄今为止，我已经使用WebStuts++来将来自C++虚拟世界服务器的实时数据推送到浏览器中，通过画布绘制，AM目前正在开发一个C++热扩散模拟器，它将在一个配套的JavaScript应用程序中显示模拟的实时可视化。如果你在考虑Github上的所有C++路由，可以自由地ping ping。

< P>如果你有访问仿真源的能力，并且想要直接构建一个WebSoSserver组件，我就写了一个独立的C++ WebSoScabor库（WebSuth++ +，BSD许可）来完成这类事情。WebStuts++提供了通过C++自动显示C++应用程序输出所需的所有组件