Babylon JS

CDN

Add script to <head>  [insert script] </head> or context section of Theme, Static, CMS Template. It can be used both globally and scoped in Component based architecture: VUE, Svelte. React has built a separate abstraction to deal with the processing load to Viewport.

You can also access node CLI and install to native compile.

WordPress / Shopify use React in Blocks and Tooling, Scoping, is managed by CMS/E Commerce Native Workflows.

<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
<script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
<script src="https://cdn.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
<script src="https://cdn.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
<script src="https://cdn.babylonjs.com/gui/babylon.gui.min.js"></script>
<script src="https://cdn.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
<script src="https://cdn.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>

Wire Frame


	<style>
	           #canvasA {              
                   width:100%;              
                   height:100%;          
                   }      
	</style>


	<canvas id="canvasA"></canvas>
	

<script>
    window.addEventListener("DOMContentLoaded", function () {
        var canvas = document.getElementById("canvasA");
        var engine = new BABYLON.Engine(canvas, true);
        var createScene = function () {
            var scene = new BABYLON.Scene(engine);
            scene.clearColor = new BABYLON.Color3.White();
            var box = BABYLON.Mesh.CreateBox("Box", 4.0, scene);

            var camera = new BABYLON.ArcRotateCamera("arcCamera", BABYLON.Tools.ToRadians(45), BABYLON.Tools.ToRadians(45), 10.0, box.position, scene);
            camera.setTarget(BABYLON.Vector3.Zero());
            camera.attachControl(canvas, true);
            
            var material = new BABYLON.StandardMaterial("material1", scene);
            material.wireframe = true;
            box.material = material;
            
            return scene;
        }


        var scene = createScene();
        engine.runRenderLoop(function () {
            scene.render();
        });
    });
</script>

With Textures


	<style>
	           #canvas1 {              
                   width:100%;              
                   height:100%;          
                   }      
	</style>


	<canvas id="canvas1"></canvas>
	<script>
	     window.addEventListener('DOMContentLoaded', function(){          
       var canvas = document.getElementById('canvas1');            
       var engine = new BABYLON.Engine(canvas, true);            
       var createScene = function(){              
       var scene = new BABYLON.Scene(engine);              
         scene.clearColor = new BABYLON.Color3.White();              
       var box = BABYLON.Mesh.CreateBox("Box",4.0,scene);                
       var camera = new BABYLON.ArcRotateCamera("arcCam",                      
         BABYLON.Tools.ToRadians(45),                      
         BABYLON.Tools.ToRadians(45), 10.0,box.position,scene);                
         camera.attachControl(canvas,true);                
       var light = new BABYLON.PointLight("pointLight",new BABYLON.Vector3(5,5,0),scene);              
         light.diffuse = new BABYLON.Color3(1,1,1);                    
       var material = new BABYLON.StandardMaterial("material1",scene);              
         material.diffuseColor = BABYLON.Color3.Blue();              
         material.emissiveColor = BABYLON.Color3.Red();                
         material.specularColor = BABYLON.Color3.Red();              
         material.specularPower = 3;              
         material.alpha = 1.0;              
         box.material = material;                
       var plane = BABYLON.Mesh.CreatePlane("plane", 10.0, scene, false,               
         BABYLON.Mesh.DOUBLESIDE);              
         plane.material = new BABYLON.StandardMaterial("material2",scene);              
         plane.material.diffuseColor = new BABYLON.Color3.White();              
         plane.material.backFaceCulling = false;              
         plane.position = new BABYLON.Vector3(0,0,-5);                
       return scene;         
       }            
       
       var scene = createScene();          
       engine.runRenderLoop(function(){             
       var material = scene.getMeshByName("Box").material;  
       
       //            material.alpha -= 0.01;  
       //            if(material.alpha < 0) material.alpha = 1.0;             
       scene.render();         
       
      	 });       
       
       });  
	</script>

Water with Bump Map

<style>


    #renderCanvas2 {
        width: 100%;
        height: 100%;
        touch-action: none;
    }
</style>

