Tag: BabylonJS Cheat Sheet

Syntax

var materialforshapes = new BABYLON.StandardMaterial("texture1", scene);

Properties

Transparency

materialforbox.alpha = 0.5;

Diffuse

materialforbox.diffuseColor = new BABYLON.Color3(1.0, 0.2, 0.7);

Emissive

materialforbox.emissiveColor = new BABYLON.Color3(1, .2, .7);
materialforbox.emissiveTexture = new BABYLON.Texture("images/nature.jpg", scene);

Ambient

materialforbox.ambientColor = new BABYLON.Color3(1, 0, 0.2);

Specular

• Specular color

materialforbox.specularColor = new BABYLON.Color3(1.0, 0.2, 0.7);

• Specular texture

materialforbox.specularTexture = new BABYLON.Texture("grass.png", scene);

WireFrame

materialforbox.wireframe = true;

Basic Material Property – FresnelParameters

Below are properties are available for Fresnel:

StandardMaterial.diffuseFresnelParameters
StandardMaterial.opacityFresnelParameters
StandardMaterial.reflectionFresnelParameters
StandardMaterial.emissiveFresnelParameters
StandardMaterial.refractionFresnelParameters

The syntax for Animations:

var animationBox = new BABYLON.Animation(
   "myAnimation", 
   "scaling.x", 
   30, 
   BABYLON.Animation.ANIMATIONTYPE_FLOAT, 
   BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
);

The parameters related to Animations with BabylonJS:

• Name of the animation.
• Property of the shape – for example, scaling, changing position, etc. Scaling is what is shown in the syntax; here, it will scale the box along the x-axis.
• Frames per second requested: highest FPS possible in this animation.
• Here you decide and enter what kind of value will be modified: is it afloat (e.g. a translation), a vector (e.g. a direction), or a quaternion.
• Exact values are −
  • BABYLON.Animation.ANIMATIONTYPE_FLOAT
  • BABYLON.Animation.ANIMATIONTYPE_VECTOR2
  • BABYLON.Animation.ANIMATIONTYPE_VECTOR3
  • BABYLON.Animation.ANIMATIONTYPE_QUATERNION
  • BABYLON.Animation.ANIMATIONTYPE_COLOR3
• The behavior for animation – to stop or to start the animation again.
• Use previous values and increment it −
  • BABYLON.Animation.ANIMATIONLOOPMODE_RELATIVE
• Restart from initial value −
  • BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
• Keep their final value
  • BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT

Create the animation object:

var animationBox = new BABYLON.Animation(
   "myAnimation", 
   "scaling.x", 
   30, 
   BABYLON.Animation.ANIMATIONTYPE_FLOAT, 
   BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
);

FreeCamera

The syntax for the FreeCamera:

var camera = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(0, 1, -15), scene);

This is the position in which the camera is placed – new BABYLON.Vector3(0, 1, -15).

The parameters used by the FreeCamera −

• Name
• Position
• Scene

ArcRotateCamera

The syntax for the ArcRotateCamera:

var camera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);

TouchCamera

The syntax for TouchCamera:

var camera = new BABYLON.TouchCamera("TouchCamera", new BABYLON.Vector3(0, 1, -15), scene);

GamepadCamera

The syntax for the Gamepad Camera:

var camera = new BABYLON.GamepadCamera("Camera", new BABYLON.Vector3(0, 15, -45), scene);

DeviceOrientationCamera

The syntax for the DeviceOrientationCamera:

var camera = new BABYLON.DeviceOrientationCamera("DevOr_camera", new BABYLON.Vector3(0, 1, -15), scene);

FollowCamera

The syntax for the FollowCamera:

var camera = new BABYLON.FollowCamera("FollowCam", new BABYLON.Vector3(0, 15, -45), scene);

VirtualJoysticksCamera

The syntax for the VirtualJoysticksCamera:

var camera = new BABYLON.VirtualJoysticksCamera("VJ_camera", new BABYLON.Vector3(0, 1, -15), scene);

AnaglyphCamera

AnaglyphArcRotateCamera

The syntax for the AnaglyphArcRotateCamera:

