Search the Community

Showing results for tags 'Firefox'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Found 49 results

  1. Hey guys, I was trying to finally update to the newest stable version but it makes my spheres glow (wrongly emissive from a distance and also from the dark side of the spheres. But, I'm pretty sure it's not due to lack of light). Anyhow, the bug only happens in Firefox 58.0.2 (that I know of) . But, the preview version and stable version both have it. I figure it's related to something you were already aware of... but just in case this is a new version of the bug... Mostly working old version of babylon.custom.js: www.skypodstudios.com/solar Buggy version on stable 3.1: http://skypodstudios.com/solar/index31.html (you probably won't see the problem if you're not on Firefox) You guys are nothing but amazing, I have no complaints. Just trying to help/learn.
  2. Firefox Slow FPS

    Hello, Since some day, firefox turn phaser game slow. All game i have created and even litle game downgrade fps. (60FPS to 30FPS) I dont know where is the problem. i have try use phaser but no change. You can try with this example : https://phaser.io/examples/v2/time/slow-down-time if you wait some seconds the animation down to 30fps. this problem is only on firefox (i suppose since v57). All others browsers working fine. Have you an idea where is the problem? Thank you
  3. Hi everyone So I'm back in to looking at Baylon after having to concentrate on other areas of my project first. I'm at the stage now where I'm loading a .babylon file exported from Blender, I'm attaching camera controls to the active camera (configured in blender to be Arc), and I'm using Pep instead of Hand for the interactions because Hand hates me and I don't deserve nice things. Anyway here's the issue, with the camera controls attached as so: scene.activeCamera.attachControl( canvas, false ); everything works fine in Mac safari 11.0.3 and Chrome 63.0.3239.132, but when in Firefox 58.01 the page scrolls as well as the scene when using the mouse wheel to zoom. I've tried setting that false value to true, but all that did was stop scene scrolling everywhere. The canvas element has the attribute: touch-action="none" set in the html and the similar declaration in CSS. This wouldn't be such a problem if the entire scene was the whole page, but in my case the canvas is only part of the visible page. Can someone shed some light on this please? Cheers
  4. Import MIME type issue

    Hi there, nice to meet you So I have the exact same issue as related in this topic : I understand the problem and the solution. But, I'm currently running my babylon app locally without any HTTP server such as Apache, it's just firefox looking on my computer files. So I'm a little confused : does BabylonJS need a local HTTP server such as WAMP or XAMPP ? Why is that since it's just JavaScript ?
  5. Hi everyone, Video (mp4 or webm) doesn't play on firefox android -> "NS_ERROR_NOT_AVAILABLE" I use Phaser CE v2.10.0 and CANVAS , I unlock the videos before. does not work on examples either : https://phaser.io/examples/v2/video/play-video Thank you in advance !
  6. State of WebGL

    Two different WebGL implementations (chrome on the left, firefox on the right) working side by side on Linux x64. Note the subtle difference in colors.
  7. babylon 3.1 errors in ffox 57

    So, trying to get my simple project loaded in ffox this morning and ran into a whole bunch of console log errors. I presume its with the new ffox quantum update or with the new 3.1 beta preview. PG is showing some of the same errors, I haven't narrowed down to causes yet. Also seeing some rendering artifacts on my imported meshes. Should I be worried ? Or are these mostly teething issues ? BJS - [10:33:57]: Babylon.js engine (v3.1-beta-5) launched babylon.js:3:18630 Error: WebGL warning: Failed to create WebGL context: WebGL creation failed: * Error during ANGLE OpenGL init. * Error during ANGLE OpenGL init. * Error during ANGLE OpenGL init. * Error during ANGLE OpenGL init. * Error during ANGLE OpenGL init. * Error during ANGLE OpenGL init. * Error during ANGLE OpenGL init. * Error during ANGLE OpenGL init. * Error during ANGLE OpenGL init. * Error during ANGLE OpenGL init. * Error during ANGLE OpenGL init. * Error during ANGLE OpenGL init. * Error during ANGLE OpenGL init. * Error during ANGLE OpenGL init. * Error during ANGLE OpenGL init. * Error during ANGLE OpenGL init. * Exhausted GL driver caps. babylon.js:4:11836 BJS - [10:33:58]: Unable to compile effect: babylon.js:3:19000 BJS - [10:33:58]: Uniforms: world, view, viewProjection, vEyePosition, vLightsType, vAmbientColor, vDiffuseColor, vSpecularColor, vEmissiveColor, vFogInfos, vFogColor, pointSize, vDiffuseInfos, vAmbientInfos, vOpacityInfos, vReflectionInfos, vEmissiveInfos, vSpecularInfos, vBumpInfos, vLightmapInfos, vRefractionInfos, mBones, vClipPlane, diffuseMatrix, ambientMatrix, opacityMatrix, reflectionMatrix, emissiveMatrix, specularMatrix, bumpMatrix, lightmapMatrix, refractionMatrix, diffuseLeftColor, diffuseRightColor, opacityParts, reflectionLeftColor, reflectionRightColor, emissiveLeftColor, emissiveRightColor, refractionLeftColor, refractionRightColor, logarithmicDepthConstant, vTangentSpaceParams, vLightData0, vLightDiffuse0, vLightSpecular0, vLightDirection0, vLightGround0, lightMatrix0, shadowsInfo0, depthValues0, diffuseSampler, ambientSampler, opacitySampler, reflectionCubeSampler, reflection2DSampler, emissiveSampler, specularSampler, bumpSampler, lightmapSampler, refractionCubeSampler, refraction2DSampler, shadowSampler0 babylon.js:3:19000 BJS - [10:33:58]: Attributes: position, normal, uv, color, matricesIndices, matricesWeights, matricesIndicesExtra, matricesWeightsExtra babylon.js:3:19000 BJS - [10:33:58]: Vertex shader: default 1 #define MAINUV1 2 #define DIFFUSE 3 #define DIFFUSEDIRECTUV 1 4 #define AMBIENTDIRECTUV 0 5 #define OPACITYDIRECTUV 0 6 #define EMISSIVEDIRECTUV 0 7 #define SPECULARDIRECTUV 0 8 #define BUMPDIRECTUV 0 9 #define SPECULARTERM 10 #define NORMAL 11 #define UV1 12 #define VERTEXCOLOR 13 #define NUM_BONE_INFLUENCERS 7 14 #define BonesPerMesh 46 15 #define LIGHTMAPDIRECTUV 0 16 #define NUM_MORPH_INFLUENCERS 0 17 #define VIGNETTEBLENDMODEMULTIPLY 18 #define SAMPLER3DGREENDEPTH 19 #define SAMPLER3DBGRMAP 20 #define LIGHT0 21 #define HEMILIGHT0 22 23 #define SHADER_NAME vertex:default 24 precision highp float; 25 26 uniform mat4 viewProjection; 27 uniform mat4 view; 28 #ifdef DIFFUSE 29 uniform mat4 diffuseMatrix; 30 uniform vec2 vDiffuseInfos; 31 #endif 32 #ifdef AMBIENT 33 uniform mat4 ambientMatrix; 34 uniform vec2 vAmbientInfos; 35 #endif 36 #ifdef OPACITY 37 uniform mat4 opacityMatrix; 38 uniform vec2 vOpacityInfos; 39 #endif 40 #ifdef EMISSIVE 4… babylon.js:3:19000 BJS - [10:33:58]: Fragment shader: default 1 #define MAINUV1 2 #define DIFFUSE 3 #define DIFFUSEDIRECTUV 1 4 #define AMBIENTDIRECTUV 0 5 #define OPACITYDIRECTUV 0 6 #define EMISSIVEDIRECTUV 0 7 #define SPECULARDIRECTUV 0 8 #define BUMPDIRECTUV 0 9 #define SPECULARTERM 10 #define NORMAL 11 #define UV1 12 #define VERTEXCOLOR 13 #define NUM_BONE_INFLUENCERS 7 14 #define BonesPerMesh 46 15 #define LIGHTMAPDIRECTUV 0 16 #define NUM_MORPH_INFLUENCERS 0 17 #define VIGNETTEBLENDMODEMULTIPLY 18 #define SAMPLER3DGREENDEPTH 19 #define SAMPLER3DBGRMAP 20 #define LIGHT0 21 #define HEMILIGHT0 22 23 #define SHADER_NAME fragment:default 24 precision highp float; 25 uniform vec4 vDiffuseColor; 26 #ifdef SPECULARTERM 27 uniform vec4 vSpecularColor; 28 #endif 29 uniform vec3 vEmissiveColor; 30 31 #ifdef DIFFUSE 32 uniform vec2 vDiffuseInfos; 33 #endif 34 #ifdef AMBIENT 35 uniform vec2 vAmbientInfos; 36 #endif 37 #ifdef OPACITY 38 uniform vec2 vOpacityInfos; 39 #endif 40 #ifdef EMISSIVE 41 uniform vec2… babylon.js:3:19000 BJS - [10:33:58]: Error: C:\fakepath(89,30-147): error X4505: maximum temp register index exceeded C:\fakepath(89,2-148): error X4505: maximum temp register index exceeded C:\fakepath(89,2-148): error X4505: maximum temp register index exceeded C:\fakepath(89,2-148): error X4505: maximum temp register index exceeded Warning: D3D shader compilation failed with default flags. (vs_3_0) Retrying with avoid flow control C:\fakepath(89,30-147): error X4505: maximum temp register index exceeded C:\fakepath(89,2-148): error X4505: maximum temp register index exceeded C:\fakepath(89,2-148): error X4505: maximum temp register index exceeded C:\fakepath(89,2-148): error X4505: maximum temp register index exceeded Warning: D3D shader compilation failed with avoid flow control flags. (vs_3_0) Retrying with prefer flow control C:\fakepath(89,30-147): error X4505: maximum temp register index exceeded C:\fakepath(89,2-148): error X4505: maximum temp register index exceeded C:\fakepath(89,2-148): error X4505: maximum temp register index exceeded C:\fakepath(89,2-148): error X4505: maximum temp register index exceeded Warning: D3D shader compilation failed with prefer flow control flags. (vs_3_0) Failed to create D3D shaders. babylon.js:3:19000 BJS - [10:33:58]: Trying next fallback. babylon.js:3:19000 BJS - [10:33:58]: Falling back to CPU skinning for Body babylon.js:3:18630 Error: WebGL warning: linkProgram: Failed to link, leaving the following log: C:\fakepath(89,30-147): error X4505: maximum temp register index exceeded C:\fakepath(89,2-148): error X4505: maximum temp register index exceeded C:\fakepath(89,2-148): error X4505: maximum temp register index exceeded C:\fakepath(89,2-148): error X4505: maximum temp register index exceeded Warning: D3D shader compilation failed with default flags. (vs_3_0) Retrying with avoid flow control C:\fakepath(89,30-147): error X4505: maximum temp register index exceeded C:\fakepath(89,2-148): error X4505: maximum temp register index exceeded C:\fakepath(89,2-148): error X4505: maximum temp register index exceeded C:\fakepath(89,2-148): error X4505: maximum temp register index exceeded Warning: D3D shader compilation failed with avoid flow control flags. (vs_3_0) Retrying with prefer flow control C:\fakepath(89,30-147): error X4505: maximum temp register index exceeded C:\fakepath(89,2-148): error X4505: maximum temp register index exceeded C:\fakepath(89,2 And yes, the last line of the errors is as attached...I presume some limit reached in the display...
  8. Firefox Sound issue

    Hello, I've got an issue stopping audio on Firefox. On Chrome ore Edge stopping the Sound works fine but Firefox won't stop the sound and if you start the Sound again it'll play twice. The main intention was to stop the sound when the state shuts down but it doesn't work when I bind the command to a key aswell. It's really annoying and I couldn't find a fix anywhere. I start the sound in the Create function with music = game.add.audio('background_music'); music.play(); music.loopFull(0.3); music.volume = 0.3; and try to stop it in the Shutdown function with "music.stop();" You can also try it yourself HERE
  9. FireFox Lag

    Hi, I am working on a game where the hero runs through different levels and collects rewards, and have got it working really smoothly for Chrome on Mac, however when testing on FireFox on Mac or Windows it goes really laggy. At its most simple, the game uses a tilemap (70 x 15), which also handles the objects, the objects are split into various classes, and there are two background images (originally for parallax, but this has been disabled while we try and resolve the lagginess). The hero and a couple of other sprite objects have animations, but again these have been temporarily disabled, even with all of this there is still significant lag when running and jumping, its a reasonably large game so not really sure what code would be helpful without causing more confusion. I've tried several different approaches now, with no success. I have tried changing the 'renderer' for the game, the best result so far is CANVAS, not sure if it makes any difference but the physics library is P2, and I am only pre-loading the assets required for the current level. I have tried killing sprites, setting their visiblity to false, only dumping out a subset of objects, and none of it seems to affect anything. I have done some investigation, and the 'requestAnimationFrame' function seems to get called alot but the garbage cleaner not so much. I had a look at pixi.js and there is an issue from which looks to be similar but not the same. Has anyone else had this issue, know where I should investigate next? Many thanks, Áine
  10. Hi, On Firefox the camera stops rotating when your pointer leaves the canvas: http://playground.babylonjs.com/ Which doesn't happen on Edge, IE, Chrome or Opera
  11. 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.
  12. 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);
  13. 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: http://whirlinggizmo.com/skintest/assets/wearables/m_shirt_fireman/m_shirt_fireman.babylon Line Number 1, Column 1: Playground Link: http://babylonjs-playground.com/#WDMRY#17 Thanks!
  14. 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: http://playground.babylonjs.com/?2# ) 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
  15. 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. http://qedsoft.com/DEMOS2014/PE_KYP/index5.html 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
  16. 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?
  17. Firefox is reporting an error in engine._canRenderToTextureOfType, here. The message is:
  18. In Firefox the following code seems to eat memory very fast. You can try directly from http://phaser.io/examples 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
  19. 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 http://www.babylonjs-playground.com/#8EUPP#1. 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 : www.fleurantmaxime.com Thx !
  20. 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 http://babylonjs-playground.com/ 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.
  21. 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
  22. 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); this.gl = gl; // *** adding the following line makes the error go away *** if (!gl.disable) this.gl = this.gl.original; // ********************************************************* 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++; gl.id = 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
  23. My game I've been working on is an fps trainer thing. But it is having problems on firefox. Here's the game: http://srimshady.itch.io/babylon-test?secret=04dJ4gBhSMoo5rgFsqaaJFIyU0 (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.
  24. 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) { this.name = name; this.TextureBump = "textures/water_river.jpg"; this.id = 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(); BABYLON.Material.dispose.call(this); }; })(); // 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.); } }