<canvas id="renderCanvas2"></canvas>
<script>
var canvas = document.getElementById("renderCanvas2");

var engine = null;
var scene = null;
var sceneToRender = null;
var createDefaultEngine = function() { return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true }); };
var createScene = function (engine) {
    var scene = new BABYLON.Scene(engine);

    // Camera
    var camera = new BABYLON.ArcRotateCamera("Camera", 3 * Math.PI / 2, Math.PI / 2.5, 50, BABYLON.Vector3.Zero(), scene);
    camera.attachControl(canvas, true);
    
    // Light
    var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);

    // Skybox
    var skybox = BABYLON.Mesh.CreateBox("skyBox", 5000.0, scene);
    var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
    skyboxMaterial.backFaceCulling = false;
    skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("//www.babylonjs.com/assets/skybox/TropicalSunnyDay", scene);
    skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
    skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
    skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
    skyboxMaterial.disableLighting = true;
    skybox.material = skyboxMaterial;

    // Water material
    var waterMaterial = new BABYLON.WaterMaterial("waterMaterial", scene, new BABYLON.Vector2(512, 512));
    waterMaterial.bumpTexture = new BABYLON.Texture("//www.babylonjs.com/assets/waterbump.png", scene);
    waterMaterial.windForce = -10;
    waterMaterial.waveHeight = 0.5;
    waterMaterial.bumpHeight = 0.1;
    waterMaterial.waveLength = 0.1;
    waterMaterial.waveSpeed = 50.0;
    waterMaterial.colorBlendFactor = 0;
    waterMaterial.windDirection = new BABYLON.Vector2(1, 1);
    waterMaterial.colorBlendFactor = 0;

    // Ground
    var groundTexture = new BABYLON.Texture("https://uploads-ssl.webflow.com/5f3bc5c03c8ce34258cb10c8/5f3c54e8f46a83f4c8986cec_waterbump.png", scene);
    groundTexture.vScale = groundTexture.uScale = 4.0;

    var groundMaterial = new BABYLON.StandardMaterial("groundMaterial", scene);
    groundMaterial.diffuseTexture = groundTexture;

    var ground = BABYLON.Mesh.CreateGround("ground", 512, 512, 32, scene, false);
    ground.position.y = -1;
    ground.material = groundMaterial;

    // Water mesh
    var waterMesh = BABYLON.Mesh.CreateGround("waterMesh", 512, 512, 32, scene, false);
    waterMesh.material = waterMaterial;

    // Sphere
    var sphereMaterial = new BABYLON.StandardMaterial("sphereMaterial", scene);
    sphereMaterial.diffuseTexture = new BABYLON.Texture("//www.babylonjs.com/assets/wood.jpg", scene);

    var sphere = BABYLON.Mesh.CreateSphere("sphere", 16, 10, scene);
    sphere.position.y = 20;
    sphere.material = sphereMaterial;

    // Configure water material
    waterMaterial.addToRenderList(ground);
    waterMaterial.addToRenderList(skybox);
    waterMaterial.addToRenderList(sphere);

    ////////// RAY CAST TO FIND WATER HEIGHT ////////////
    //var angle = 0;
    let i = 0;
    scene.registerBeforeRender(function() {
        let time = waterMaterial._lastTime / 100000;
        let x = sphere.position.x;
        let z = sphere.position.z;
        sphere.position.y = Math.abs((Math.sin(((x / 0.05) + time * waterMaterial.waveSpeed)) * waterMaterial.waveHeight * waterMaterial.windDirection.x * 5.0) + (Math.cos(((z / 0.05) +  time * waterMaterial.waveSpeed)) * waterMaterial.waveHeight * waterMaterial.windDirection.y * 5.0));
    });

    return scene;
};
var engine;
try {
engine = createDefaultEngine();
} catch(e) {
console.log("the available createEngine function failed. Creating the default engine instead");
engine = createDefaultEngine();
}
if (!engine) throw 'engine should not be null.';
scene = createScene();;
sceneToRender = scene

