✨ Creating Restaurant Menu Boards with Heat Distortion Effects using WebGL ✨

  • 3
  • Article
  • Updated 2 years ago
  • (Edited)


What better way to make your digital menu stand out than actual heat waves coming from the photos? We've used a free WebGL library to create a really simple but cool menu board that could be used for a small restaurant. From a performance standpoint you can use something like a Windows Intel compute stick. You can preview the presentation here and get started by following the stages below!

STAGE 1: SET UP THE ENVIRONMENT

On your machine, install NodeJS and make sure that both NodeJS and NPM are up to date.

Follow the steps outlined in the HeatDistortionEffect readme.md to build, watch and run the project. This repository includes all of the samples provided to create various heat distortion effects. The cooking heat distortion effect is the example that I've used for this post.

STAGE 2: TEST ON LOCALHOST

After following through the steps outlined in the Heat Distortion Effect readme.md to build the project on your own machine, go to the page that you have built on http://localhost:8080/ to view the initial web page. The example that I've used is located at index3.html (the cooking example).

Before making tweaks to the code, I started with the images that I wanted to apply the heat distortion effect to.

STAGE 3: READY YOUR IMAGES

Start with one image to see how the effect looks. We'll need to create three instances of the same menu image item for this effect.

Image 1: Original Image

Using the highest resolution available for your photo is recommended.

My original image is https://github.com/hcs0/Restaurant-Me...

This image is a stock photo - you can use your own.

Image 2: The Blurred Image

Duplicate the original image to create its blurred counterpart and further simulate the heat distortion effect. Using the free and open source tool GIMP, I used the Gaussian Blur filter. You can use other filters, settings and image editing software to create the blurred image effect.

My blurred image is https://github.com/hcs0/Restaurant-Me...

After creating the Gaussian Blur effect, I exported to a JPG file at the 100% quality. You may have your own preference or file formats to keep to the highest quality. As long as it works for you!

Image 3: The Heat Map Image

I duplicated the original image to create a 'heat map' type image rendering. This helps further simulate the heat distortion effect.

In GIMP, I reduced the image to three colors via Color > Posterize > selecting to 3 colors only. On a new layer, I added the green-to-white gradient and selected the Layer mode to 'Darken only' meaning that the green will only show on the white areas within the posterized image.

The heat map image plays a role on where the heat distortion takes place. You may end up doing a few other changes to this, but for the first iteration, let’s see how it will look like when brought together with the rest of the images.

My heat map V1 image is https://github.com/hcs0/Restaurant-Me...

STAGE 4: REPLACE THE IMAGE ASSETS IN THE JAVASCRIPT CODE

Once your image assets are ready, save them in the img folder under demo. Replace the uploaded image links in the .js file located at /build/cooking.js

STAGE 5: TWEAK THE CSS

If you are planning to do further tweaks to the CSS, you can do so by editing the cooking.css file in demo/css folder

STAGE 6: TWEAK THE HTML

You can do any further tweaks to the main HTML page which is index3.html. Since the initial .html page contain elements that you don't need, you can take these out of the html code. The stripped down to the form below:


<body class="demo-3">
<div class="container">
<div class="wrap">
<div class="Background">
canvas class="Background-canvas"></canvas>
</div>
</div>
</div>
<script src="../build/cooking.js"></script>
</body>


Note that this is the page that you will use to link the website page to your Rise Vision Presentation using the Web Page Widget.

I took out any extraneous detail, instead leaving additional content such as items to be added separately in Rise Vision.

STAGE 7: TWEAK THE IMAGES

Perhaps there is not enough heat distortion in the final product, there is too little or it's not in the right area. I decided to make a second iteration of the image - tweaking the Gaussian blur and other settings.

My heat map V2 image is https://github.com/hcs0/Restaurant-Me...

Make sure that any image file changes go back to the JS file containing the image assets.

I tested 'on sight' by refreshing the demo on http://localhost:8080/ until the new change had the desired heat distortion effect that I am looking for.

STAGE 8: ADD TO RISE VISION

Once you've built the components and can see the project on http://localhost:8080/ you can use the Web Page Widget and link to the page hosted on http://localhost:8080/ to start previewing the presentation. This is especially useful if you are planning to integrate any of the Widgets alongside this Presentations.

Note that since it's on http://localhost:8080/, you cannot preview this on a live Display. In Stage 10 I uploaded to my own web server and from there, did further tweaks based on testing.

STAGE 9: ADD THE WIDGETS AND OTHER ASSETS

For this example, I decided to add the free Spreadsheet Widget on two instances - one showcases the menu item and the other showcases a few customer reviews. A number of users like to use this Widget because any changes made to the content can be done from Google Spreadsheets. You can use this Widget and any others available.

You can preview it all at http://preview.risevision.com/?type=p...

STAGE 10: UPLOAD TO YOUR WEB SERVER

Upload on to your own web server and relink to the correct URL in the Web Page Widget. Remember that http://localhost:8080 was used from Stage 8 is not viewable on a live Display. To view your project, it must be accessible to the web.

For this part, you probably have your own preference on how you want to upload and manage the project online. As long as it works!

STAGE 11: ADD THE PRESENTATION TO A SCHEDULE

Since this is using the Web Page Widget, you may come across an issue with the assets re-loading again when this presentation is added to a Schedule with other presentations.

If you are planning to add this to a Schedule with other presentation, you may want to change the Web Page Widget settings to what I have below:

  • Select "Do not refresh" (therefore, any changes to the page can be refresh via restarting the Player)

  • Deselect “Unload Web Page when not visible in Presentation” - this will keep the web page and assets from loading again


WHERE TO AFTER THIS?

After working on the above, the final links that I have are:

The final page: http://hannahsuarez.me/projects/HeatDistortionEffect-master/demo/index.html

Final preview linking to the website page: http://preview.risevision.com/?type=presentation&id=15af9fcc-5c0a-46ce-8a04-db5dcf00b00c

Final repository: https://github.com/hcs0/Restaurant-Menu-HeatDistortion

webgl1

This article really only touches a small portion of what is possible with WebGL in image effects and image distortion. I did not cover ways to further add distortion effects covered in this article about creating heat distortions but you are free to further tweak this accordingly.


If you have used this article or have your own to add related to this post, feel free to share below!
Photo of HSuarez

HSuarez

  • 11,896 Points 10k badge 2x thumb

Posted 2 years ago

  • 3

There are no replies.