Setting up Visual Studio Community for Babylon.js

[Hagop]

Hi

I am trying to setup Visual Studio Community Edition 2015 on Windows 8.1  for Babylon.js  according to this tutorial

https://doc.babylonjs.com/generals/setup_visualStudio

 

I get a lot of errors when I build the project such as

Severity    Code    Description    Project    File    Line
Error    TS2345    Argument of type 'number[] | Int32Array' is not assignable to parameter of type 'ArrayBuffer'.
  Type 'number[]' is not assignable to type 'ArrayBuffer'.    Babylon.js    C:\test\Babylon.js\src\babylon.engine.ts    1160

According to the tutorial there should be a folder external referances which should be added to the project but I could not locate this folder. Should this originate from git clone babylon.js or should it originate from Visual Studio ?

 

[GameMonetize]

Are you using Typescript 1.7?

[Nockawa]

Sorry, I didn't update the tutorial: you don't need to include the external references folder anymore, in fact, it doesn't exists anymore, that's why you were mislead: you can add it because it doesn't exists.

Concerning the building error, DK may have a point, you need a recent version of TypeScript for Visual Studio, which can be found here:

https://www.microsoft.com/en-us/download/details.aspx?id=48593

 

[Hagop]

Thanks for the feedback.

 

Delkatosh, the Typescript version I'm using is 1.8.36.0 on Windows 8.1 64x

[Nockawa]

could you modify this line which should be right now:

            var arrayBuffer;

to

            var arrayBuffer: Uint32Array | Uint16Array;

and recompile? thanks

[Hagop]

OK I re-build the project using the https://www.microsoft.com/en-us/download/details.aspx?id=48593 and everything seems fine.

Nockawa, once you edit the document also make sure you clarify where the below is declared.

 

<TypeScriptSourceMap>True</TypeScriptSourceMap>
    <TypeScriptExperimentalDecorators>true</TypeScriptExperimentalDecorators>

[Nockawa]

I've already update the documentation but sure, I'll update it again with this feedback, thanks!

I'm glad you got it worked! I've spent many hours to get it worked too, but it worth taking the shot!

[lostwoods91]

hi, in my cloned project (i cloned it from the official babylon's page, not from Nockawa's) the "Target" block showed down here isn't present. is it necessary?

what are those NuGet packages? visual studio requested me to install typescript nuget package when i created the project, but it found nothing, so i did'n care about it.

anyway, the project was built correctly but, in sandbox.ts, BABYLON isn't recognized as namespace... 

i missed something?

thank you!

[Nockawa]

@lostwoods91 yes, you have to install TypeScript for Visual Studio, you can download it from here.

I've never tried on VS Community but it should work.

I should add in the tutorial a prerequisite section mentioning the installation of TypeScript.

[lostwoods91]

i already installed it, version 1.8.6.0; before, it didn't even compile the dll.

anyway, is it normal that the "Target" block isn't present in my cloned repo?

and why visual studio (i'm using enterprise edition 2015) ask me for nuget (??) packages of typescript?

thanks!

[Nockawa]

13 minutes ago, lostwoods91 said:

anyway, is it normal that the "Target" block isn't present in my cloned repo?

I don't understand this, can you clarify please?

Concerning the Nuget Package, Visual Studio's compilation engine is MSBuild, if you want JavaScript files to be generated out of the TypeScript ones, a specific MSBuild Target is needed to achieve that.

Now there were many different versions of TypeScript released with different ways to configure the compilation (and it also depend from the Visual Studio project type you have, classic Web project, TypeScript, or ASP.net core, etc.), mainly either from the project's properties or now using the tsconfig.json file.

I don't know if the xml fragment you mentioned is still needed...

Concerning the sandbox.ts not finding the BABYLON module, is it an error you have at compile time or even with Intellisense?

[lostwoods91]

i mean that the block of code in the photo is not present in my project file configuration, but as you just say, maybe it depends from my VS project)

the error isn't at compile time, but at runtime (the cube doesn't appear on screen) and it isn't even recognized by intellisense...

thank you!

[Nockawa]

1 minute ago, lostwoods91 said:

i mean that the block of code in the photo is not present in my project file configuration, but as you just say, maybe it depends from my VS project)

