Search the Community

Hello ! little Question. How i create the Water effect with the white foam on top? You can see the effect here: http://race.assassinscreedpirates.com/ Someone with a sample? Thanks, Terra

Hello everyone, I have a strange problem with waterMaterial in my scene, its hard to reproduce it in a playground so here are images : The problem is that the reflection part of the water becomes suddenly opaque. The ground becomes no more visible at some frontier (along x axis on this image). I made a video to make it more clear, focus on the transparency of the water : babylonjs.webm I don't know how to fix this ? Any idea ?

I must be doing something incorrect with the water, as it is rendering black: I pasted the code from this playground, and included the files for the waterbump.png and skybox: https://www.babylonjs-playground.com/#1SLLOJ#17 Here's my code, although its very similar to the PG. My guess is the error isn't in this code, though I'm not sure what else would affect the water. It is as if it has nothing in its render list -- but I can definitely see the sky, and the sky is added to the list. this.canvasEle = document.getElementById('main-canvas') this.engine = new BABYLON.Engine(this.canvasEle, true) this.engine.enableOfflineSupport = false this.engine.setHardwareScalingLevel(1) this.scene = new BABYLON.Scene(this.engine) //this.scene.freezeActiveMeshes() //this.scene.collisionsEnabled = true //this.scene.clearColor = new BABYLON.Color4(0.3, 0.5, 0.75, 1.0) this.scene.fogMode = BABYLON.Scene.FOGMODE_EXP this.scene.fogDensity = 0.0005 this.camera = new BABYLON.TargetCamera('camera', new BABYLON.Vector3(0, 0.5, 0), this.scene) this.camera.fov = 0.8 this.camera.minZ = 0.1 //this.scene.autoClear = false //this.scene.autoClearDepthAndStencil = false var light = new BABYLON.DirectionalLight("dir01", new BABYLON.Vector3(0.66, -0.75, 1.25), this.scene) light.position = new BABYLON.Vector3(1, 40, 10) light.intensity = 0.5 var light3 = new BABYLON.DirectionalLight("dir01", new BABYLON.Vector3(-0.5, 0.75, -1.25), this.scene) light3.position = new BABYLON.Vector3(1, 40, 1) light3.intensity = 0.5 var light2 = new BABYLON.HemisphericLight('h', new BABYLON.Vector3(0, 1, 0), this.scene) light2.intensity = 0.6 var skybox = BABYLON.Mesh.CreateBox("skyBox", 5000.0, this.scene) var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", this.scene) skyboxMaterial.backFaceCulling = false skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("images/TropicalSunnyDay", this.scene) skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0) skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0) skyboxMaterial.disableLighting = true skybox.material = skyboxMaterial var waterMesh = BABYLON.Mesh.CreateGround("waterMesh", 2048, 2048, 16, this.scene, false) var water = new BABYLON.WaterMaterial("water", this.scene, new BABYLON.Vector2(512, 512)) water.backFaceCulling = true water.bumpTexture = new BABYLON.Texture("images/waterbump.png", this.scene) water.windForce = -10 water.waveHeight = 1.7 water.bumpHeight = 0.1 water.windDirection = new BABYLON.Vector2(1, 1) water.waterColor = new BABYLON.Color3(0, 0, 221 / 255) water.colorBlendFactor = 0.0 water.addToRenderList(skybox) waterMesh.material = water Any ideas?

I use the waterMaterial. Is it possible to have a skybox used in water reflection, but which is not visible to camera ? (I want a color plain background). Erf, by writing this post I found a solution I still submit topic in case someone want find answer one day : You just have to create another smaller skybox, and don't push it to reflection renderList... http://www.babylonjs-playground.com/#1SLLOJ#275 Maybe more optimised solution ?

I love BABYLON , I encounter a troble about waterMaterial.It often appear some black edges at some angle of camera. I can't find what cause it. lights: there are two lights ,hem and point. but the waterMaterial still black when I adjust the lights camera: arcRotate,target is (0,0,0),and the bigger the beta ,the darker the water renderList:[skybox]

Hi guys, Is possible create a water wave effect with Phaser? Exist any plugin? What do you think about to integrate with Phaser physics? Thanks in advance, Nicholls

I need to make a water ripple effect in Phaser with Phaser animation. Yes I will create spritesheet but how to achieve it without doing too much? I can draw with Inkscape? Is there some filter or tool I can use to draw this in inkscape? Or should I just redraw thin ellipses on update event?

Hi, I'm using the brilling water material and would like to change a couple of things: - Specular highlights are currently black near horizon, and I'd like to change them to white as it would look more natural. - Use either an alpha falloff or a different mesh (more like a curved disk) as a surface, as using a plane makes horizon square. Would appreciate any suggestions. P.S. The water materials works great on my veteran iPhone 5s. No slowdowns!

Has anyone achieved water in their game with phaser? How could it be done? Is it possible for waves to form/it able to drain out and stuff, and what about collisions? Can you detect collisions with water/liquid in Phaser? I know it's like 3-4 questions in one! I searched a couple times for this in the forum and didn't see anything on this. Hopefully some good responses, I'd love to incorporate water into a game and do some things like Ecco the Dolphin or Sonic games did.