var camera = new BABYLON.AnaglyphArcRotateCamera("aar_cam", -Math.PI/2, Math.PI/4, 20, new BABYLON.Vector3.Zero(), 0.033, scene);

AnaglyphFreeCamera

The syntax for the AnaglyphFreeCamera:

var camera = new BABYLON.AnaglyphFreeCamera("af_cam", new BABYLON.Vector3(0, 1, -15), 0.033, scene);

VRDeviceOrientationFreeCamera

The syntax for the VRDeviceOrientationFreeCamera:

var camera = new BABYLON.VRDeviceOrientationFreeCamera ("Camera", new BABYLON.Vector3 (-6.7, 1.2, -1.3), scene, 0);

WebVRFreeCamera

The syntax for the WebVRFreeCamera:

var camera = new BABYLON.WebVRFreeCamera("WVR", new BABYLON.Vector3(0, 1, -15), scene);

Point Light

The syntax for point light:

var light0 = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(1, 10, 1), scene);

Three params for Point Light:

• The 1st param is the name of the light.
• The 2nd param is the position where the point light is placed.
• The 3rd param is the scene to which the light needs to be attached.

Add color on the object created above:

light0.diffuse = new BABYLON.Color3(1, 0, 0);
light0.specular = new BABYLON.Color3(1, 1, 1);

Directional Light

The syntax for Directional Light:

var light0 = new BABYLON.DirectionalLight("Dir0", new BABYLON.Vector3(0, -1, 0), scene);

Three params for Directional Light:

• The 1^st param is the name of the light.
• The 2^nd param is the position. Right now, it isplaced with negative -1 in the Y axis.
• The 3^rd param is the scene to be attached.

Add color with the specular and diffuse property:

light0.diffuse = new BABYLON.Color3(0, 1, 0);
light0.specular = new BABYLON.Color3(1,0, 0);

Spot Light

The syntax for the Spot Light:

var light0 = new BABYLON.SpotLight("Spot0", new BABYLON.Vector3(0, 30, -10), new BABYLON.Vector3(0, -1, 0), 0.8, 2, scene);

Five params for Spot Light:

• 1^st Param is the name of the light.
• 2^nd param is the position.
• 3^rd param is the direction.
• 4^th param is the angle.
• 5^th param is the exponent.

Control the color of the light:

light0.diffuse = new BABYLON.Color3(1, 0, 0);
light0.specular = new BABYLON.Color3(1, 1, 1);

Hemispheric Light

The syntax for the Hemispheric Light:

var light0 = new BABYLON.HemisphericLight("Hemi0", new BABYLON.Vector3(0, 1, 0), scene);

For colors:

light0.diffuse = new BABYLON.Color3(1, 0, 0);
light0.specular = new BABYLON.Color3(0, 1, 0);
light0.groundColor = new BABYLON.Color3(0, 0, 0);

Ribbon

Ribbon takes an array of paths as input and draws lines along those paths. It uses complex logic to get the co-ordinates.

var ribbon = new BABYLON.Mesh.CreateRibbon("ribbon", paths, false, false, null, scene);

Line

Line is a basic element in 3D games. To draw a line, you need two points between which you can draw a line.

var mesh = BABYLON.Mesh.CreateLines("lines", path, scene, true);

Tube

Tube is a curved cylinder shape. It can give different parametric shapes based on the equation (maths function) applied to it to get the co-ordinates.

var tube =  BABYLON.Mesh.CreateTube(name, path, radius, tessellation, radiusFunction, cap, scene, updatable?, sideOrientation);

Extrusion

Extrusion helps in transforming a 2D shape into a volumic shape.

BABYLON.Mesh.ExtrudeShape(name, shape, path, scale, rotation, cap, scene, updatable?, sideOrientation)

Decals are used to add details on the created mesh – details like bullets, holes, etc.

The syntax to add Decal:

var newDecal = BABYLON.Mesh.CreateDecal("decal", mesh, decalPosition, normal, decalSize, angle);

Quadratic Bezier Curve

Syntax

var bezier = BABYLON.Curve3.CreateQuadraticBezier(origin, control, destination, nb_of_points);

Parameters

Below are parameters related to the Quadratic Bezier Curve:

