Introduction

There are several “common” development platforms for 3D Modeling. Three JS, and Babylon are JS Libraries built on top of WEB GL. Others like A Frame, an VR Libraries build on the core 3D spline/mesh wrapped in a texture. Three JS, Babylon, Unity, share core concepts and setup. Stage, Camera, Light interact with physics and geometry. 

Mesh and Models resource primitives and wrap with textures. 

GLTF/glb file extensions is the file format for modeling. A glTF file includes meshes and linked textures and depth maps, in a file. A glb file is the same file, in a single “zipped” format.

Babylon, Three JS are javascript formats.

Unity runs with C# development.

SVG (Illustrator) has a C# header and “divs” can be styled with inline JS/CSS. The viewport is the artboard, that can render with conditional load.

Simarlarly, CSS is essentially C code in Functional script.

XML, JSON follow similar functional patterns.

glTF in Unity

“Traditionally”, fbx, obj, textures are brought into Unity. With glTF workflow becoming a standard, there is a plugin package, that will allow glb/glTF files to be imported with “baked” functionality.

This is a new standard, and WIP.

 

Utility Vars

Think of a “stage” with a camera, lights, sky. Each element can animate and record states. 

Establish Canvas

Create Scene

Create Camera

Create Light

Add Mesh

Render Objects/Shaders on Viewport/Canvas

Apply Texture/Normals (Hi Contrast PSD/Repeat Pattern Illustrator/SVG)

Core Web GL Concepts

with Three JS

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/102/three.js" type="text/javascript" ></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js" type="text/javascript" ></script>




<style>
    canvas { 
    display: block;
}


</style>



<script>
        var scene = new THREE.Scene();

        var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000)
        camera.position.z = 5;
        
        var renderer = new THREE.WebGLRenderer({antialias: true});
        renderer.setClearColor("#e5e5e5");
        renderer.setSize(window.innerWidth,window.innerHeight);

        document.body.appendChild(renderer.domElement);

        window.addEventListener('resize', () => {
            renderer.setSize(window.innerWidth,window.innerHeight);
            camera.aspect = window.innerWidth / window.innerHeight;

            camera.updateProjectionMatrix();
        })

        var raycaster = new THREE.Raycaster();
        var mouse = new THREE.Vector2();

        var geometry = new THREE.BoxGeometry(1, 1, 1);
        var material = new THREE.MeshLambertMaterial({color: 0xF7F7F7});
        //var mesh = new THREE.Mesh(geometry, material);

        //scene.add(mesh);

        meshX = -10;
        for(var i = 0; i<15;i++) {
            var mesh = new THREE.Mesh(geometry, material);
            mesh.position.x = (Math.random() - 0.5) * 10;
            mesh.position.y = (Math.random() - 0.5) * 10;
            mesh.position.z = (Math.random() - 0.5) * 10;
            scene.add(mesh);
            meshX+=1;
        }


        var light = new THREE.PointLight(0xFFFFFF, 1, 1000)
        light.position.set(0,0,0);
        scene.add(light);

        var light = new THREE.PointLight(0xFFFFFF, 2, 1000)
        light.position.set(0,0,25);
        scene.add(light);

        var render = function() {
            requestAnimationFrame(render);


            renderer.render(scene, camera);
        }

        function onMouseMove(event) {
            event.preventDefault();

            mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
            mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

            raycaster.setFromCamera(mouse, camera);

            var intersects = raycaster.intersectObjects(scene.children, true);
            for (var i = 0; i < intersects.length; i++) {
                this.tl = new TimelineMax();
                this.tl.to(intersects[i].object.scale, 1, {x: 2, ease: Expo.easeOut})
                this.tl.to(intersects[i].object.scale, .5, {x: .5, ease: Expo.easeOut})
                this.tl.to(intersects[i].object.position, .5, {x: 2, ease: Expo.easeOut})
                this.tl.to(intersects[i].object.rotation, .5, {y: Math.PI*.5, ease: Expo.easeOut}, "=-1.5")
            }
        }

        

        window.addEventListener('mousemove', onMouseMove);
        render();
</script>

Package Design

glb/glTF converted from Adobe Dimension/Illustrator
with Babylon WEBGL loader

with Babylon JS 

Design advantage of Babylon JS over Three JS is the direct pipeline/workflow to Adobe Design Tools/Creative Suite. Take print based mechanicals and translate to interactive, native, Point of Sale, immersive prototypes and Products. 

Translate, print ready mechanicals to photo real  prototypes “game” objects. Generate Lighting, geo specific spatial 3D Models. Combine with trackable ISBN/USB codes and commerce usability for elevated strategy and future concepts.

It is important to utilize the Adobe Design Pipeline. Fonts, Logos and Branding are already developed in Print and Collateral Design Standards.

Asset Management and SAP (ISBN tracking and inventory code) is baked into the collateral and supply chain tracking system, for Enterprise entities.

Link objects to real time dynamic data and automation workflows. Asset Management can be linked via streams that are linked to API driven e commerce.

  <!-- Babylon.js -->
        <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
        <script src="https://preview.babylonjs.com/ammo.js"></script>
        <script src="https://preview.babylonjs.com/cannon.js"></script>
        <script src="https://preview.babylonjs.com/Oimo.js"></script>
        <script src="https://preview.babylonjs.com/earcut.min.js"></script>
        <script src="https://preview.babylonjs.com/babylon.js"></script>
        <script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
        <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
        <script src="https://preview.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
        <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.js"></script>
        <script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
        <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>
        <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>

