Webgl wave effect

By using our site, you acknowledge that you have read and understand our Cookie PolicyPrivacy Policyand our Terms of Service. The dark mode beta is finally here. Change your preferences any time. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information. I just wrote a program that implements the waving effect in canvas2D. Here is my implementation: 1. Save the image data of the origin canvas. Calculate the new position of each point and give it the color of the old position.

Make the vibration amplitude of each point increase with distance. Increasing the brightness of the monotone decreasing area, and decreasing the brightness of the monotone decreasing area. Now I can use webGL to create a simple cube,make some transformation,load a texture into a rect. I succeeded! To do this, you should divide a square or rectangle in a triangle strip like in the following schema:.

Put the vertex 1 at coords 0,0the vertex 2 at 0,1the vertex 7 at 1,0 and the vertex 8 at 1,1. You can easily deduce the coords for the rest of the vertices. These coords are the UV used in the texture to display your image. Moreover, you can use these coords to place the vertex on the screen. To get a "wave" effect, you can move up and down the vertices based on the time. The vertex shader will be executed for every vertex and in parallel. Its code can be very simple. Here is an example:.

Learn more. How to create a 2D waving flag in webGL? Ask Question. Asked 1 year, 9 months ago.From our sponsor: Need a hand with your marketing? No problem. Today we want to show you how to create some realistic looking heat haze distortion effects using fragment shaders in WebGL. The idea is to add a subtle animated distortion to a static image and some text. Please note that the current ZIP file is the compiled build of this project; source files can be found in the GitHub repo. See the link below.

Realistic Water Ripple Effect JavaScript Tutorial

This effect uses WebGL. Here you can see an introduction on how it works. The important thing to have in mind for this effect is how fragment shaders, or pixel shaders, work: it runs a function for every pixel of the area that is being processed — in our case, the entire canvas — and returns a color, which will be set for the said pixel.

In order to be able to do what we want with the shader, we can send information to it, such as the current pixel position, images as texturesmouse position, etc. The heart of this effect is the heat haze distortion. This is how we can get the color of a pixel in a texture in the same position as the pixel being processed currently by the shader:.

Instead of simply getting the pixel from the current position though, we can apply some transform the position value to get the pixel from a different position. For example:. Now, to get a simple but interesting distortion, we could vary the position based on a sine wave. To animate it, we may do the following: send to the shader a value that increments every frame, and use that value in the sine function.

To send a value every frame, we can use the JS function requestAnimationFrame :. One thing we have to keep in mind for animations in general: the frequency of updates, that is, frames per second, is often inconsistent and unpredictable.

The device might hang for a moment, the device might be a bit slow — or, as sometimes is the case when one tries to run old games on modern hardware, far too fast — etc. So, a good way to compensate for that is to check how long it has been since the last frame has been drawn and take that into account when we draw the next frame. So now we can send the time value to our shader every frame and use it to animate the sine wave.

Notice though that the distortion is being applied to the entire image. One way to do so only on certain areas is to use another texture as a map, and paint areas brighter or darker proportionally to how strong or weak we want the distortion to be.

Then, we can multiply the amount of the distortion by the brightness of the current pixel of the map. In this case, the values are the mouse x and y position. Now we just need a depth map. This will probably be a different map than the one we used before. So, instead of loading two textures, one for each map, we can add both maps on the same image file, each in a separate channel — that is, one in the red channel and one in the green channel.

This way we can save loading time and system memory. Keep in mind though that this is a quick and dirty way to do the depth effect. As such, it should be kept subtle, otherwise artifacts will soon be very apparent. So what about adding text to it? Creating text on canvas is tricky, and while loading a bitmap containing the text is possible, it has its problems: limited resolution, file size, harder to author, etc.

A solution is to use SVG — we can draw externally loaded SVG files to a canvas object, and then use that canvas as a texture.GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.

If nothing happens, download GitHub Desktop and try again. If nothing happens, download Xcode and try again. If nothing happens, download the GitHub extension for Visual Studio and try again. This project requires any graphics card with support for a modern OpenGL pipeline.

jQuery Ripples – WebGL Based Ripple Effect for Backgrounds

This project also requires a WebGL capable browser. The project is known to have issues with Chrome on windows, but Firefox seems to run it fine.

Three different waveforms can be animated:. Skip to content. Dismiss Join GitHub today GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together. Sign up. No description, website, or topics provided.

JavaScript C. JavaScript Branch: master. Find file. Sign in Sign up. Go back. Launching Xcode If nothing happens, download Xcode and try again. This branch is 30 commits ahead of CISFallmaster. Pull request Compare. Latest commit Fetching latest commit…. The 2D sine wave is generated by varying only the height of each vertex in the grid.

webgl wave effect

Unlike the previous waves, this wave moves verticies in all directions. Each vertex is moved uniformly about a circle in some vertical plane This plane can be set in the VS by changing waveDir The phase of each point is determined by their distance from the origin in the waveDir direction, resulting in linear wavefronts. This simulates in a very simple way how particles move in the surface of ocean waves.

This leads to cool sunrise effects:! PNG Specular mapping only water is specularly reflective Moving clouds with procedurally generated shadows. You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window.

Added screenshots.

webgl wave effect

Nov 9, Increased grid resolution.It's thanks to WebGL that we can include real-time 3D graphics in web pages. Apple are supporting the standard too, so we can hopefully! So sit back, crank up your latest browser, and check out these demos - if you think you can do better, go for it: there are some hints and tips on how at the end. Multicoloured lighting and an interesting application of light and shade are put to good effect in this dramatic, slow-motion avalanche of macaroni.

