elkyu Posted July 20, 2015 Share Posted July 20, 2015 Hi, I have a plane composed of faces (triangles). I would like to create an animation like this one : http://seenjs.io/demo-noisy-patch.html For the moment, I can make that with babylon : http://playground.babylonjs.com/#CG2MJ#16 (hide the editor to see in full screen, it's better) I tried to adapt the seenjs's code for my Babylon animation but it doesn't work like i would like. Can you help me to realize this animation ? Quote Link to comment Share on other sites More sharing options...
Wingnut Posted July 20, 2015 Share Posted July 20, 2015 http://www.html5gamedevs.com/topic/13258-animate-or-morph-mesh-dynamically/ This should work. I played with AltReality's 1AVEYO series... with solid and wire frame grounds converted to flat shaded. Strange, but fun! http://playground.babylonjs.com/#1AVEYO#18 Update: I think this is a memory leaker... at least in my FF 39. Quote Link to comment Share on other sites More sharing options...
jahow Posted July 21, 2015 Share Posted July 21, 2015 Hey again! It seems to me you have two issues with your PG:- your camera is... weird. Why an ortho camera? The camera in the example you provided is certainly not an orthographic one. Also it seems your camera's rotation center is way off the plane.- you will need some sort of random noise to achieve a similar effect (random wave amplitude varying over time). BJS does not provide such utility, so you'll have to borrow from somewhere else or code it yourself. Simplex and Perlin noise are the most common noise algorithms. Many JS libraries exist for these. I personally used this one with much success: http://pastebin.com/vmxkDDgF jerome 1 Quote Link to comment Share on other sites More sharing options...
gryff Posted July 21, 2015 Share Posted July 21, 2015 A thought from a non-programmer. Could you use a shader to accomplish this? Ground distorting shader From a few minutes tinkering, the crucial part that influences the geometry with time is line 19 of the vertex shader. Could substituting the appropriate math at line 19 create the kind of effect you want? cheers, gryff Quote Link to comment Share on other sites More sharing options...
jerome Posted July 21, 2015 Share Posted July 21, 2015 nice but when you use this kind of shader to morph a shape, the normals aren't recomputed so the colors and shades "follow" the movement instead of adjusting to it Quote Link to comment Share on other sites More sharing options...
adam Posted July 22, 2015 Share Posted July 22, 2015 http://playground.babylonjs.com/#CG2MJ#18 http://playground.babylonjs.com/#CG2MJ#19 http://playground.babylonjs.com/#CG2MJ#20 http://playground.babylonjs.com/#CG2MJ#21 http://playground.babylonjs.com/#CG2MJ#25 jerome, iiceman, gryff and 3 others 6 Quote Link to comment Share on other sites More sharing options...
Wingnut Posted July 22, 2015 Share Posted July 22, 2015 The kool kode klaxons are going-off again. Thanks Adam! And thanks to Stefan and Joseph, too! This is a valuable PG... I am going to bookmark it twice. Quote Link to comment Share on other sites More sharing options...
adam Posted July 22, 2015 Share Posted July 22, 2015 I got the simplex3 code from here: https://github.com/josephg/noisejs/blob/master/perlin.js Quote Link to comment Share on other sites More sharing options...
elkyu Posted July 22, 2015 Author Share Posted July 22, 2015 - your camera is... weird. Why an ortho camera? The camera in the example you provided is certainly not an orthographic one. Also it seems your camera's rotation center is way off the plane. I use an ortho camera because I have some other mesh behind and i need that there is no gap between these mesh. Wow, thanks for your help, i will look at all of that, and try to do my animation. And great job adam ! I'll keep you informed of my progress Quote Link to comment Share on other sites More sharing options...
elkyu Posted July 23, 2015 Author Share Posted July 23, 2015 Any idea for the camera problem ? Quote Link to comment Share on other sites More sharing options...
adam Posted July 23, 2015 Share Posted July 23, 2015 If you want a fixed camera: http://www.html5gamedevs.com/topic/2041-fixed-camera-angle/ Quote Link to comment Share on other sites More sharing options...
adam Posted July 23, 2015 Share Posted July 23, 2015 I'd like to see someone get this working with this noise function that runs on the gpu. https://github.com/ashima/webgl-noise/blob/master/src/noise3D.glsl Quote Link to comment Share on other sites More sharing options...
elkyu Posted July 24, 2015 Author Share Posted July 24, 2015 No my problem is not to get a fix camera. My problem is that behind my mesh, i put an image. I create a "hole" in my mesh and we can see the image through this hole. The problem is that with the 3D, a standard camera will create a gap between the mesh and the image. We can settle that with an ortho camera (another way ?), tell me if i'm wrong but .. Like this :But when I put the camera in ortho, the animation is almost not visible. I want this animation in full screen (scene) and without gap between the mesh and what is behind : #19 #CG2MJ#19 it looks like what I want Another problem, to put well my image in the hole's center (I put the image in the same time as the "hole" creation, not before), I get all the vertex of the faces which composed the "hole", I search the extremity of each side, and I calculate the middle with that. But I thinks that there is a better solution to do that, no ? Quote Link to comment Share on other sites More sharing options...
jahow Posted July 24, 2015 Share Posted July 24, 2015 You can use Rendering Groups to make sure that one mesh is displayed before the other, no matter what their relative positions are: http://doc.babylonjs.com/page.php?p=25100 This way, you won't need to put the image in the hole far away from the ondulating plane. Maybe that will solve your gaps problem? Your method for finding the center of a face looks good to me. You can even use this to find the center of several faces, for example if you want to remove a full square instead of just a triangle. Quote Link to comment Share on other sites More sharing options...
elkyu Posted July 24, 2015 Author Share Posted July 24, 2015 what is the best way to put the image on my scene ? sprite ? Quote Link to comment Share on other sites More sharing options...
jahow Posted July 24, 2015 Share Posted July 24, 2015 A sprite will be rendered on top of everything else, so not really. I'd say a simple plane with the texture on! EDIT: actually you can also force a sprite to be rendered behind your plane with the renderingGroup property, so it's up to you! Quote Link to comment Share on other sites More sharing options...
iiceman Posted July 24, 2015 Share Posted July 24, 2015 After talking about water material here http://www.html5gamedevs.com/topic/15830-water-in-21/ I played around a bit: http://playground.babylonjs.com/#CG2MJ#26 gryff, DellaFree and elkyu 3 Quote Link to comment Share on other sites More sharing options...
elkyu Posted July 24, 2015 Author Share Posted July 24, 2015 I'm not sure to understand about the renderingGroup. Does the defined value to the renderingGroup of a mesh will define which one we'll see above the other, where as both have the same Y position ? Or it will define the apparition order of the meshs ? Quote Link to comment Share on other sites More sharing options...
jahow Posted July 24, 2015 Share Posted July 24, 2015 It defines the draw order. First meshes in the Rendering Group 0 (default one), then 1, 2 and 3. Quote Link to comment Share on other sites More sharing options...
elkyu Posted July 24, 2015 Author Share Posted July 24, 2015 But my mesh (with the animation) hasn't a hole at the beginning of my animation. I create the "hole" after a few seconds and i put the image in the same time. So in this case I think the rendering group is useless, no ? Several "hole" will be create and for each hole there is another image, I can't put the images at the beginning, they will be superimposed on and if there are many, this may slow the animation. Quote Link to comment Share on other sites More sharing options...
jerome Posted July 24, 2015 Share Posted July 24, 2015 arg... I just answered the wrong topic, sorry for this post Quote Link to comment Share on other sites More sharing options...
elkyu Posted July 26, 2015 Author Share Posted July 26, 2015 Anyone ? Quote Link to comment Share on other sites More sharing options...
elkyu Posted July 26, 2015 Author Share Posted July 26, 2015 http://www.babylonjs-playground.com/#272WDW#3 Someone can explain to me why the image is so small ? I can't change the size Quote Link to comment Share on other sites More sharing options...
iiceman Posted July 26, 2015 Share Posted July 26, 2015 You can use picture.size to set a size for that sprite: http://www.babylonjs-playground.com/#272WDW#4 Quote Link to comment Share on other sites More sharing options...
elkyu Posted July 26, 2015 Author Share Posted July 26, 2015 oh, I tried with picture.width & picture.height but the result is very weird But the image still stay a square with this method. Is it possible to apply a precise size in width and height ? maybe there is another way than a sprite to put the image in the scene, which is more practical for set a custom size ? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.