• Origin − The origin point for the curve.
• Control − Control points for the curve.
• Destination − Destination point.
• Noofpoints − Points in the array.

Cubic Bezeir Curve

Syntax

var bezier3 = BABYLON.Curve3.CreateCubicBezier(origin, control1, control2, destination, nb_of_points)

Parameters

Below are parameters related to the Cubic Bezier Curve:

• Origin − Origin point.
• control1 − The first control point in vector form.
• control2 − The second control point in vector form.
• Destination − Destination point in vector form.
• no_of_points − The number of points in array form.

HermiteSpline Curve

Syntax

var hermite = BABYLON.Curve3.CreateHermiteSpline(p1, t1, p2, t2, nbPoints);

Parameters

Below are parameters related to the Hermite Spline Curve :

• p1 − The origin point for the curve.
• t1 − The origin tangent vector point.
• p2 − Destination point.
• t2 − Destination tangent vector.
• NbPoints − The array of points for the final curve.

Catmull-Rom Spline Curve

Syntax

var nbPoints = 20;   // the number of points between each Vector3 control points
var points = [vec1, vec2, ..., vecN];  // an array of Vector3 the curve must pass through : the control points
var catmullRom = BABYLON.Curve3.CreateCatmullRomSpline(points, nbPoints);

Parameters

Below are parameters related to the Catmull-Rom Spline Curve:

• Points − An array of Vector3, the curve must pass through the control points.
• NbPoints − The number of points between each Vector3 control points.

var path = catmullRom.getPoints(); // getPoints() returns an array of successive Vector3.
var l = catmullRom.length(); // method returns the curve length.

The syntax to create Dynamic Texture:

var myDynamicTexture = new BABYLON.DynamicTexture(name, option, scene);

The required parameters to create Dynamic texture:

• name − name of the dynamic texture
• option − will have the width and height of the dynamic texture
• scene − scene created

The syntax to write text on the texture

myDynamicTexture.drawText(text, x, y, font, color, canvas color, invertY, update);

The required parameters to write text on the texture

• text − text to be written;
• x − distance from the left-hand edge;
• y − distance from the top or bottom edge, depending on invertY;
• font − font definition in the form font-style, font-size, font_name;
• invertY − true by default in which case y is the distance from the top when false, y is the distance from the bottom and the letters reversed;
• update − true by default, the dynamic texture will immediately be updated.

Below are 3 properties which are present with parallax mapping:

• material.useParallax = true; − This enables parallax mapping. To use this property you need to assign bump texture to the material first.
• material.useParallaxOcclusion = true; − To use this property, you have to set useParallax true. It enables Parallax Occlusion.
• material.parallaxScaleBias = 0.1; − Applies a scaling factor for the depth to be as singed to the mesh. A value between .05 and .1 is fine for Parallax. For occlusion, you can reach 0.2.

The syntax to create lens flare:

var lensFlareSystem = new BABYLON.LensFlareSystem("lensFlareSystem", light0, scene);

Parameters to create lens flare:

• Name − Name given to the lensflaresystem.
• Light − This can be light source or camera.
• Scene − Scene to which the lens flare will be added.

To add flares to the scene, execute the following command −

var flare1 = new BABYLON.LensFlare(0.5, 0.15, new BABYLON.Color3(1, 1, 1), "images/sun1.png", lensFlareSystem);

• Size − Floating value between 0 and 1.
• Position − The source (the emitter) of the lens flares (it can be a camera, a light or a mesh).
• Lensflaresystem − Object created using lensflaresystem class.

Syntax to take screenshot of the screen:

BABYLON.Tools.CreateScreenshot(engine, camera, { width: 1024, height: 300 }, function (data) {
   var img = document.createElement("img");
   img.src = data;
   document.body.appendChild(img);	
});

Changes are made to the engine which is passed to the screenshot api.

var engine = new BABYLON.Engine(canvas, true, { 
   preserveDrawingBuffer: true, stencil: true 
});	

It requires options like preserveDrawingBuffer and stencil set to true.

Button is added:

ssButton = document.createElement("input");
document.body.appendChild (ssButton);

Syntax

