Search the Community

Showing results for tags 'water'.

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 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 16 results

  1. Animate water ripple?

    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?
  2. 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... Maybe more optimised solution ?
  3. We are currently exploring the possibilities of using the babylon water shader (found here: ) 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!
  4. 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: Thanks for every answer, Simon
  5. Water wave with Phaser

    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
  6. Hello ! little Question. How i create the Water effect with the white foam on top? You can see the effect here: Someone with a sample? Thanks, Terra
  7. Water bug with bGUI

    Hi everyone, I'm developing a projet with Babylon.JS : 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
  8. 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.); } }
  9. This is for my upcoming browser-based RTS game "Feudal Wars." Website: 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.
  10. GPU Computing

    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!
  11. Water. Slowdown in P2 physic

    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
  12. Water, liquid, fluids

    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.
  13. [Phaser] Water Game

    I used phaser 2.0.3 to make this game for April's theme for (#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:
  14. Breakout Cove

    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: Ryan
  15. Water effect

    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: Works pretty good on iOS and Android. Thinking of making it a snippet for Cocos2d-html5 or something I followed this tutorial. -Tys