engine.runRenderLoop(function () {
    if (sceneToRender) {
        sceneToRender.render();
    }
});

// Resize
window.addEventListener("resize", function () {
    engine.resize();
});
</script>

Babylon Native

WEBGL depends on a Canvas element that prevents Native Viewport. Developing in Babylon, lets you recycle the code for WEB/PWA and for Native Application Development process.

Babylon JS

Why Babylon JS?

Babylon JS is an easy to use Library built on top of WEB GL. It is similar to its predesesor, Three JS. Babylon JS, shares the functional elements: Camera, Lights, Primitives.  Uniquely, Babylon, provides easy to use WYSWYG tools that provide copy and paste snippets. The new addition of a drag and drop Node Shader, and fast realistic rendering engine, improve photo perfect rendering. This is a significant workflow addition. Rendering and Shading were formerly CPU and processing heavy. Along with the Library, are lots of tools, a playground, and downloadable prebuilt code. A new highly powerful node editor generates, extremely high processor intensive functions and translates to usable basic JS.

Vanilla JS, can be used in WordPress, E Commerce Themes, Webflow, Static Sites. PWA downloadable applications can be built alongside, Web Based Design Systems. Modular architecture allows for integration into legacy and support systems like Guardrail dependent plugins/CRMs. This format is preferable for E commerce workflows, that restrict compiled code workflows, like React Three Fiber.

Both Facebook, Shopify accept glTF formats/Vanilla JS. This blog / WordPress, utilizes an underlying component engine.

There is a Native application build system. The rich rendering, allows for realistic "gaming", real life cinematic 3D experience.  A core tenant of this engine, is that it will always be backwards compatible.  Applications will not break with version updates.

There is a robust physics system.

There is robust PBR shading/and impressive rendering engine, with 60 fps playback.

Web GL /

Three JS

WEB GL

WebGL, is a Javascript Library, built to model 3D Animations and Motion

Applications are made of core elements

Canvas/Viewport

Scene

Camera

Lights

Mesh/Wireframes made from Triangle patterns

Materials/Colors, Patterns, Bump Maps

Shaders/Photoshop like alterations of flat Materials, Alpha Channels, Repeat, Noise

Physics

  • Starter Link
  • Three JS
  • Book of Shaders
  • Pixel Spirit WEBGL Cards
  • Codepen Sample 1
  • Codepen Sample 2
  • Nerds Guide to Web Color

Other Applications

A FRAME

A Frame is an abstracted library built on top of Web GL.

It doesn't have as powerful of a rendering engine, or shading, as Babylon JS.

A Frame is simpler, and easier to learn.

It is ideal for lo poly games and interaction. The architecture is also an abstracted Three/WEBGL library.

A FRAME

REACT THREE FIBER

React Application Library built on top of WebGL

The build and mounting system includes a process that moves the Canvas render outside of the native React Viewport.

SVG the spline/mesh system is ALREADY native. The build and rendering system, is overly complicated.  React Three Fiber, depends on a View, rendering engine, that has to eject from Canvas. I find it is easier to use SVG configuration system that is a universal application system.

THREE JS

The "original" JS abstracted library built on top of Web GL.

Use this documentation is a good resource to set up Babylon, paramater syntax.


Resources


Babylon JS

Introduction to the Library, and awesome set of tools. 

BABYLON


Playground Sample Code

Playground. Download Sample Code, for modules. Syntax, IA, live editing.

PLAYGROUND

Node Material Editor

NODE, PBR, Shading and Texture Mapping Tools. Use drag and drop modules to create / map reusable shaders.

NODE EDITOR


GLTF/GLB/OBJ Viewer

3D Model Preview. Bring in mesh / wire models. 

GLB Preview


Editor

Full web based editor.  Links to Photoshop/3D bump map and deco/texture. Generates: Scenes, Primitives, Textures, with exports to Babylon and Rendering.


Photoshop 3D

Photoshop 3d Primitive/Texture Media Editing Timeline functions.

© 2020 All rights reserved. Powered by Yoonsun Lee.