the error isn't at compile time, but at runtime (the cube doesn't appear on screen) and it isn't even recognized by intellisense...

thank you!

concerning the XML fragment, I think you can ignore it, it may have changed with the version of TypeScript you use compared to the one I used back then.

make sure your index.html file references all the babylon.js javascript files and also your sandbox.js file, make sure also that index.html is set as the startup page.

[lostwoods91]

it's all right, but still it doesn't work. white browser page

but why is there this tutorial, if you can easely debug javascript scripts by using internet explorer as debugging browser?

[Nockawa]

if you debug using Internet Explorer's F12 tools, you will debug Javascript code, not TypeScript, and the Visual Studio debugger is quite good too. 

But it's mostly a matter of taste and habit.

[Nockawa]

if your HTML Page is white, during the debugging session, make sure you have the "JavaScript Console" Window opened (go to the DEBUG menu of Visual Studio, then "Windows", then "JavaScript Console") and check for error messages because you certainly have script files not loaded or Js errors.

[lostwoods91]

you're right, it is also a compile time error.

it is always: "Cannot find name 'BABYLON'"

 

here's a screen:

 

[Nockawa]

make sure the js files are correctly referenced in the index.html.

Here's a example of my index.html file:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />

    <script src="Libs/dat.gui.min.js"></script>

    <script src="src/Math/babylon.math.js"></script>
    <script src="src/Math/babylon.math.simd.js"></script>
    <script src="src/Tools/babylon.decorators.js"></script>
    <script src="src/Tools/babylon.observable.js"></script>
    <script src="src/Tools/babylon.database.js"></script>
    <script src="src/Tools/babylon.tools.tga.js"></script>
    <script src="src/Tools/babylon.tools.dds.js"></script>
    <script src="src/Tools/babylon.stringDictionary.js"></script>
    <script src="src/Tools/babylon.smartArray.js"></script>
    <script src="src/Tools/babylon.dynamicFloatArray.js"></script>
    <script src="src/Tools/babylon.rectPackingMap.js"></script>
    <script src="src/Tools/babylon.tools.js"></script>
    <script src="src/states/babylon.alphaCullingState.js"></script>
    <script src="src/states/babylon.depthCullingState.js"></script>
    <script src="src/states/babylon.stencilState.js"></script>
    <script src="src/babylon.engine.js"></script>
    <script src="src/babylon.node.js"></script>
    <script src="src/Tools/babylon.filesInput.js"></script>
    <script src="src/Collisions/babylon.pickingInfo.js"></script>
    <script src="src/Culling/babylon.boundingSphere.js"></script>
    <script src="src/Culling/babylon.boundingBox.js"></script>
    <script src="src/Culling/babylon.boundingInfo.js"></script>
    <script src="src/Culling/babylon.ray.js"></script>
    <script src="src/Mesh/babylon.abstractMesh.js"></script>
    <script src="src/Lights/babylon.light.js"></script>
    <script src="src/Lights/babylon.pointLight.js"></script>
    <script src="src/Lights/babylon.spotLight.js"></script>
    <script src="src/Lights/babylon.hemisphericLight.js"></script>
    <script src="src/Lights/babylon.directionalLight.js"></script>
    <script src="src/Lights/Shadows/babylon.shadowGenerator.js"></script>
    <script src="src/Collisions/babylon.collider.js"></script>
    <script src="src/Collisions/babylon.collisionCoordinator.js"></script>
    <script src="src/Collisions/babylon.collisionWorker.js"></script>
    <script src="src/Cameras/babylon.camera.js"></script>
    <script src="src/Cameras/babylon.camerainputsmanager.js"></script>
    <script src="src/cameras/inputs/babylon.freecamera.input.mouse.js"></script>
    <script src="src/cameras/inputs/babylon.freecamera.input.keyboard.js"></script>
    <script src="src/cameras/inputs/babylon.freecamera.input.touch.js"></script>
    <script src="src/cameras/inputs/babylon.freecamera.input.deviceorientation.js"></script>
    <script src="src/cameras/inputs/babylon.freecamera.input.gamepad.js"></script>
    <script src="src/cameras/inputs/babylon.freecamera.input.virtualjoystick.js"></script>
    <script src="src/cameras/inputs/babylon.arcrotatecamera.input.keyboard.js"></script>
    <script src="src/cameras/inputs/babylon.arcrotatecamera.input.mousewheel.js"></script>
    <script src="src/cameras/inputs/babylon.arcrotatecamera.input.pointers.js"></script>
    <script src="src/cameras/inputs/babylon.arcrotatecamera.input.gamepad.js"></script>
    <script src="src/cameras/inputs/babylon.arcrotatecamera.input.vrdeviceorientation.js"></script>
    <script src="src/Cameras/babylon.targetCamera.js"></script>
    <script src="src/Cameras/babylon.followCamera.js"></script>
    <script src="src/Cameras/babylon.freeCamera.js"></script>
    <script src="src/Cameras/babylon.freeCameraInputsManager.js"></script>
    <script src="src/Cameras/babylon.touchCamera.js"></script>
    <script src="src/Cameras/babylon.arcRotateCamera.js"></script>
    <script src="src/Cameras/babylon.arcRotateCameraInputsManager.js"></script>
    <script src="src/Cameras/babylon.universalCamera.js"></script>
    <script src="src/Cameras/babylon.deviceOrientationCamera.js"></script>
    <script src="src/Tools/babylon.gamepads.js"></script>
    <script src="src/Cameras/babylon.gamepadCamera.js"></script>
    <script src="src/Rendering/babylon.renderingManager.js"></script>
    <script src="src/Rendering/babylon.renderingGroup.js"></script>
    <script src="src/babylon.scene.js"></script>
    <script src="src/Mesh/babylon.buffer.js"></script>
    <script src="src/Mesh/babylon.vertexBuffer.js"></script>
    <script src="src/Mesh/babylon.instancedMesh.js"></script>
    <script src="src/Mesh/babylon.mesh.js"></script>
    <script src="src/Mesh/babylon.meshBuilder.js"></script>
    <script src="src/Mesh/babylon.groundMesh.js"></script>
    <script src="src/Mesh/babylon.subMesh.js"></script>
    <script src="src/Materials/textures/babylon.baseTexture.js"></script>
    <script src="src/Materials/textures/babylon.texture.js"></script>
    <script src="src/Materials/textures/babylon.cubeTexture.js"></script>
    <script src="src/Materials/textures/babylon.renderTargetTexture.js"></script>
    <script src="src/Materials/textures/procedurals/babylon.proceduralTexture.js"></script>
    <script src="src/Materials/textures/procedurals/babylon.customProceduralTexture.js"></script>
    <script src="src/Materials/textures/babylon.mirrorTexture.js"></script>
    <script src="src/Materials/textures/babylon.refractionTexture.js"></script>
    <script src="src/Materials/textures/babylon.dynamicTexture.js"></script>
    <script src="src/Materials/textures/babylon.videoTexture.js"></script>
    <script src="src/Materials/textures/babylon.fontTexture.js"></script>
    <script src="src/Materials/textures/babylon.mapTexture.js"></script>
    <script src="src/Materials/babylon.effect.js"></script>
    <script src="src/Materials/babylon.materialHelper.js"></script>
    <script src="src/Materials/babylon.fresnelParameters.js"></script>
    <script src="src/Materials/babylon.material.js"></script>
    <script src="src/Materials/babylon.standardMaterial.js"></script>
    <script src="src/Materials/babylon.pbrMaterial.js"></script>
    <script src="src/Materials/babylon.multiMaterial.js"></script>
    <script src="src/Canvas2d/babylon.bounding2d.js"></script>
    <script src="src/Canvas2d/babylon.canvas2dLayoutEngine.js"></script>
    <script src="src/Canvas2d/babylon.brushes2d.js"></script>
    <script src="src/Canvas2d/babylon.smartPropertyPrim.js"></script>
    <script src="src/Canvas2d/babylon.prim2dBase.js"></script>
    <script src="src/Canvas2d/babylon.modelRenderCache.js"></script>
    <script src="src/Canvas2d/babylon.renderablePrim2d.js"></script>
    <script src="src/Canvas2d/babylon.shape2d.js"></script>
    <script src="src/Canvas2d/babylon.group2d.js"></script>
    <script src="src/Canvas2d/babylon.rectangle2d.js"></script>
    <script src="src/Canvas2d/babylon.sprite2d.js"></script>
    <script src="src/Canvas2d/babylon.text2d.js"></script>
    <script src="src/Canvas2d/babylon.canvas2d.js"></script>
    <script src="src/Canvas2d/babylon.ellipse2d.js"></script>
    <script src="src/Canvas2d/babylon.lines2d.js"></script>
    <script src="src/Canvas2d/babylon.worldspacecanvas2dNode.js"></script>
    <script src="src/Loading/babylon.sceneLoader.js"></script>
    <script src="src/Loading/Plugins/babylon.babylonFileLoader.js"></script>
    <script src="src/Sprites/babylon.spriteManager.js"></script>
    <script src="src/Sprites/babylon.sprite.js"></script>
    <script src="src/Layer/babylon.layer.js"></script>
    <script src="src/Particles/babylon.particle.js"></script>
    <script src="src/Particles/babylon.particleSystem.js"></script>
    <script src="src/Particles/babylon.solidParticle.js"></script>
    <script src="src/Particles/babylon.solidParticleSystem.js"></script>
    <script src="src/Animations/babylon.animation.js"></script>
    <script src="src/Animations/babylon.animatable.js"></script>
    <script src="src/Animations/babylon.easing.js"></script>
    <script src="src/Culling/Octrees/babylon.octree.js"></script>
    <script src="src/Culling/Octrees/babylon.octreeBlock.js"></script>
    <script src="src/Bones/babylon.bone.js"></script>
    <script src="src/Bones/babylon.skeleton.js"></script>
    <script src="src/PostProcess/babylon.postProcess.js"></script>
    <script src="src/PostProcess/babylon.postProcessManager.js"></script>
    <script src="src/PostProcess/babylon.passPostProcess.js"></script>
    <script src="src/PostProcess/babylon.blurPostProcess.js"></script>
    <script src="src/PostProcess/babylon.refractionPostProcess.js"></script>
    <script src="src/PostProcess/babylon.blackAndWhitePostProcess.js"></script>
    <script src="src/PostProcess/babylon.convolutionPostProcess.js"></script>
    <script src="src/PostProcess/babylon.filterPostProcess.js"></script>
    <script src="src/PostProcess/babylon.fxaaPostProcess.js"></script>
    <script src="src/LensFlare/babylon.lensFlare.js"></script>
    <script src="src/LensFlare/babylon.lensFlareSystem.js"></script>
    <script src="src/Physics/Plugins/babylon.cannonJSPlugin.js"></script>
    <script src="src/Physics/Plugins/babylon.oimoJSPlugin.js"></script>
    <script src="src/Physics/babylon.physicsImpostor.js"></script>
    <script src="src/Physics/babylon.physicsEngine.js"></script>
    <script src="src/Physics/babylon.physicsJoint.js"></script>
    <script src="src/Tools/babylon.sceneSerializer.js"></script>
    <script src="src/Mesh/babylon.csg.js"></script>
    <script src="src/PostProcess/babylon.vrDistortionCorrectionPostProcess.js"></script>
    <script src="src/Tools/babylon.virtualJoystick.js"></script>
    <script src="src/Cameras/babylon.virtualJoysticksCamera.js"></script>
    <script src="src/Materials/babylon.shaderMaterial.js"></script>
    <script src="src/Mesh/babylon.mesh.vertexData.js"></script>
    <script src="src/PostProcess/babylon.anaglyphPostProcess.js"></script>
    <script src="src/Tools/babylon.tags.js"></script>
    <script src="src/Tools/babylon.andOrNotEvaluator.js"></script>
    <script src="src/PostProcess/RenderPipeline/babylon.postProcessRenderPass.js"></script>
    <script src="src/PostProcess/RenderPipeline/babylon.postProcessRenderEffect.js"></script>
    <script src="src/PostProcess/RenderPipeline/babylon.postProcessRenderPipeline.js"></script>
    <script src="src/PostProcess/RenderPipeline/babylon.postProcessRenderPipelineManager.js"></script>
    <script src="src/PostProcess/babylon.displayPassPostProcess.js"></script>
    <script src="src/Rendering/babylon.boundingBoxRenderer.js"></script>
    <script src="src/Actions/babylon.condition.js"></script>
    <script src="src/Actions/babylon.action.js"></script>
    <script src="src/Actions/babylon.actionManager.js"></script>
    <script src="src/Actions/babylon.interpolateValueAction.js"></script>
    <script src="src/Actions/babylon.directActions.js"></script>
    <script src="src/Mesh/babylon.geometry.js"></script>
    <script src="src/Mesh/babylon.linesMesh.js"></script>
    <script src="src/Rendering/babylon.outlineRenderer.js"></script>
    <script src="src/Tools/babylon.assetsManager.js"></script>
    <script src="src/Cameras/VR/babylon.vrCameraMetrics.js"></script>
    <script src="src/Cameras/VR/babylon.vrDeviceOrientationCamera.js"></script>
    <script src="src/Cameras/VR/babylon.webVRCamera.js"></script>
    <script src="src/Tools/babylon.sceneOptimizer.js"></script>
    <script src="src/Tools/babylon.earcut.js"></script>
    <script src="src/Mesh/babylon.meshLODLevel.js"></script>
    <script src="src/Audio/babylon.audioEngine.js"></script>
    <script src="src/Audio/babylon.sound.js"></script>
    <script src="src/Audio/babylon.soundtrack.js"></script>
    <script src="src/Debug/babylon.skeletonViewer.js"></script>
    <script src="src/Debug/babylon.debugLayer.js"></script>
    <script src="src/Materials/Textures/babylon.rawTexture.js"></script>
    <script src="src/Mesh/babylon.polygonMesh.js"></script>
    <script src="src/Mesh/babylon.meshSimplification.js"></script>
    <script src="src/Audio/babylon.analyser.js"></script>
    <script src="src/Rendering/babylon.depthRenderer.js"></script>
    <script src="src/PostProcess/babylon.ssaoRenderingPipeline.js"></script>
    <script src="src/PostProcess/babylon.volumetricLightScatteringPostProcess.js"></script>
    <script src="src/PostProcess/babylon.lensRenderingPipeline.js"></script>
    <script src="src/PostProcess/babylon.colorCorrectionPostProcess.js"></script>
    <script src="src/PostProcess/babylon.stereoscopicInterlacePostProcess.js"></script>
    <script src="src/Cameras/babylon.stereoscopicCameras.js"></script>
    <script src="src/PostProcess/babylon.hdrRenderingPipeline.js"></script>
    <script src="src/Rendering/babylon.edgesRenderer.js"></script>
    <script src="src/Tools/babylon.loadingScreen.js"></script>
    <script src="src/Probes/babylon.reflectionProbe.js"></script>
    <script src="src/tools/hdr/babylon.tools.pmremGenerator.js"></script>
    <script src="src/tools/hdr/babylon.tools.cubemapToSphericalPolynomial.js"></script>
    <script src="src/tools/hdr/babylon.tools.panoramaToCubemap.js"></script>
    <script src="src/tools/hdr/babylon.tools.hdr.js"></script>
    <script src="src/materials/textures/babylon.hdrCubeTexture.js"></script>
    <script src="/src/Materials/Textures/babylon.colorGradingTexture.js"></script>
    <script src="/src/Materials/babylon.colorcurves.js"></script>
</head>
<body>
    <!--<p style="font-family: 'Arial'; font-size: 12pt; background-color: #40C040; color:white">Long press me!</p>-->
<!--    <canvas width="100" height="14" id="canvas2d"></canvas>-->
    <canvas width="600" height="600" id="renderCanvas"></canvas>

    <script src="http://code.jquery.com/jquery.js"></script>

    <script src="typescript/MainClass.js"></script>

    <script type="text/ecmascript">
        var p = new Sandbox.MainClass();
        p.start();
    </script>
</html>

 

[lostwoods91]

seems still all correct...

ok, i'll just use visual studio + internet explorer debugging.

i don't want to waste your time just for this little thing!

thank you for the time spent helping me!

bye!