babylon.js 游戏_使用Three.js或Babylon.js在具有JavaScript和WebGL的浏览器中轻松加速3D游戏

babylon.js 游戏

Let's ignore that we haven't got a web-agreed-upon way to do just about anything, much less basic line-of-business apps with data-bound text boxes over data, and just revel in the fact that we can do hardware-accelerated 3D graphics in our browsers with WebGL. This works today in all the latest browsers.

让我们忽略一下，我们还没有通过网络商定的方法来执行几乎任何事情，更不用说在数据上具有数据绑定文本框的基本业务应用程序了，而陶醉于我们可以做硬件的事实WebGL在我们的浏览器中加速3D图形。 今天，这在所有最新的浏览器中都有效。

I noticed this fantastic mini-game promoting Assassin's Creed over at http://race.assassinscreedpirates.com that uses WebGL via a library called Babylon.js. On my Windows machine it runs perfectly in IE11, Chrome 37, or Firefox 30. (Yes, in retrospec, the version numbering for browsers is getting out of hand.)

我在http://race.assassinscreedpirates.com上注意到了一个宣传刺客信条的奇妙微型游戏，它通过一个名为Babylon.js的库使用WebGL。 在我的Windows计算机上，它可以完美地在IE11，Chrome 37或Firefox 30中运行。(是的，回想起来，浏览器的版本号已失控。)

Some folks on Macs have reported issues with WebGL. Check out https://www.browserleaks.com/webgl for YOUR browser's capabilities.

Mac上的某些人报告了WebGL的问题。 查看https://www.browserleaks.com/webgl了解您的浏览器功能。

This Pirate Ship game is really worth checking out and it's fun for the kids. You can also check out the Developer Teardown and learn how they built it.

这个海盗船游戏确实值得一试，对孩子们来说很有趣。 您还可以查看“开发人员拆解”，了解他们是如何构建的。

I wanted to get a better understanding of exactly how difficult it is (or easy!) to get in to WebGL in the browser. I found this article over at SitePoint by Joe Hewitson and started with some of his sample code where he compares two popular WebGL libraryes, three.js and babylon.js. The Assassin's Creed game here is written using Babylon.js.

我想更好地了解在浏览器中进入WebGL有多困难(或容易！)。 我在Joe Hewitson的SitePoint上找到了这篇文章，并从他的一些示例代码开始，他比较了两个流行的WebGL库， three.js和babylon.js 。 这里的刺客信条游戏是使用Babylon.js编写的。

Three.js seem to be  a general layer on top of WebJS, aiming to make scene creation and animation easy. Using Joe's sample (that I changed a little) along with a texture.gif, I was able to make this spinning 3D cube easily.

Three.js似乎是WebJS之上的通用层，旨在使场景创建和动画变得容易。 使用Joe的样本(我做了些改动)以及texture.gif，我可以轻松地制作这个旋转的3D立方体。

There's a live example running at http://hanselstorage.blob.core.windows.net/blog/WebGL.html you can see in your modern browser. Below is just a static image.

在http://hanselstorage.blob.core.windows.net/blog/WebGL.html上有一个实时示例，您可以在现代浏览器中看到。 以下只是静态图片。

Three.js is on the left and Babylon.js is on the right. It doesn't really matter given the static image, but one think you'll notice immediately if you run the live sample is that you can zoom in and out, pan, grab, and manipulate the babylon.js cube. I could have hooked up some events to the three.js cube, or perhaps added a physics engine like Physijs and made it interact with the world, I suppose. It struck me though, that this little example shows the difference in philosophy between the two. Babylon seems to be more of a game engine or a library that wants to help you make games so there's interactions, collision detection, and lighting included.

Three.js在左侧，Babylon.js在右侧。 给定静态图像并不重要，但是有人认为，如果运行实时示例，您会立即注意到，可以放大和缩小，平移，抓取和操纵babylon.js多维数据集。 我想我可以将一些事件关联到three.js多维数据集，或者添加一个物理引擎(例如Physijs)并使之与世界互动。 不过，令我震惊的是，这个小例子说明了两者之间的哲学差异。 巴比伦似乎更像是一个游戏引擎或一个库，想要帮助您制作游戏，因此包括交互，碰撞检测和照明。

Three.js supports many renderers, cameras, and lighting. You can use all WebGL capabilities such as lens flares. It supports all the usual objects and geometries as well. Their examples are extensive with over 150 coding examples covering everything you'd want to know from fonts, models, textures, to sounds. There's even an in-browser Three.js editor.

Three.js支持许多渲染器，相机和照明。 您可以使用所有WebGL功能，例如镜头光晕。 它也支持所有常见的对象和几何形状。 他们的示例涵盖了150多个编码示例，涵盖了您想要了解的一切，从字体，模型，纹理到声音。 浏览器中甚至还有Three.js编辑器。