It's strangely mesmerising. Above is the YouTube video not interactiveand you can reach the interactive version here. The premise of Nouvelle Vague by ultranoir is relatively simple: take some tweets and put them into a 3D landscape. That, however, doesn't do justice to this particular site. Nouvelle Vague has all manner of flying vehicles including a biplane, an airship and some balloons. All of these brilliantly realised models — built and animated in Blender by artists and then imported into the WebGL scene — carry the tweets and circle around a giant central statue.

It's very surreal site and it's very well made. As you'd expect with a new technology, there are a lot of people using WebGL to do cool demos, and fewer real tools. Chemdoodle is an exception to this. This demo page lets you pick one of a number of medicines and see a 3D representation of its chemical structure in the browser. Want to see the skeleton and the blood system? Just click the buttons.

Best jQuery Image Effects Plugins & Tutorials with Demo

As an educational tool it's easy to see the potential — the 3D map makes it possible to visualise diseases and treatments via the web or even on your mobile.

Tom Beddard started his career as a laser physicist before being seduced by software engineering, and he's now well known for his amazing 3D fractals. FractalLab is his WebGL creation, computing everything it shows you in real time on your computer.

webgl wave effect

Beddard has helpfully included an in-depth explanation of his processes and thinking. Another beautiful scene, but slightly more peaceful, comes from Aleksandar Rodic : a sea of floating jellyfish, all simulated on your computer.

Also, don't miss the video he did showing a sadly not public version that is controllable by a Kinect! Current page: Page 1.By using our site, you acknowledge that you have read and understand our Cookie PolicyPrivacy Policyand our Terms of Service.

The dark mode beta is finally here. Change your preferences any time. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information.

When I apply a Fragment Shader to give it a wavy effect, the borders of the texture seem to stretch. However, I don't want that; I want the background color to be seen in this case, clear so that it just looks like a flag that's waving. You can see the problem in the CodePen here. TextureLoader ; loader. Vector2 0. What you can do is to scale the wave effect dependent on the v coordinate of the texture. If you scale by 1.

For a less weak wave effect in the top area of the flag, scale by the square of the v coordinate 1. Learn more. Asked 4 months ago. Active 4 months ago. Viewed 49 times. I've got a flag texture like so: When I apply a Fragment Shader to give it a wavy effect, the borders of the texture seem to stretch.

Rabbid76 Active Oldest Votes. Rabbid76 Rabbid76 Also check out Adrian Boeing's webpage. I was inspired to recreate this in Unity. Thanks for these awesome posts! Not working any more inChrome and Firefox. Looking forward to more. Problem seems to be new restrictions on cross site content.

Thanks for excellent tutorials, this is the first place i have found, that you can start learning WebGL without any additional scripts that aren't explained. Cheers, Jussi. Thank you for your sample, it's so helpful. The coins will stored in your account, and you can convert them to Bitcoins or USD.

Post a Comment. There is really nothing special to the ripple effect, in essence it is just an evaluation of the sombrero function.

This is just a 2D version of the sinc function. Posted by Adrian at PM. Labels: demoscenefluidgraphics. Newer Post Older Post Home. Subscribe to: Post Comments Atom. My Blog List. Hack a Day. IEEE Spectrum. Real-Time Rendering. Seven Things for April 17, 5 hours ago. SparkFun Electronics - New Products.

Subscribe to RSS

Twenty Sided.With Firefox OS, asm. This incredible demo is as fluid as you could believe. Raise and drop the ball into the water to see realistic, beautiful splashing of the water.

You can also just click the water to see it ripple away. I'm completely awestruck at how realistic and smooth the animation is in this excellent WebGL demo. Fizzy Cam uses your machine's webcam to display your likeness but with thousands of moving blocks overlaid, giving a fun and artsy feel to the display.

The boxes move with motion so move about as you use the demo and marvel at how creative this WebGL demo is. The Blossom demo animates leaves from a tree. That sounds simple but there's something very realistic about this WebGL treat; the leaves look so real and flow so naturally that you can't help but keep watching. Call me soft but I think this animation is incredibly beautiful.

Teach Me to Fly is a fun game where your character flies through the air and it's your job to guide him around buildings. The controls are simple, the game is simple, and yet it's very fun and challenging to play. The 3D buildings look outstanding and control is spot on. This demo features an enormous eye that follows your cursor around the screen, all the while pulsating and changing colors as music plays.

A bit. The detail within the the lessor obvious parts of the eye is what really caught my attention -- fluid, smooth, and consistent.

Nucleal is another particle-based animation but this one transcends others. Choose the amount of particles to use i. The particles also animate at and curves to an amazing smoothness. This interactive globe is amazingly reactive and practical. The revolving, animating spheres round the globe also add great visual appeal.

Google Maps Cube is a game whereby you rotate your cursor around a cube, tipping the cube in a given direction, so as to get a ball to a destination on the map.

This is an interesting, creative use of Google Maps and very well executed. This demo may be the most impressive of the lot but I have to feature it last to hide my shame in that I really enjoy this Oh, but the demo. This demo is outstanding, with lights As the music plays in the background, you navigate a beam of light through hills of lights.

Press down on your mouse and the beam of light accelerates. As the demo continues, more and more lights and colors come into the animation. I can't recommend this demo enough. I have to say that I believe these nine demos are shocking and possibly better than the original nine. The great work being done by animators is awe-inspiring and hugely ambitious. I hope you strive to greatness after seeing these massive demos!

As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us. Another technology available The post became quite popular so I It makes sense -- if you detect users selecting the terms over and over again, you can probably assume your visitors are searching that term on Google


thoughts on “Webgl wave effect

Leave a Reply

Your email address will not be published. Required fields are marked *