We are currently exploring the possibilities of using the babylon water shader (found here:https://doc.babylonjs.com/extensions/Water ) in one of our projects. However were running into weird issues with the lighting and/or specular properties of the babylon standard shader in our scenes when we activate it. Was kind of frustrating because we spent all day thinking we messed up the rest of our scene, and then we found out it was something in the water shader script itself. To demonstrate the issue, we created a super pared down version of the babylon scene to test with. We created a brand new babylon scene that has a ground plane with a BJS standard shader assigned to it. Then we also created a directional light, not casting any shadows. Also, in our index.html file, we are loading the following scripts: <!-- build:js js/vendor.js --> <script type="text/javascript" src="scripts/jquery-2.2.3.min.js"></script> <script type="text/javascript" src="scripts/mobilecheck.js"></script> <script type="text/javascript" src="scripts/state-machine.min.js"></script> <script type="text/javascript" src="scripts/babylon.max.js"></script> <script type="text/javascript" src="scripts/math.min.js"></script> <script type="text/javascript" src="scripts/hand.js"></script> <script type="text/javascript" src="scripts/HelperFunctions.js"></script> <script type="text/javascript" src="scripts/Player.js"></script> <script type="text/javascript" src="scripts/main.js"></script> <!-- endbuild --> The result looks like this: Which is what I would expect. However, when I add this line to the HTML to enable the water shader: <script type="text/javascript" src="scripts/babylon.waterMaterial.js"></script> Then I get this result: You can see the material and/or light is now blown out. (And i haven't even called anything in the new JS script yet). So my thinking is maybe there is something in waterMaterial.js that is changing how the light and/or standard shader behaves? Any BJS folk that can shed some light on this? thanks!

Hello, I'd like to add water drops on the camera lens as an effect. How can it be done? Moving drops would be nice, but static is more than enough This screenshot should explain my goal RiptideGP: http://prnt.sc/byopvq Thanks for every answer, Simon

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

Hi everyone, I'm developing a projet with Babylon.JS : http://www.info-d-74.com/demos/island/ And I got a strange bug with bGUI. When I had this code in my loader.onFinish function : setTimeout(function() { gui = new bGUI.GUISystem(scene, engine.getRenderWidth(), engine.getRenderHeight()); gui.enableClick(); var info = new bGUI.GUIText("info", 512, 128, {font:"20px Segoe UI", text:'', color:"#ffffff"}, gui); info.guiposition(new BABYLON.Vector3(170, 130, 0)); gui.updateCamera();}, 10); the reflection on water disapear (look screenshots in attachements) Someone already got this bug ? Thanks

https://youtu.be/1LDKRRnbAwo This is for my upcoming browser-based RTS game "Feudal Wars." Website: feudalwars.net. Subscribe for dev updates here. The actual water animation was a sinch with masks and Phaser tilesprites. Writing the code for placing the beaches was a real bitch though. I'll write a detailed tutorial on my dev blog if anyone is interested.

Hi guys! I'm working on realistic ocean simulation for a browser game at the moment. The best known way to simulate ocean waves is Jerry Tessendorf's method with statistical model. I won't paste any formulas here for simplification, so here is core problem: calculations are expensive and I don't want to compute water heightmap by CPU in browser because the algorithm may be paralleled very well and GPU is able to compute the grid much faster. Is there any way to use GPU computing from babylon.js? I'm thinking about using shader with texture renderTarget to generate heightmap and then use the results in physics simulation in javascript and pass it to the shader material for rendering water surface. Is it worth or not? Can anyone suggest any other methods? Thanks!

I used phaser 2.0.3 to make this game for April's theme for onegameamonth.com (#1gam). Extremely simple and sort of clunky, but "finished". Just drag the rain droplets around. You can protect the flame or extinguish it and there is a button below the game to relight the flame. The game can be found HERE With a post about it at: http://www.makingvsplaying.com/second-1gam/

How do I desired deceleration of the object in motion? Suppose when the object is in the water acts on it slowing. I tried to do velocity * 0.99. Slowing down there, but got out a lot of bugs. Now do so:this.obj.rotation = game.physics.arcade.moveToXY(this.obj, this.pointer.x, this.pointer.y, this.speed, 200);How do I make braking object? I've already rummaged

Hello everybody, I thought I would share my latest game. This was an attempt to create something old-school which might have a market in fledgling html5 portals but with a modern, sleek revision. What I came up with feels quite good and is definitely a mile-stone in my work, so I thought I would share it. Platforms: Desktop and Mobile Controls: Mouse/Touch >>Play<< Thoughts, etc. are appreciated. If you'd like to see more of my work, my portfolio can be found here: www.creativeinkgames.com/games. Ryan

Hey all, Been messing around with some water effects. I really liked the 2.5D water effects in The Cave and wanted to see if I could get something similar in 2d, without all the baggage of Box2D. Just click or touch the screen to get the effect: http://tysonross.com/temp/waves/index.html Works pretty good on iOS and Android. Thinking of making it a snippet for Cocos2d-html5 or something I followed this tutorial. http://gamedev.tutsplus.com/tutorials/implementation/make-a-splash-with-2d-water-effects/ -Tys