Babylon, is built with a complete set of tools and modularized scripts. Similar to Three JS, it is built on Top of Web GL.

Babylon is built with Typescript, and Three JS is core Javascript.

Babylon has a Playground with code samples and a Plugin integration to Photoshop/3D and textures. I consider this a great advantage.

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

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


//skybox





// GLTF Loading
    BABYLON.SceneLoader.Append('./models/', 'bottle.glb', scene, 
    function (newMeshes) {
        scene.createDefaultCameraOrLight(true);
        scene.activeCamera.attachControl(canvas, false);
        scene.activeCamera.alpha += Math.PI; // camera +180°
    });
        




            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 = delayCreateScene();;
        sceneToRender = scene

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

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

Babylon JS is a Javascript Library built on top of Three JS. Three JS is built on top of Web GL. GLTF and GLB files are format extensions of 3D modeling. Think of it as the “jpg” of 3D. 

Blender, Dimension, Maya, Cinema 4D can all export to GLTF and GLB formats. 

Photoshop and Illustrator provide the Textures and base “architecture” for the models.

Photoshop can also generate 3D extrusions, bevels, simple primitive geometries.

Programs like Unity, Unreal Engine, can receive and export 3D model formats: glTF, glb (binary – compiled “zipped” version of glTF). In addition to standards FBX, obj, and material meshes. 

In addition to “comping” workflow done outside of Unity. Unity has internal builders like:

-Pro Builder
-Polybrush

with a robust publishing system that exports to 

-Native IOS
-Native Android
-Native Desktop
-Web GL HTML compiles

Use as standalone, or combined workflows.

Unity UI Builder is fully responsive and can be used as any Viewport Building process. Vanilla workflows like Webflow, CSS, HTML, JS, can compile from prototyping.

Forms, commerce and responsive UX elements can be set into the 100% Viewport. APIs and dependencies can natively be set into the C# head configuration of the viewport. 

Layers / Scenes can “mount” with conditional logic. Layers can also react like animation frames and render 3D and 2D levels within a runtime, viewport.

Viewports can be pre-loaded in a shadow DOM and or thread.

Component built CSS/JS/HTML bundles can utilize any component library/strategy/animation/live

Unity has embedded USS. Unity UI has new drag and drop UI elements that can be layered on top of 3D models. Webflow users will quickly adapt to similar User Interface and compiling system.

Adobe Dimension Export

Load Mechanical ready artwork, with fonts/color correction, from Symbol Built Creative Cloud ecosystem.

Render / Label add Texture to Mesh export to WebGL and Unity workflows. 

Load obj from Blender, Cinema 4d, Maya etc.

Apply Textures/Normal Maps to Custom Lighting and Materials, that live in Cloud Based Sharing workflow and environments.

Export glb/glTF, Collada and file formats that are 3D workflow friendly.

Share as Symbols that can be reused or translated to web component (VUE, React) objects.

Duplicate files/Layers, can be combined with Native JS in After Effects. JSON animations, can be exported from After Effects with Lottie Plugin.

Use Assets in any CMS (WordPress-example here, Shopify, Drupal, Commerce Cloud, Magento). Viewports/SVG is fully responsive, with Vanilla CSS/JS.

Mix with any SDK, analytics, social, e commerce library (Unity has Shopify and Firebase packages)

Provision with one-click Native prebuilt Build Systems, offered by Unity: Native IOS, Android, Desktop, WEB GL.

Unity is free to use.

 

Trois JS

3JS Bundler, with Vite/Vue asynchronous data loading workflow.

<div id="app">
    <renderer ref="renderer" antialias orbit-ctrl resize="window">
      <camera :position="{ z: 10 }"></camera>
      <scene>
        <point-light :position="{ y: 50, z: 50 }"></point-light>
        <box ref="box" :rotation="{ y: Math.PI / 4, z: Math.PI / 4 }">
          <lambert-material></lambert-material>
        </box>
      </scene>
    </renderer>
  </div>

  <script type="module">
    import { createApp } from 'https://unpkg.com/troisjs@0.3.1/build/trois.module.cdn.min.js';
    createApp({
      mounted() {
        const renderer = this.$refs.renderer
        const box = this.$refs.box.mesh
        renderer.onBeforeRender(() => {
          box.rotation.x += 0.01
        })
      }
    }).mount('#app')
  </script>

Compile 3JS Code into an optimized bundle. Built with VUE, Vite and 3JS. TroisJS use watchers and Hot Module Replacement for interactive development, in real time.

Resources


Three JS

Three JS Library is a library built on top of Web GL. It is Javascript based.


Adobe Dimension

Load and model obj files. Texture and Pattern Layered components. Export, Record, and Share. Works with Illustrator/3D Photoshop/After Effects ecosystem and Cloud based Symbols.


glTF Tutorial

glTF Resources/Repository from The Khronos Group. Tutorial and Guide.

 

© 2020 All rights reserved. Powered by Yoonsun Lee.