About Dr. Burton

Posts by Dr. Burton:

0

How to Add Audio to a Babylon.JS Scene – Tutorial

Posted by Dr. Burton on January 18, 2019 in Babylon.js, Game Development, Java Tutorials, Tutorials, VR, WebVR |

This is the 3rd tutorial in our Bablylon.JS series.

In the first two, we created a scene, added the WebVR capability, added a skybox, and finally the ground.
But what is an environment without music and sound effects?
To begin, here is our javascript from the first two tutorials:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>Tutorial 3 - Audio in Babylon js</title>

        <!-- Babylon.js -->
        <script src="https://preview.babylonjs.com/gltf_validator.js"></script>
        <script src="https://preview.babylonjs.com/babylon.js"></script>
        <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.js"></script>
     
        <style>
            html, body {overflow: hidden; width: 100%;
                height: 100%; margin: 0; padding: 0; }

            #renderCanvas { width: 100%; height: 100%;
                touch-action: none; }
        </style>
    </head>
<body>
  <canvas id="renderCanvas"></canvas>
  <script>
    var canvas = document.getElementById("renderCanvas");

    var createScene = function() {
        // Create scene

      	var scene = new BABYLON.Scene(engine);
        // Default Environment
        var environment =  scene.createDefaultEnvironment({ 
            createSkybox: false,
            createGround: true,
            groundSize: 1000,
            groundColor: BABYLON.Color3.Green(),
            enableGroundShadow: true, 
            groundYBias: 1 
        });

        var skyMaterial = new BABYLON.StandardMaterial("skybox", scene);
            skyMaterial.backFaceCulling = false;
            skyMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/skybox", scene);
            skyMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
            skyMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
            skyMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
        var skybox = BABYLON.MeshBuilder.CreateBox("skyBox", {size:1000.0}, scene);
        skybox.material = skyMaterial;

       // Enable VR
       var vrHelper = scene.createDefaultVRExperience({createDeviceOrientationCamera:false});
       vrHelper.enableTeleportation({floorMeshes: [environment.ground]});

       var building = BABYLON.SceneLoader.Append("./", "vrchapel.glb", scene, function (meshes) {    
       scene.createDefaultCameraOrLight(true, true, true);
       });         
    return scene;
    };
               
    var engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true });
    var scene = createScene();

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

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

According to the documentation, the expected file type is mp3, but I found that wav file types also work without a problem.
Make sure that the audio file is located in the same or a sub-folder of the html file that will be loading it to play.

Now to load the audio file. I placed the instructions before the WebVR is loaded, immediately after the SkyBox is loaded:

     // A little mood music
     var music = new BABYLON.Sound("music", "mnkchant.mp3", scene, soundReady, {loop: true });

     function soundReady() {
         music.play();
     }

Let’s break the instruction down. We begin by creating a variable to associate with the sound file. It is loaded into memory using the new BABYLON.Sound command. The parameters for the command are:

  • The name of the sound (I used the same name as the variable for convenience)
  • The URL/location of the sound file
  • The scene to load the sound into (i.e. scene)
  • Function to call when the sound is loaded and ready to play
  • Options such as looping, volume, isPaused, etc

Once the sound is loaded and ready to play, the function soundReady is called which will play the music.

I found that this is great to get the music playing by default. When it is loaded in your server (local or a webserver), you will see an icon displayed in the top left corner:

This is because modern browser automatically silence any audio that begins playing in the browser (and let’s be honest, this is a good thing).

Clicking on the audio will allow you to hear the audio that you loaded.

In a later tutorial we will add the controls for the audio portion of the environment.

0

How to Change the Skybox and Ground settings in Babylon.JS – Tutorial

Posted by Dr. Burton on January 5, 2019 in Babylon.js, Java Tutorials, VR, WebVR |

In our last tutorial on Babylon.JS, we loaded a 3D model into a basic environment. But we had a problem with the skybox and ground settings (you can see the results here). Here was the final code from last time: Let’s get those environment options adjusted so that they are not so distracting. All of […]

Tags: , , , , , , ,

0

How to Load a 3D Model for VR with Babylon.JS – Tutorial

Posted by Dr. Burton on January 3, 2019 in Babylon.js, Game Development, Tutorials, WebVR |

I recently began a major project using Babylon.js The reason I selected Babylon.js was the support for browser based game environment (at 60fps), and web-based VR (WebVR).The first thing I wanted to do was load a 3D model that had been created in Blender. Here is how. In this tutorial I’m going to quickly cover […]

Tags: , , , , , , , ,

0

How to Fill a Picker Wheel from a SQLite Database in Corona SDK – Tutorial

Posted by Dr. Burton on December 16, 2018 in Android, Corona, iPad, iPhone, Kindle Fire, Lua, Mobile, Tutorials |

Last semester I had a group of students using Corona SDK who were using a database to list local establishments.  They needed a way to easily display the list of locations in the SQLite database to the application.While I had discussed the possibility of reading from a database and loading a picker-wheel in the textbooks […]

Tags: , , , , , , , ,

0

Reflections on Personalized Education

Posted by Dr. Burton on May 30, 2018 in Deep Learning, Education, Technology |

Traditional education assumes a transmissive format of instruction.  With #VR we can leave behind the traditional “sage-on-the-stage” and enable new #epistemology approaches, enabling learners to experience #education instead of trying to recall it from a lecture. When we begin to include #AI agents, #bigdata; when we are creating true #personalizededucation that adapts to the needs of the student, then we […]

Tags: , , , , ,

Copyright © 2010-2019 Burtons Media Group All rights reserved.
This site is using the Desk Mess Mirrored theme, v2.5, from BuyNowShop.com.