Interactive WebGL demonstration code of article Color-mapped noise vector fields for generating procedural micro-patterns Presented at Pacific Graphic 2022
The software is a WebGL implementation of our real-time generation and filtering of structured procedural micro-patterns. After loading, the main part of the screen show different things: the rendered texture on a plan in the background and input data (noises and colormap) in the foreground.
On the left, the interactive options are the following:
- "Choose noise/colormap"
- list: list of the possible choice of patterns;
- "show" button: radio button to show/hide the input noises and the color-map used;
- "Scale texture coordinate": modify the scale of the patterns;
- "Animation"
- "Reset": reset button to withdraw the animations;
- "Rotation": animating the textured plan with a rotation around z axis
- "Translation_U": animating the textured plan with a translation along u axis
- "Translation_V": animating the textured plan with a translation along v axis
- "Aniso": control the anisotropy of the filtering footprint;
- "Render": choose to render either the patterns, the x noise, or the y noise;
- "Camera": different points of view for the scene;
As it is a WebGL implementation, it runs on every operating system. It
just needs a compatible web browser (Microsoft Edge, Firefox, Google
Chrome or Safari for example) and a live server to run
(the Live Server extension on Visual Studio Code or local webserver launch with python3 -m http.server)
It should run on any configuration, but of course a discrete graphic GPU (with dedicated memory) will provide you better performance
The final figure of the article (Figure 15) where obtain by taking screenshots of the rendering without changing the parameters (only hiding the input data and the graphic interface by clicking on the top left of the web page).