Search the Community

Showing results for tags 'firefox'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 40 results

  1. Hi, On Firefox the camera stops rotating when your pointer leaves the canvas: Which doesn't happen on Edge, IE, Chrome or Opera
  2. Hello all, I am using BitmapFontTexture for creating text messages, in browser chrome and opera all works fine, but in firefox I got white screen and error message: I tried to finding something in internet but still don't solved this problem. Thank.
  3. Hey, all! I've noticed that Firefox (51.0.1 is my version) throws errors when loading all .babylon files that were exported from Blender. The files load fine, though. Should I be concerned with this? It doesn't happen in Chrome, but I'd like to remove the clutter from the Inspector so I don't lose any actual issues in Firefox. Error: (all .babylon files cause this) XML Parsing Error: not well-formed Location: Line Number 1, Column 1: Playground Link: Thanks!
  4. I have different tiles, each in its own canvas. When I toggle the camera (simultaneous), the tile that our out of the viewport seem to go wrong. This only happens in Firefox. One odd thing that I am doing in my code - and this is part due to the bug - is I am having my my rendering stopped all the time, but whenever a ui action is done (ao the camera toggling) I do a runRenderLoop() (I do this for processor saving, since my frames don't update all the time);
  5. Hi It looks like playground stopped working in newest babylon 2.6. Firefox 51.0.1 x64 Xubuntu 16.04, Nvidia NVS 3100m, proprietary official nvidia driver v340.101 But works fine in chromium 55.0.2883.87 In every scene i opened, even very simple it shows in console something like this: (for example this one: ) BJS - [08:04:01]: Unable to compile effect: babylon.js:3:21936 BJS - [08:04:01]: Defines: #define SPECULARTERM #define NORMAL #define NUM_BONE_INFLUENCERS 0 #define BonesPerMesh 0 #define LIGHT0 #define HEMILIGHT0 babylon.js:3:21936 BJS - [08:04:01]: Error: 0(4) : error C0203: extension GL_ARB_gpu_shader5 not supported in profile gp4_1vp babylon.js:3:21936 BJS - [08:04:01]: Vertex shader:default babylon.js:3:21936 BJS - [08:04:01]: Fragment shader:default babylon.js:3:21936 BJS - [08:04:01]: Trying next fallback. babylon.js:3:21936 BJS - [08:04:01]: Unable to compile effect: babylon.js:3:21936 BJS - [08:04:01]: Defines: #define NORMAL #define NUM_BONE_INFLUENCERS 0 #define BonesPerMesh 0 #define LIGHT0 #define HEMILIGHT0 babylon.js:3:21936 BJS - [08:04:01]: Error: 0(4) : error C0203: extension GL_ARB_gpu_shader5 not supported in profile gp4_1vp babylon.js:3:21936 BJS - [08:04:01]: Vertex shader:default babylon.js:3:21936 BJS - [08:04:01]: Fragment shader:default babylon.js:3:21936 BJS - [08:04:01]: Unable to compile effect: babylon.js:3:21936 BJS - [08:04:01]: Defines: babylon.js:3:21936 BJS - [08:04:01]: Error: 0(4) : error C0203: extension GL_ARB_gpu_shader5 not supported in profile gp4_1vp babylon.js:3:21936 BJS - [08:04:01]: Vertex shader:color babylon.js:3:21936 BJS - [08:04:01]: Fragment shader:color babylon.js:3:21936
  6. Hello, I switched the physics engine from cannon back to Oimo, and suddenly the scene won't load in Chrome - but loads fine in Firefox. The only changes in code are what @adam added to cause the Oimo extension to behave as expected - with the exception of adding friction to the sphere imposters. I can't even get to the console to see what might be happening. So if anyone has a debugger which might work, and has the time to look at the scene, any info as to why the scene won't load would be invaluable. I must use Chrome to test now as I have to deliver the scene to run in Chromium. Also, scene.getPhysicsEngine().setTimeStep(); no longer has any effect on the physics engine using Oimo. And this is essential to the client's requirements, as the motion is still too rapid regardles of any setting for this function. I don't want to switch back to cannon, so I hope someone can provide answers - as no debugging tools I have provide any feedback - wierd. Also, If you load the scene, it now takes at least 20 seconds to load, whereas using cannon.js on tokk approx. 2 seconds to load the scene and begin the simulation. Any feedback on this issue is highly appricited. Cheers, DB
  7. Max texture size for WebGL?

    Hi all, Having a weird problem where a spritesheet animation appears as a black box in Firefox when rendering with WebGL. When I switch to Canvas, the spritesheet plays. I'm assuming I'm over the max texture size? (I have a giant, 32 frame animation that weighs in at a colossal 4560 × 4800. I know, I know, it's ridiculous, but I need to run basically a full screen animation for a few seconds). I tried switching to a 'power of 2' size (e.g. 4225 x 4225) but this still doesn't work. Can anyone confirm that I'm barking up the wrong tree? Nick
  8. Hi everyone. I'm creating a game and I was testing it into different browsers. I always use Chrome for my tests and everything is fine there. I tried on Edge and it works perfect as in Chrome. Then I opened it in Firefox and there's a problem. It opens the preloader, the mainMenu page in which there is the name of the game and two buttons, but as I try to click on the "play" button, which brings me to the actual game, I have no answers. When I open the page I get these messages in firefox console log: I think the WebGL error is a Phaser one, because I use CANVAS in my game: (in index.html) var game = new Phaser.Game(800, 600, Phaser.CANVAS,''); And I guess that the "mozHidden" etc line is just a warning. So that TypeError must be the issue. What is the problem with those lines? What am I doing wrong with the instantiation of my game? Is it a problem that I use prototypes for my game like: (in Level1.js) Game.Level1 = function(game) { }; Game.Level1.prototype = { preload:function(game){ //... }, create:function(game){ //... } }; ? Oh, and I tried opening the game in the Firefox safe-mode, without the additional plug-ins, and it works like it should be. Any help would be really appreciated! Thank you very much. EDIT I tried deleting the cache on Chrome and Edge and it doesn't work immediately even there, giving me some phaser errors like the ones before. But no error about my code. And if I refresh the page several times, like 4 or 5 or more, it begins working again like it should. What could this problem be due to?
  9. Firefox is reporting an error in engine._canRenderToTextureOfType, here. The message is:
  10. In Firefox the following code seems to eat memory very fast. You can try directly from In Windows Task Manager I can see memory constantly grows. var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update }); function preload() { game.load.image('mushroom', 'assets/sprites/mushroom2.png'); } function create() { var sprite = game.add.sprite(200, 200, 'mushroom'); sprite.tint = Math.random() * 0xffffff; } function update() { game.state.restart(); } To be honest I'm not so skilled about garbage collection and how Firefox deals with memory, but I'd expect memory to be cleaned every time the state is restarted. So, is there anything wrong with this code? Thanks is advance, Luca
  11. Hi, so first thing i'm new to this, 3d modelisation and babylon.js so i'm kinda of a huge noob, but anyway. I started to work on this demo It seems like i get very bad performance from firefox compared to chrome. Do you have an idea why ? you can try the demo on the playground or i hosted the demo on my website : Thx !
  12. So, I've seen this issue mentioned all over the place - usually due to some bug in FF that is subsequently fixed. I'm using OGG sound files exported from Audacity from WAV files (I've tried with MP3s too). They work fine in Chrome and IE (ugh!), but in FF I get the error: The buffer passed to decodeAudioData contains invalid content which cannot be decoded successfully. If this isn't a bug in FF, then I can only presume there's something wrong with the data in my sound files, but I don't know what they could be. Most of the sounds were made using SFXR. Can anyone point me at some software, or some settings in Audacity, that might be able to address whatever junk data has ended up in the files? Failing that, anyone aware of a bug in FF45? Thanks
  13. Here is my simple code: <html> <head></head> <body> <canvas id="renderCanvas"></canvas> <script src="jquery-2.1.4.min.js"></script> <script src="babylon.2.2.max.js"></script> <script> var canvas = $("#renderCanvas"); var engine = new BABYLON.Engine(canvas, true); var scene = new BABYLON.Scene(engine); var camera = new BABYLON.ArcRotateCamera("Camera", 1, 2, 10, new BABYLON.Vector3(0, 0, 0), scene); scene.activeCamera.attachControl(camera); engine.runRenderLoop(function () { scene.render(); }); </script> </body></html>When I open that with jQuery and BabylonJS in the same directory, I get this error in Firebug: It works in neither Firefox nor Chrome. WebGL does otherwise work. I can, for example, run and the Three.js examples. I get this same problem on both my Windows and my Mac. Anyone have any idea what's wrong? Here is my Firefox-configuration on Windows:
  14. pixijs, how to distribute it?

    hi everybody, I'm developing a browser game with pixijs, I have finished 90%. My problem is: as I distribute the game in the Apple Store or google play market. In this forum, I read that you use cocoonjs, but I don't want use it, because I have to change many things in the project (for example: canvas render, google font, etc...) My game runs fine in chrome and firefox browsers (mobile and desktop) at 60 FPS. I tried to compile the project with apache cordova (PhoneGap), but it run at 12 FPS. This my question on stackoverflow: I can not compile project with another embedded webview in phonegap, because it is very difficult, there is no documentation and is still unstable!! chrmome webview for phonegap: Firefox webview for phonegap: Any idea? Please give me some advice...sorry form my english. Marco.
  15. Hi guys, I've upgraded to Windows 10 on Friday, and it seems that Babylon.js no longer works on my Firefox (ver 45.0). I had Windows 7 before and it worked. The basic playground scene throws the "Your browser does not support WebGL" compilation error, and in the js console these errors appear: Error: WebGL: Error during ANGLE OpenGL init. babylon.js:5:2733 Error: WebGL: Error during native OpenGL init. babylon.js:5:2733 Error: WebGL: WebGL creation failed. babylon.js:5:2733 Error: WebGL: Error during ANGLE OpenGL init. babylon.js:5:2756 Error: WebGL: Error during native OpenGL init. babylon.js:5:2756 Error: WebGL: WebGL creation failed. It still works on my Chrome(Version 48.0.2564.116 m) and Edge(25.10586.0.0) though.
  16. Hello, So I am trying to create a water texture for my scene. I loaded the waterMaterial.js, water.fragment.fx, and the vertex.fragment.fx files with a bump map into my water directory. However, when I try to load my game inside firefox and chrome, the console says "WaterMaterial is not defined". I was following a tutorial and downloaded the example files and their file has the same error. I am using the newest version of Babylon js and I have no idea why this is happening. Do you know why this could be happening? I checked my code and I don't see anything wrong. Maybe there is something I am missing. Thanks for your help in advance! here is the code for the water plane. // Water var waterMesh = BABYLON.Mesh.CreateGround("waterMesh", 512, 512, 32, scene, false); var water = new BABYLON.WaterMaterial("water", scene, new BABYLON.Vector2(512, 512)); water.backFaceCulling = true; water.bumpTexture = new BABYLON.Texture("Water/bump.png", scene); water.windForce = -5; water.waveHeight = 0.2; water.bumpHeight = 0.05; water.waterColor = new BABYLON.Color3(0.047, 0.23, 0.015); water.colorBlendFactor = 0.5; water.addToRenderList(skybox); water.addToRenderList(ground); waterMesh.material = water; // waterMaterial.js var BABYLON = BABYLON || {}; //********************** //water material //******************** (function () { BABYLON.WaterMaterial = function (name, scene, light) { = name; this.TextureBump = "textures/water_river.jpg"; = name; this.light = light; this._scene = scene; scene.materials.push(this); this.bumpTexture = new BABYLON.Texture(this.TextureBump, scene); this.bumpTexture.uScale = 2; this.bumpTexture.vScale = 2; this.bumpTexture.wrapU = BABYLON.Texture.MIRROR_ADDRESSMODE; this.bumpTexture.wrapV = BABYLON.Texture.MIRROR_ADDRESSMODE; this.reflectionTexture = new BABYLON.MirrorTexture("reflection", 512, scene, true); this.refractionTexture = new BABYLON.RenderTargetTexture("refraction", 512, scene, true); this.reflectionTexture.mirrorPlane = new BABYLON.Plane(0, -1, 0, 0); this.refractionTexture.onBeforeRender = function() { BABYLON.clipPlane = new BABYLON.Plane(0, 1, 0, 0); }; this.refractionTexture.onAfterRender = function() { BABYLON.clipPlane = null; }; this.waterColor = new BABYLON.Color3(0.0, 0.3, 0.1); this.waterColorLevel = 0.2; this.fresnelLevel = 1.0; this.reflectionLevel = 0.6; this.refractionLevel = 0.8; this.waveLength = 0.1; this.waveHeight = 0.15; this.waterDirection = new BABYLON.Vector2(1.0, 0); this._time = 0; }; BABYLON.WaterMaterial.prototype = Object.create(BABYLON.Material.prototype); // Properties BABYLON.WaterMaterial.prototype.needAlphaBlending = function () { return false; }; BABYLON.WaterMaterial.prototype.needAlphaTesting = function () { return false; }; // Methods BABYLON.WaterMaterial.prototype.getRenderTargetTextures = function () { var results = []; results.push(this.reflectionTexture); results.push(this.refractionTexture); return results; }; BABYLON.WaterMaterial.prototype.isReady = function (mesh) { var engine = this._scene.getEngine(); if (this.bumpTexture && !this.bumpTexture.isReady) { return false; } this._effect = engine.createEffect("Water/", ["position", "normal", "uv"], ["worldViewProjection", "world", "view", "vLightPosition", "vEyePosition", "waterColor", "vLevels", "waveData", "windMatrix"], ["reflectionSampler", "refractionSampler", "bumpSampler"], ""); if (!this._effect.isReady()) return false; return true; }; BABYLON.WaterMaterial.prototype.bind = function (world, mesh) { this._time += 0.0001 * this._scene.getAnimationRatio(); this._effect.setMatrix("world", world); this._effect.setMatrix("worldViewProjection", world.multiply(this._scene.getTransformMatrix())); this._effect.setVector3("vEyePosition", this._scene.activeCamera.position); this._effect.setVector3("vLightPosition", this.light.position); this._effect.setColor3("waterColor", this.waterColor); this._effect.setFloat4("vLevels", this.waterColorLevel, this.fresnelLevel, this.reflectionLevel, this.refractionLevel); this._effect.setFloat2("waveData", this.waveLength, this.waveHeight); // Textures this._effect.setMatrix("windMatrix", this.bumpTexture.getTextureMatrix().multiply(BABYLON.Matrix.Translation(this.waterDirection.x * this._time, this.waterDirection.y * this._time, 0))); this._effect.setTexture("bumpSampler", this.bumpTexture); this._effect.setTexture("reflectionSampler", this.reflectionTexture); this._effect.setTexture("refractionSampler", this.refractionTexture); }; BABYLON.WaterMaterial.prototype.dispose = function () { if (this.bumpTexture) this.bumpTexture.dispose(); if (this.reflectionTexture) this.reflectionTexture.dispose(); if (this.refractionTexture) this.refractionTexture.dispose();; }; })(); // water shader -- vertex #ifdef GL_ES precision highp float; #endif // Attributes attribute vec3 position; attribute vec3 normal; attribute vec2 uv; // Uniforms uniform vec2 waveData; uniform mat4 windMatrix; uniform mat4 world; uniform mat4 worldViewProjection; // Normal varying vec3 vPositionW; varying vec3 vNormalW; varying vec4 vUV; varying vec2 vBumpUV; void main(void) { vec4 outPosition = worldViewProjection * vec4(position, 1.0); gl_Position = outPosition; vPositionW = vec3(world * vec4(position, 1.0)); vNormalW = normalize(vec3(world * vec4(normal, 0.0))); vUV = outPosition; vec2 bumpTexCoord = vec2(windMatrix * vec4(uv, 0.0, 1.0)); vBumpUV = bumpTexCoord / waveData.x; } // water - fragment -- shader #ifdef GL_ES precision highp float; #endif uniform vec3 vEyePosition; uniform vec4 vLevels; uniform vec3 waterColor; uniform vec2 waveData; // Lights varying vec3 vPositionW; varying vec3 vNormalW; uniform vec3 vLightPosition; // Refs varying vec2 vBumpUV; varying vec4 vUV; uniform sampler2D refractionSampler; uniform sampler2D reflectionSampler; uniform sampler2D bumpSampler; void main(void) { vec3 viewDirectionW = normalize(vEyePosition - vPositionW); // Light vec3 lightVectorW = normalize(vLightPosition - vPositionW); // Wave vec3 bumpNormal = 2.0 * texture2D(bumpSampler, vBumpUV).rgb - 1.0; vec2 perturbation = waveData.y * bumpNormal.rg; // diffuse float ndl = max(0., dot(vNormalW, lightVectorW)); // Specular vec3 angleW = normalize(viewDirectionW + lightVectorW); float specComp = dot(normalize(vNormalW), angleW); specComp = pow(abs(specComp), 256.); // Refraction vec2 texCoords; texCoords.x = vUV.x / vUV.w / 2.0 + 0.5; texCoords.y = vUV.y / vUV.w / 2.0 + 0.5; vec3 refractionColor = texture2D(refractionSampler, texCoords + perturbation).rgb; // Reflection vec3 reflectionColor = texture2D(reflectionSampler, texCoords + perturbation).rgb; // Fresnel float fresnelTerm = dot(viewDirectionW, vNormalW); fresnelTerm = clamp((1.0 - fresnelTerm) * vLevels.y, 0., 1.); // Water color vec3 finalColor = (waterColor * ndl) * vLevels.x + (1.0 - vLevels.x) * (reflectionColor * fresnelTerm * vLevels.z + (1.0 - fresnelTerm) * refractionColor * vLevels.w) + specComp; gl_FragColor = vec4(finalColor, 1.); } }
  17. Hi all. I'm getting the following error when trying to create a Pixi renderer using autoDetectRenderer in Chrome and Firefox: gl.disable is not a function at WebGLRenderer._initContext at new WebGLRenderer at Object.module.exports.Object.assign.autoDetectRenderer I'm using Pixi as part of a much larger, complex framework and haven't tried taking the whole thing apart to see what's causing the problem yet; I was hoping that there might be an easy Pixi-related solution before I get to that... From having a poke around in the Pixi source code I can make the error go away by adding a small tweak: /** * Creates the gl context. * * @private */ WebGLRenderer.prototype._createContext = function () { var gl = this.view.getContext('webgl', this._contextOptions) || this.view.getContext('experimental-webgl', this._contextOptions); = gl; // *** adding the following line makes the error go away *** if (!gl.disable) =; // ********************************************************* if (!gl) { // fail, not able to get a context throw new Error('This browser does not support webGL. Try using the canvas renderer'); } this.glContextId = WebGLRenderer.glContextId++; = this.glContextId; gl.renderer = this; }; While this works, I'm not entirely sure why and obviously I'd rather not rely on hacked-around code in production. So: is there an obvious/known reason this is happening that I can fix? Or, alternatively, will using the above fix break anything important? Unfortunately I can't share a link because the project is pre-alpha still; I might be able to strip out enough to make a useful demo page but it'd be a big undertaking - I'm crossing my fingers and hoping there's something quick and obvious I can fix! Any help much appreciated. Cheers, Tom
  18. My game I've been working on is an fps trainer thing. But it is having problems on firefox. Here's the game: (press m to access the menu and f for fullscreen) Right now it has a problem on firefox where if you click and drag, then the sensitivity goes berserk. Try it out. Chrome ignores click and drag. Does anyone know how to stop this? Also, I'm getting fps drops in firefox for some reason. It says 600-700 potential fps but still drops below 60 every minute or so. Weird. Also, safari and ie don't support pointer lock. Is there a way around this? Thanks for any help.
  19. Hello everyone, i am new here, and would like to ask my first question! I have made a 2d canvas game using mainly CreateJS, and GSAP. For various reasons, i would like to be use Firefox as a browser, but i have had some performance issues that couldn't surpass. So i decided to check a webgl based rendering library such as pixiJS. I have made a quick test page to see if i could get smooth tweening using webgl rendering vs canvas based rendering. I would expect better framerates using webgl, but the truth is that i get lower framerates and really jerky motion. All the articles and examples i've read about the past couple of days were saying the exact opposite. So what am i really missing? Is it Firefox's problem? Is it that i use GSAP for tweening? Is my example code missing anything essential? You could check my quick demo here : And i would suggest to run the two versions in fullscreen to see the FPS yourself using the two following links : Using canvas : webgl : Actually the above runs quite smoothly using canvas on Firefox...:-S Any insight would be great.Thanks in advance!
  20. Hello: First of all, I am glad to have discovered Phaser, and to be part of this community Phaser is a phenomenal library, and I think I am going to have a great time working with it. I am currently programming the initial screen of a game. I wanted to make a wobbly title (I am using a rope for it) with falling silhouettes behind it and a moving background. The code I am using is this: fondointro = game.add.tileSprite(0, 0,,, 'bgintro'); fondointro.fixedToCamera = true; var turistasintroTotal = 50; for (var i = 0; i < turistasintroTotal; i++) { var s = game.add.sprite(, -200, 'Tourist'+Math.floor((Math.random()*7) + 1)); game.physics.arcade.enable(s); s.body.velocity.y = Math.floor((Math.random()*500) + 100); s.body.angularVelocity = Math.floor((Math.random()*110) - 50); s.tint = 0xFFFFFF * Math.random(); s.alpha = 0.5 s.autoCull = true; s.checkWorldBounds = true;, this); } var count = 0; var length = 918 / 20; var points = []; for (var i = 0; i < 20; i++) { points.push(new Phaser.Point(i * length, 0)); } ropeTitle = game.add.rope(2000,, 'title', null, points); ropeTitle.scale.set(0.8); ropeTitle.updateAnimation = function() { count += 0.1; for (var i = 0; i < this.points.length; i++) { this.points[i].y = Math.sin(i * 0.5 + count) * 20; } };Strange thing: When I try it in Firefox it works like a charm, but when I try it in Chrome, the title appears with an alpha of 50% - even if I didn't specify that. Why does this happen?
  21. Hi, new to the forums I've got an issue drawing images on the canvas on Firefox and IE. I created an array of Sprites (Floor Tiles), iterated through them and placed them right next to each other. When I translate the canvas (platformer style), everything draws perfectly EXCEPT on Firefox and IE. Both browsers seem to draw each sprite with a 1 pixel gap between them, but only when I'm calling ctx.translate(). The other browsers draw my floor tiles appropriately. Wondering if anybody ran into a similar issue. I'm running the latest version of each browser, and rounding sprite position coordinates when calling drawImage(). Again, this pixel gap issue only happens on Firefox and Internet Explorer. Thanks! Chrome / Opera / Chrome Mobile / Opera Mobile / Safari Mobile (During ctx.translate) Firefox / Internet Explorer (During ctx.translate)
  22. It is using WebGL in both cases, and I have turned on "use hardware acceleration" in Firefox (latest version). I see the same difference in the mobile versions of Chrome and Firefox I made my site again from scratch when 3.0 came out, and the version of the site which uses the old Pixi still performs similarly in both browsers. Is there an acknowledged difference in Pixi 3.0's ability to perform in Firefox vs. Chrome?
  23. Firefox process allocates 1GB of RAM

    While developing my game, I refresh the same page many times. Though it doesn't have some complex tasks to do except Timer events, the Firefox process gets too big in allocated memory, around 1GB after 10 or more refreshes of the page. I am sure it is my game since I have it loaded alone in Firefox. What do I miss to do or should I do to clear memory that the game allocates, after each refresh? Is this connected with the browser or is there some Phaser code that is good to be implemented?
  24. Hello, First I want to say that I really love Babylon.js. It has made learning WebGL and 3D graphics much much easier. I have two questions regarding imported meshes. I have managed to import and load a mesh I created in Blender, however, the mesh itself only seems to appear in Chrome and IE. It doesn't appear in Firefox at all. When I look at the console, I get this error: babylon.js:3 BJS - [09:46:46]: Valid manifest file not found. Failed to load resource: the server responded with a status of 404 Scene & textures will be loaded directly from the web server. I wanted to make sure this wasn't something in my code and I am not really sure what a manifest file is. My second question is: How do I make the imported mesh reflect on a mirrored surface? Any insight you can give would be very helpful. Thank you. My code is below and here is the link to the live demo is <script> var canvas = document.getElementById("renderCanvas"); var engine = new BABYLON.Engine(canvas, true); var createScene = function () { var scene = new BABYLON.Scene(engine); // Setup environment var light = new BABYLON.DirectionalLight("Dir0", new BABYLON.Vector3(10, -20, 0), scene); light.position = new BABYLON.Vector3(-160, 240, 1); light.diffuse = new BABYLON.Color3(1, 1, 1); light.specular = new BABYLON.Color3(1, 1, 1); light.intensity = 0.7; var omnilight = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(0, 1, 60), scene); omnilight.position = new BABYLON.Vector3(0, 35, 310); omnilight.diffuse = new BABYLON.Color3(1, 1, 1); omnilight.specular = new BABYLON.Color3(1, 1, 1); omnilight.intensity = 1.9; var camera = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(25, 0, -170), scene); //var camera = new BABYLON.ArcRotateCamera("Camera", 3 * Math.PI / 2, Math.PI / 8, 50, BABYLON.Vector3.Zero(), scene); scene.activeCamera.attachControl(canvas, true); camera.checkCollisions = true; camera.applyGravity = true; camera.ellipsoid = new BABYLON.Vector3(2, 2, 2); //Physics scene.enablePhysics(); scene.setGravity(new BABYLON.Vector3(0, -60, 0)); scene.collisionsEnabled = true; // Meshes var sphere2 = BABYLON.Mesh.CreateSphere("Sphere2", 16.0, 20.0, scene); sphere2.position.x = 0; sphere2.position.y = 4; sphere2.material = new BABYLON.StandardMaterial("texture1", scene); sphere2.material.reflectionTexture = new BABYLON.CubeTexture("textures/skybox", scene); sphere2.setPhysicsState({impostor: BABYLON.PhysicsEngine.BoxImpostor, mass: 1, friction: 30, restitution: 2.0}); sphere2.checkCollisions = true; sphere2.material.alpha = .5; var sphere3 = BABYLON.Mesh.CreateSphere("Sphere2", 16.0, 70.0, scene); sphere3.position.x = 187; sphere3.position.y = 35; sphere3.position.z = 150; sphere3.material = new BABYLON.StandardMaterial("texture1", scene); sphere3.material.reflectionTexture = new BABYLON.CubeTexture("textures/skybox", scene); //sphere3.setPhysicsState({impostor: BABYLON.PhysicsEngine.BoxImpostor, mass: 1, friction: 30, restitution: 0.0}); sphere3.checkCollisions = true; var knot = BABYLON.Mesh.CreateTorusKnot("knot", 7, 2, 128, 64, 2, 3, scene); knot.position = new BABYLON.Vector3(-19, 10, 16); //knot.setPhysicsState({impostor: BABYLON.PhysicsEngine.BoxImpostor, mass: 1, friction: 30, restitution: 1.0}); knot.checkCollisions = true; knot.material = new BABYLON.StandardMaterial("texture3", scene); knot.material.diffuseColor = new BABYLON.Color3(1, .634, .7); knot.material.reflectionTexture = new BABYLON.CubeTexture("textures/skybox", scene); //Animations var animationKnot = new BABYLON.Animation("myAnimation", "rotation.y", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE); // An array with all animation keys var keys = []; keys.push({ frame: 0, value: 4 }); keys.push({ frame: 20, value: 8 }); keys.push({ frame: 100, value: 7 }); keys.push({ frame: 360, value: 5 }); keys.push({ frame: 460, value: 1 }); animationKnot.setKeys(keys); knot.animations.push(animationKnot); scene.beginAnimation(knot, 0, 100, true); //Imported mesh var cosmiqLogo = BABYLON.SceneLoader.ImportMesh("Cosmiq Logo", "", "cosmiqlogo2.babylon", scene, function (newMeshes) { // imported mesh attributes cosmiqLogo = newMeshes[0]; cosmiqLogo.position.y = 54; cosmiqLogo.position.z = 320; cosmiqLogo.scaling.x = 14.2; cosmiqLogo.scaling.y = 14.2; cosmiqLogo.scaling.z = 14.2; cosmiqLogo.material = videoMat; cosmiqLogo.emissiveColor = new BABYLON.Color3(1, 1, 1); cosmiqLogo.ambientColor = new BABYLON.Color3(1, 0.2, 0.7); }); //Skybox var skybox = BABYLON.Mesh.CreateBox("skyBox", 10000.0, scene); var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene); skyboxMaterial.backFaceCulling = false; skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/skybox", scene); skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE; skybox.infiniteDistance = true; skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0); skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0); skybox.material = skyboxMaterial; //Video material var videoMat = new BABYLON.StandardMaterial("textVid", scene); videoMat.diffuseTexture = new BABYLON.VideoTexture("video", ["textures/alien_ocean.mp4"], 256, scene, false); videoMat.backFaceCulling = false; // Ground var plane = BABYLON.Mesh.CreateBox("box", 6.0, scene); plane.position.y = -10; plane.scaling.x = 240; plane.scaling.z = 240; plane.setPhysicsState({impostor: BABYLON.PhysicsEngine.BoxImpostor, mass: 0, friction: 300, restitution: 1.5}); plane.checkCollisions = true; // Materials var simpleMaterial = new BABYLON.StandardMaterial("texture2", scene); simpleMaterial.diffuseColor = new BABYLON.Color3(1, 0, 0);//Red //Creation of a mirror material var mirrorMaterial = new BABYLON.StandardMaterial("texture4", scene); mirrorMaterial.diffuseColor = new BABYLON.Color3(0.4, 0.4, 0.4); mirrorMaterial.reflectionTexture = new BABYLON.MirrorTexture("mirror", 1024, scene, true); mirrorMaterial.reflectionTexture.mirrorPlane = new BABYLON.Plane(0, -1.0, 0, -10.0); mirrorMaterial.reflectionTexture.renderList = [sphere2, skybox, knot, sphere3, cosmiqLogo]; mirrorMaterial.reflectionTexture.level = 0.6; //Sphere meshes sphere2.subMeshes = []; var verticesCount = sphere2.getTotalVertices(); sphere2.subMeshes.push(new BABYLON.SubMesh(0, 0, verticesCount, 0, 900, sphere2)); sphere2.subMeshes.push(new BABYLON.SubMesh(1, 0, verticesCount, 900, 900, sphere2)); sphere2.subMeshes.push(new BABYLON.SubMesh(2, 0, verticesCount, 1800, 2088, sphere2)); //Applying materials plane.material = mirrorMaterial; //Music // Load the sound and play it automatically once ready var music = new BABYLON.Sound("Music", "Beautiful.mp3", scene, function () { // Sound has been downloaded & decoded; }); return scene; } var scene = createScene(); engine.runRenderLoop(function () { scene.render(); }); // Resize window.addEventListener("resize", function () { engine.resize(); }); </script>