Babylon includes a lot including a physics engine from cannon.js built in, full scene graph, offline mode, textures, special effects and post processes, many cameras including Oculus Rift (!) lots of meshes. Babylon.js even supports standard Gamepads via like the Xbox One controller natively via the Gamepad API spec.

巴比伦包括很多内容，包括内置的cannon.js物理引擎，全场景图，离线模式，纹理，特殊效果和后期处理，包括Oculus Rift (！)在内的许多相机都有很多网格。 Babylon.js甚至通过Gamepad API规范通过Xbox One控制器支持标准的Gamepad 。

Anyway, here is the cube on the right from Joe's code that I modified slightly, using babylon.js:

无论如何，这是我使用babylon.js稍加修改后的Joe代码右侧的多维数据集：

// Babylon.js 
var canvas = document.getElementById('babylonCanvas');
var engine = new BABYLON.Engine(canvas, true);
var sceneB = new BABYLON.Scene(engine);
var camera = new BABYLON.ArcRotateCamera("camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), sceneB);
        
var light = new BABYLON.DirectionalLight("light", new BABYLON.Vector3(0, -1, 0), sceneB);
//light.diffuse = new BABYLON.Color3(1, 0, 0);
//light.specular = new BABYLON.Color3(1, 1, 1);

var box = BABYLON.Mesh.CreateBox("box", 3.0, sceneB);
var material = new BABYLON.StandardMaterial("texture", sceneB);
box.material = material;
material.diffuseTexture = new BABYLON.Texture("texture.gif", sceneB);

sceneB.activeCamera.attachControl(canvas);

engine.runRenderLoop(function () {
    box.rotation.x += 0.005;
    box.rotation.y += 0.01;
    sceneB.render();
});

I also commented out the lighting but you can see how easy it is to add lighting to a scene if you like. In this case there was a diffuse red light along with a specular white.

我也注释掉了照明，但是如果您愿意，您可以看到将照明添加到场景有多么容易。 在这种情况下，有一个漫反射的红光和一个镜面的白色。

With babylon.js I could change the size of the scene by changing the size of the canvas. With three.js the width and height are pulled in programmatically from the enclosing div.

使用babylon.js，我可以通过更改画布的大小来更改场景的大小。 使用three.js，可以通过编程从封闭的div中拉入宽度和高度。

Here is the near-same box created with three.js.

这是用three.js创建的几乎相同的框。

// Three.js 
var div = document.getElementById('three');
var height = div.offsetHeight;
var width = div.offsetWidth;

var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
div.appendChild(renderer.domElement);

var camera = new THREE.PerspectiveCamera(70, width / height, 1, 1000);
camera.position.z = 400;

var sceneT = new THREE.Scene();

var cube = new THREE.CubeGeometry(200, 200, 200);

var texture = THREE.ImageUtils.loadTexture('texture.gif');
texture.anisotropy = renderer.getMaxAnisotropy();

var material = new THREE.MeshBasicMaterial({ map: texture });

var mesh = new THREE.Mesh(cube, material);
sceneT.add(mesh);

animate();

function animate() {
    requestAnimationFrame(animate);

    mesh.rotation.x += 0.005;
    mesh.rotation.y += 0.01;
    renderer.render(sceneT, camera);
}

Both libraries have amazing Examples Galleries and you should check them out.

这两个库都有惊人的示例画廊，您应该将其检出。

• http://threejs.org

  http://threejs.org

  • http://chandlerprall.github.io/Physijs/

    http://chandlerprall.github.io/Physijs/

  http://threejs.org

  http://threejs.org

• http://babylonjs.com

  http://babylonjs.com

Also note that there's a contest running until June 20th, 2014 over at http://www.modern.ie/en-us/demos/assassinscreedpirates where you'll create your own shader within the browser and submit it for judging. Contestants must be over 16 years of age and from one of the following countries: United States of America, United Kingdom, France, Germany, Spain, or Australia. The contest starts here and the grand prize is an Assassin’s Creed Collector’s Black Chest Edition and an Xbox One.

另请注意，直到2014年6月20日为止，竞赛都会在http://www.modern.ie/en-us/demos/assassinscreedpirates上进行，您将在浏览器中创建自己的着色器并将其提交以进行评审。 参赛者必须年满16岁，并且来自以下国家/地区之一：美利坚合众国，英国，法国，德国，西班牙或澳大利亚。 比赛从这里开始，大奖是刺客信条收藏家的黑胸版和Xbox One 。

Even if you don't win, do check out the in-browser shader editor. It's amazing.

即使您不赢，也请签入浏览器内着色器编辑器。 太奇妙了。

翻译自: https://www.hanselman.com/blog/easy-accelerated-3d-games-in-a-browser-with-javascript-and-webgl-using-threejs-or-babylonjs

babylon.js 游戏