0

Dr. Brian Burton Named Global Thought Leader & Influencer on Emerging Technology

Posted by Dr. Burton on May 11, 2020 in Technology, VR, WebVR |

Recently Dr. Burton received a surprise award from Thinkers360.com as a global thought leader and influencer in the field of emerging technology.

He was very surprised to awaken and find the message in his inbox that he was ranked #4th globally by Thinkers360.

How did Dr. Burton gain this distinction?
“This didn’t happen overnight,” said Brian. “I have been working with technology since my sophomore year of high school. I went beyond what was offered at my high school, and with the help of my grandmother, sought whatever training was available. In the mid-1980s that was going to computer shops (ComputerLand at that time), and taking classes in the evening.
Instead of a first car, I got my first computer. A TRS 80 Model I.”

Since that time, Dr. Burton has continued to push the boundaries, always looking for emerging technology and how it can be used to make the world a better place.

“In the late 1990s, I was finishing my master’s in education. My awesome wife Rosemary, developed an online school with me. She developed the framework and HTML pages, I developed the backend programming and database to track the students progress. We even had a major publishing company want to partner with us!”

Dr. Burton’s passion is to use technology to help people to learn. “My dissertation was on using a game environment for learning. I wanted to see if the principals of learning held true for an online immersive environment. About that time smart phones became available. Everyone on my campus was focused on using existing software for learning. That seemed backwards to me. So I offered a class on how to make apps for the iPhone. I was 3 weeks behind Stanford, so they got all the press. And they should, they did a great job with the class! We also received a lot of attention.”

Now Dr. Burton is busy investigating how VR can be used for learning. “We are seeing an even better response due to the immersiveness of the environments. But the development curve is slowing us down,” said Dr. Burton.

Dr. Brian Burton is available for speaking and training. See the Speaking page for details.

0

Goodbye Corona SDK, Hello Solar2D

Posted by Dr. Burton on April 29, 2020 in Corona, Solar2D |

If you haven’t been following the news about Corona SDK, the tl;dr is that Corona SDK is shifting to open source and is (wisely) changing its name to Solar 2D.


Having been a part of the former Corona SDK community for over 10 years, We are fully supportive and excited about this shift. IMHO, the SDK has not received the support and attention that it needed and deserved over the last several years. The owners just didn’t have the same priorities as those of us who use Corona SDK for development.

We have begun experimenting with the updates and will be posting information as we have information to share. If you have questions, be sure to let us know via email or in the comments below.

We are excited about this next stage in Corona SDK Solar 2D’s life cycle. We will be continuing to publish and support Solar and plan updates to our textbooks this summer (2020) to all of our current books to reflect the changes in name and the development cycle.

Tags: , , ,

0

Corona SDK Is Now Open Source!

Posted by Dr. Burton on March 24, 2020 in Tutorials |

You might have heard that Corona SDK is shifting to open-source software.
We are very excited about this development and will be continuing to support Corona for the foreseeable future.

There will be an update to our Corona books after the shift to open-source is completed to discuss the new methods of installation and building your applications.
Remember, all updates for our eBooks are free! So don’t wait to purchase your copy! https://burtonsmediagroup.com/books/coronasdk/

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:

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

        <title>Sample 1 using 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({ enableGroundShadow: true, groundYBias: 1 });

            // 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>

Let’s get those environment options adjusted so that they are not so distracting.
All of the environmental options can be adjusted at the time of creating the scene.createDefaultEnvironment. The only section that we need to adjust is the
var environment = scene.createDefaultEnvironment({
section in the code above.
First, by default, the skybox is on. To adjust the skybox, we can add a couple of environment options:

            var environment =  scene.createDefaultEnvironment({ 
                    createSkybox: true,
                    skyboxSize: 150,
                    skyboxColor: BABYLON.Color3.Teal(),
                    enableGroundShadow: true, 
                    groundYBias: 1 
            });

In this code snippet, I have added the

                createSkybox: true,
                skyboxSize: 150,
                skyboxColor: BABYLON.Color3.Teal(),

code. The createSkybox: true, is redundant, but is nice to have if you want to be obvious in your code. To remove the skybox, change the true to false.
The skybox is by default a size of 20. With the second option, I have increased it’s size to 150.
The last line allows us to change the skybox color to teal.

Note that capitalization does matter!

Let’s do a similar process for the ground:

                    createGround: true,
                    groundSize: 200,
                    groundColor: BABYLON.Color3.Green(),

By default, the ground is also on with a default size of 15.
To remove the ground, you can change the true to false.

There is a lot more we can do with the skybox and ground, but this will get us started for the next phase of our development.

You can see the the current look of our environment here: http://vrchapel.me/Tutorial2-skyboxandground.html

Now that we have a basic skybox and ground, let’s improve the skybox to make it a bit more realistic. Basic skyboxes are composed of 6 images, one for each face of a cube. Babylon uses a naming convention of the name of the image then _ab, the a representing positive or negative (p or n), and the b representing the x, y, or z coordinate. Thus, you get file names like skybox_nx.jpg to for the negative X image. You can download these and other skybox images from the babylonjs github repository. They are located in /playground/textures folder. https://github.com/BabylonJS/Babylon.js. I placed the textures in a new folder named “textures” in the same folder as my index.html file.

Time to load our new skybox. First, change the createSkybox in environment to false and comment out the associated options for the skybox:

            var environment =  scene.createDefaultEnvironment({ 
                    createSkybox: false,
//                  skyboxSize: 150,
//                  skyboxColor: BABYLON.Color3.Teal(),

Next, we will create a variable to hold the skybox images. This is done by creating a new babylon standard material of the type “skybox” for our scene. We will set back face culling to false and then load the textures. The rest of the associated code is setting the coordinates (so that the images are laid out correctly), and setting the diffuse and specular colors to black:

    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);

Finally, we create the skybox with a create box command and set the material of the box to the skyMaterial variable that we just created.

    var skybox = BABYLON.MeshBuilder.CreateBox("skyBox", {size:1000.0}, scene);
        skybox.material = skyMaterial;

And now you have a skybox! The only problem is that the camera starts on the outside of the skybox instead of inside, looking at our building. We will correct that in the next tutorial. For now, you can use your middle mouse button to zoom inside of the cube.
Here is the final version of this tutorial and it’s associated code: http://vrchapel.me/Tutorial2b-skyboxandground.html


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

        <title>Sample using 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,
//                    skyboxSize: 150,
//                    skyboxColor: BABYLON.Color3.Teal(),
                    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>

Tags: , , , , , , ,

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