var probe = new BABYLON.ReflectionProbe("main", 512, scene);
probe.renderList.push(yellowSphere);
probe.renderList.push(greenSphere);	
probe.renderList.push(blueSphere);	
probe.renderList.push(mirror);

Syntax to get the Shader Material

pvar myShaderMaterial = new BABYLON.ShaderMaterial(name, scene, route, options);


Parameters

The parameters related to the shader material:

• Name − A string, naming the shader.
• Scene − The scene in which the shader is to be used.
• Route − The route to the shader code in one of the three ways −

object - {
   vertex: "custom", 
   fragment: "custom" 
}, used with 
BABYLON.Effect.ShadersStore["customVertexShader"] and
BABYLON.Effect.ShadersStore["customFragmentShader"]


object - { 
   vertexElement: "vertexShaderCode", 
   fragmentElement: "fragmentShaderCode" 
}, 
used with shader code in <script> tags


string - "./COMMON_NAME", 

• Options − object containing attributes and uniforms arrays containing their names as strings.

The shader syntax with values look as shown below −

var shaderMaterial = new BABYLON.ShaderMaterial("shader", scene, {
   vertex: "custom",
   fragment: "custom",
},
{
   attributes: ["position", "normal", "uv"],
   uniforms: ["world", "worldView", "worldViewProjection", "view", "projection"]
});

Attributes have to be in array form. These contain position, normal and uv which are vector3 3D floating point vectors.

• vec2 − A two-dimensional vector of floating-point numbers.
• vec3 − A three-dimensional vector of floating-point numbers.
• mat4 − A matrix with 4 columns and 4 rows floating-point numbers.
• gl_Position − It provides positional data for screen coordinates.
• gl_FragColor − It provides colour data for the representation of a facet on screen.

The above are built in variables in GLSL language.

Below is the syntax to get the shader material

var myShaderMaterial = new BABYLON.ShaderMaterial(name, scene, route, options);

Parameters

The parameters related to the shader material:

• Name − A string, naming the shader.
• Scene − The scene in which the shader is to be used.
• Route − The route to the shader code in one of the three ways.

Syntax:

object - {
   vertex: "custom", 
   fragment: "custom" 
}, used with 
BABYLON.Effect.ShadersStore["customVertexShader"] and
BABYLON.Effect.ShadersStore["customFragmentShader"]

object - { 
   vertexElement: "vertexShaderCode", 
   fragmentElement: "fragmentShaderCode" 
}, 
used with shader code in <script> tags

string - "./COMMON_NAME", 

This syntax used with external files COMMON_NAME.vertex.fx and COMMON_NAME.fragment.fx in the index.html folder.

• Options − object containing attributes and uniforms arrays containing their names as strings.

Syntax:

var shaderMaterial = new BABYLON.ShaderMaterial("shader", scene, {
   vertex: "custom",
   fragment: "custom",
},
{
   attributes: ["position", "normal", "uv"],
   uniforms: ["world", "worldView", "worldViewProjection", "view", "projection"]
});

Note: Attributes have to be in array form.

• vec2 − A two-dimensional vector of floating-point numbers.
• vec3 − A three-dimensional vector of floating-point numbers.
• mat4 − A matrix with 4 columns and 4 rows floating-point numbers.
• gl_Position − It provides positional data for screen coordinates.
• gl_FragColor − It provides colour data for the representation of a facet on screen.

The syntax for Skeleton and Bone created by BabylonJS

For Skeleton

BABYLON.Skeleton = function (name, id, scene)

For Bone

BABYLON.Bone = function (name, skeleton, parentBone, matrix)

Skeletons and Bones can be created using blender and the same can be exported in .babylonjs.

var music = new BABYLON.Sound(
   "Music", "sound.wav", scene, null, { 
      loop: true, 
      autoplay: true 
   }
);

The following parameters related to the sound engine:

• Name − Name of the sound.
• URL − URL of the sound to be played.
• Scene − Scene to which the sound has to be played.
• Callbackfunction − The callbackfunction which is called when the sound is ready to be played. At present, it is null. We will go through a few examples and learn how to use it.
• Json object − This object has basic details of what needs to be done.
• sound.autoplay − With this, the sound plays automatically once the file is downloaded.
• loop: true − This means the sound will continuously play in a loop.