Shader Grid is a Three.js and WebGL shader powered infinite image grid with smooth drag interaction, post‑processing effects, and optional lightbox support. It’s fully responsive, touch‑friendly, and designed to run across all major browsers and devices.
<h3>Highlights</h3>
Three.js + WebGL Shaders – Next‑gen GLSL grid with rich visual effects and GPU performance.
Easy To Configure And Install – Includes detailed documentation, demo pages, updates, and direct support from the developer – <a href="mailto:tibi@fwdapps.net" rel="nofollow ugc">Tibi @ FWD</a>.
<h3>Main Features</h3>
<ul>
<li>Responsive Layout – Fully responsive and adaptable regardless of which device or screen size is used.</li>
<li>Desktop & Mobile Optimized – Optimized for iOS, Android, and desktop browsers.</li>
<li>Lazy Scrolling/Loading – Initialize only when visible in the page to save resources.</li>
<li>Infinite Drag – Drag infinitely in all directions with seamless wrapping.</li>
<li>Paralax – Optional vertical parallax.</li>
<li>Customizable Size – Adjust image size and spacing as needed.</li>
<li>Caption – Optional captions styled via CSS.</li>
<li>Dynamic Image Black & White – Adjustable black and white falloff from the center.</li>
<li>Hover Scale – Smooth hover scale with custom size.</li>
<li>Scroll Speed Strength – Fine‑tune drag speed and feel.</li>
<li>Wave Post‑Processing – Adjustable wave frequency, amplitude, and RGB shift.</li>
<li>Glitch Post‑Processing – Optional glitch effect.</li>
<li>Bulge Post‑Processing – Bulge effect with RGB distortion controls.</li>
<li>Ripple Post‑Processing – Ripple effect with strength and size controls.</li>
<li>Customizable Mouse Distortion – Flowmap‑based distortion with optional RGB shift.</li>
<li>Lightbox Video/Audio – Supports <a href="https://fwdapps.net/p/sg/demo-1.html#/?rlguid=fwdsg0_&rlmid=7" rel="nofollow ugc">mp3</a>, <a href="https://fwdapps.net/p/sg/demo-1.html#/?rlguid=fwdsg0_&rlmid=0" rel="nofollow ugc">mp4</a>, <a href="https://fwdapps.net/p/sg/demo-1.html#/?rlguid=fwdsg0_&rlmid=12" rel="nofollow ugc">YouTube</a>, <a href="https://fwdapps.net/p/sg/demo-1.html#/?rlguid=fwdsg0_&rlmid=13" rel="nofollow ugc">Vimeo</a>, <a href="https://fwdapps.net/p/sg/demo-1.html#/?rlguid=fwdsg0_&rlmid=11" rel="nofollow ugc">HLS</a>, DASH, <a href="https://fwdapps.net/p/sg/demo-1.html#/?rlguid=fwdsg0_&rlmid=6" rel="nofollow ugc">Google Drive</a>, Dropbox, and more.</li>
<li>Video Autoplay – Optional autoplay inside the <a href="https://fwdapps.net/p/sg/demo-2.html#/?rlguid=fwdsg0_&rlmid=0" rel="nofollow ugc">lightbox</a>.</li>
<li>Private Video & Audio – Password‑protected media support, <a href="https://fwdapps.net/p/sg/demo-1.html#/?rlguid=fwdsg0_&rlmid=1" rel="nofollow ugc">example</a>.</li>
<li>Chromecast Support – Cast compatible streams to TV.</li>
<li>Video Thumbnails Live Preview – VTT or auto‑generated thumbnails in the lightbox.</li>
<li>Video Subtitle Support – Subtitle support inside the <a href="https://fwdapps.net/p/sg/demo-1.html#/?rlguid=fwdsg0_&rlmid=0" rel="nofollow ugc">lightbox</a>.</li>
<li>Automatic Content Detection – <a href="https://fwdapps.net/p/rl/" rel="nofollow ugc">Revolution Lightbox</a> detects media type automatically.</li>
<li>Slideshow Support – Autoplay for grid items and lightbox.</li>
<li>Drag & Swipe Support – Touch and drag navigation.</li>
<li>Maximize & Minimize For Images – Double‑click/tap zoom and maximize controls.</li>
<li>Share Button And Share Window – Built‑in share window with multiple platforms.</li>
<li>Detailed Documentation – <a href="https://fwdapps.net/p/sg/javascript-documentation.html" rel="nofollow ugc">JavaScript documentation</a> and <a href="https://fwdapps.net/p/sg/wordpress-documentation.html" rel="nofollow ugc">WordPress documentation</a> included.</li>
</ul>
<h3>Configuration</h3>
After activation, open the plugin settings in the WordPress admin area and create a new grid preset. Then use the shortcode below in any post or page.
<h3>Use Cases</h3>
<ul>
<li>Infinite image grids for hero sections</li>
<li>Portfolio and gallery showcases</li>
<li>Interactive media walls</li>
<li>Product or brand storytelling sections</li>
<li>Immersive landing pages</li>
</ul>
<h3>Links</h3>
<ul>
<li><a href="https://fwdapps.net/p/sg" rel="nofollow ugc">Homepage & Docs</a></li>
<li><a href="https://fwdapps.net/p/sg/#demos" rel="nofollow ugc">Demos</a></li>
<li><a href="https://fwdapps.net/p/sg/javascript-documentation.html" rel="nofollow ugc">JavaScript Documentation</a></li>
<li><a href="https://fwdapps.net/p/sg/wordpress-documentation.html" rel="nofollow ugc">WordPress Documentation</a></li>
<li><a href="https://fwdapps.net/contact" rel="nofollow ugc">Support</a></li>
<li><a href="https://fwdapps.net/p/rl/" rel="nofollow ugc">Revolution Lightbox</a></li>
</ul>
<h3>Shortcode</h3>
Basic example:
[fwdsg preset_name=”Grid preset 1″ gallery_name=”test”]
<h3>Development</h3>
This plugin’s full source code is publicly available for transparency and verification. 
Developed and maintained by <a href="https://fwdapps.net" rel="nofollow ugc">FutureWebDesign</a>.
<ul>
<li><a href="https://fwdapps.net/d/js/sg.zip" rel="nofollow ugc">Source code & build tools</a> — includes original uncompiled files and Vite build configuration.</li>
<li>Distributed plugin uses a compiled build generated by Vite for optimal performance.</li>
</ul>

Shader Grid

Powerful and extremely customizable responsive infinite image/video grid with WebGL shaders and lightbox support.

clausernst

Pop3D Charts is a native WordPress chart block for creating interactive 2D and real WebGL 3D charts directly in the Gutenberg editor. Build responsive column charts, stacked charts, pie and donut charts, line/area charts, pyramid charts, and 3D stairs donut charts without shortcodes or an external chart dashboard.
The free plugin is made for visual data storytelling in WordPress: editorial articles, landing pages, reports, comparisons, survey results, educational content, KPI sections, and data-driven pages. Add the block, enter your values, paste spreadsheet data, or import CSV, JSON, XLSX, or XLS files. Then choose a chart layout, adjust the design in the sidebar, and publish an interactive chart that visitors can explore.
Unlike flat chart plugins or CSS-based 3D effects, Pop3D Charts renders its charts in a real WebGL scene using three.js. Where supported by the selected layout, visitors can switch between 2D and 3D views, rotate the chart, inspect the legend, open a semantic data table, and export the chart as a PNG.
Try the free version in <a href="https://playground.wordpress.net/?blueprint-url=https%3A%2F%2Fclausernst.com%2Fwp-content%2Fuploads%2F01-docs%2Ffree-charts-playground%2Fpop3d-charts-free-blueprint-editorial-cards-v9.json" rel="nofollow ugc">WordPress Playground</a> — no install required.
<h4>Free WordPress chart layouts included</h4>
<ul>
<li>Straight column charts for classic category comparisons — optional leader-line annotations on individual bars.</li>
<li>Stacked column charts for totals, grouped values, and composition — optional leader-line annotations on individual segments.</li>
<li>Pie and donut charts for simple shares of a whole.</li>
<li>Line / Area charts for trends, sequences, multi-series data, annotations, point labels, and optional area fills.</li>
<li>Pyramid charts for ranked, proportional, or funnel-like comparisons.</li>
<li>3D stairs pie/donut charts where each segment rises to its own height and forms a stepped 3D ring.</li>
<li>2D and 3D chart views where supported by the selected layout.</li>
<li>Interactive front-end controls with optional legend, sorting, fullscreen view, data table modal, and PNG export.</li>
<li>Responsive chart sections for desktop, tablet, and mobile layouts.</li>
<li>Five block patterns in the Interactive charts category — starter charts with sample data, titles, labels and an editorial card layout you can adapt.</li>
</ul>
<h4>Designed for the WordPress Block Editor</h4>
Everything important happens inside the block sidebar. You can edit rows, import data, switch chart layouts, change palettes, adjust labels, configure captions, and preview the result while you work.
There is no shortcode workflow and no separate proprietary chart database. Chart settings and chart data are stored as normal block attributes inside the post content.
<h4>Free version features</h4>
<ul>
<li>Native Gutenberg chart block for the WordPress Block Editor.</li>
<li>Real WebGL rendering via three.js for 3D chart scenes.</li>
<li>Chart layouts: straight columns, stacked columns, pie/donut, Line / Area, Pyramid, and 3D stairs pie/donut.</li>
<li>Eleven built-in color palettes: Vivid, Ocean Sunset, Purple Raindrops, Spectrum, Magenta Dream, Twilight, Accessible, Material, Corporate, Monochrome, and Diverging.</li>
<li>Per-row color overrides using hex color values.</li>
<li>Live editor preview while editing data, labels, appearance, captions, and chart settings.</li>
<li>Manual row editor for adding, editing, duplicating, reordering, and deleting chart rows.</li>
<li>Flexible data input: enter rows manually, paste from a spreadsheet, or import JSON, CSV, XLSX, or XLS files — with smart table detection and column mapping for spreadsheet imports.</li>
<li>Import your chart setup from the file: optional title, subtitle, source note, axis labels and units in CSV or JSON land straight in the block sidebar — pick a layout and you are often ready to publish.</li>
<li>Chart data export as CSV or JSON, including titles and labels when set.</li>
<li>Optional front-end controls such as legend, sorting, data table modal, fullscreen view, and PNG download where enabled and supported.</li>
<li>Lazy loading for 3D scenes when charts scroll into view.</li>
<li>Built-in translations for English, German, French, and Spanish.</li>
<li>Block patterns under Interactive charts — five ready-made example charts (straight, stacked, pie/donut, line/area, pyramid) with titles, subtitles and sample data.</li>
<li>Accessibility-minded output with labelled chart regions, semantic data tables, keyboard-friendly dialogs, accessible toolbar labels, and live regions for loading and tooltip states.</li>
</ul>
<h4>Bring your own chart data</h4>
Start with a few manual rows, paste values from Excel or Google Sheets, or import a prepared file. You can put chart title, description, source, axis names and units in the same file above the data table — on import they appear in the sidebar tabs so you rarely need to type them by hand. Pick the chart layout that fits your story; scales, tick labels and row links from the file are applied too. Re-importing always replaces the previous chart so nothing stale is left behind.
The importer finds the data table even when extra lines appear above it, maps common column names automatically, and lets you assign columns manually when needed.
For most charts, the most useful columns are:
<ul>
<li><code>value</code> — the number that drives the chart.</li>
<li><code>headline</code> — the main label, such as a product, country, month, or category.</li>
<li><code>unit</code> — an optional unit such as <code>%</code>, <code>€</code>, <code>kWh</code>, or <code>items</code>.</li>
<li><code>paragraph</code> — optional tooltip text.</li>
<li><code>smallPrint</code> — an optional source note or footnote.</li>
<li><code>color</code> — an optional custom row color such as <code>#ff8800</code>.</li>
<li><code>groupKey</code> — useful for stacked chart groups and multi-series charts.</li>
<li><code>colIndex</code> / <code>rowIndex</code> — optional grid position (column and row index). Legacy header names <code>scatterX</code> / <code>scatterY</code> are still accepted on import.</li>
<li><code>columnLabel</code> / <code>rowLabel</code> — optional category labels for grid rows and columns.</li>
</ul>
A simple CSV can look like this:
<pre><code>value;unit;headline;paragraph;smallPrint
42;%;North;Sales region Q1;Report 2024
31;%;South;Sales region Q1;Report 2024
</code></pre>
Tip: create one chart manually, then export it as CSV from the block settings. The exported file gives you a practical template — complete with title, labels and units you can reuse in your own spreadsheet.
<h4>Built for visual data storytelling</h4>
Pop3D Charts is made for charts that feel like part of the page instead of external reports embedded into it. Use it when a standard flat chart feels too plain and you want a more visual, interactive, and slightly fancy way to present your data.
It works especially well for:
<ul>
<li>editorial data stories</li>
<li>annual reports</li>
<li>landing page sections</li>
<li>product and feature comparisons</li>
<li>survey results</li>
<li>educational content</li>
<li>simple KPI and performance summaries</li>
<li>interactive data sections in WordPress pages and posts</li>
</ul>
<h4>Optional Pro add-on</h4>
The free plugin is fully usable on its own. An optional Pro add-on is available separately outside the WordPress.org directory and extends the same Gutenberg chart block with additional layouts, palettes, styling options, and ready-made chart patterns.
The free version includes straight columns, stacked columns, pie/donut, line/area, pyramid, and 3D stairs pie/donut charts, plus import/export, built-in palettes, 2D/3D views where supported, and optional front-end controls.
Pro is only needed if you want more advanced chart layouts, extra design options, and ready-made chart patterns.
Learn more about Pro: <a href="https://clausernst.com/en/pop3d-charts-wordpress-plugin/" rel="nofollow ugc">Pop3D Charts Pro</a>
For free plugin support, please use the Support tab on this plugin page. Commercial support for the Pro version is handled through the vendor support channel.
<h3>Credits</h3>
Attributions required under Apache License 2.0 for bundled components are listed in the root file NOTICE; the full Apache-2.0 license text is in licenses/APACHE-2.0.txt.
Third-party libraries and assets are bundled with this plugin and served from your site. Runtime dependencies such as Three.js are not loaded from external CDNs.
<ul>
<li>three.js — 3D rendering (MIT License). https://threejs.org/</li>
<li>three.js examples (OrbitControls, RoundedBoxGeometry, Reflector, CSS2DRenderer) — Same license as three.js (MIT), included alongside the vendor build.</li>
<li>SheetJS Community build (<code>xlsx</code>) — Parsing <code>.xlsx</code> / <code>.xls</code> files in the block editor for import (Apache License 2.0). https://sheetjs.com/</li>
<li>Troika 3D text (<code>troika-three-text</code> and sibling modules under <code>vendor/troika</code>) — Rendering text in WebGL scenes (Troika: MIT License). The file <code>vendor/troika/troika-three-text.esm.js</code> embeds components whose upstream licenses are called out at the top of that bundle: Typr.ts (MIT), fflate (MIT), woff2otf WOFF unpacking (Apache-2.0), and unicode-font-resolver client (MIT). https://github.com/protectwise/troika</li>
<li>Barlow Semi Condensed (Bold and Light <code>.ttf</code> under <code>assets/</code>) — Typography in 3D labels (SIL Open Font License 1.1). https://fonts.google.com/specimen/Barlow+Semi+Condensed</li>
</ul>
The plugin does not transmit imported spreadsheet files to your server as uploads; parsing runs in the editor in the visitor’s browser. Chart settings and data live in normal block attributes in post content.

Pop3D Charts – 2D/3D Data Visualizer

Real WebGL 3D bar chart, pie chart and data visualization block for WordPress. Import one CSV or JSON — title, labels and values fill the sidebar.

Shader Grid vs Pop3D Charts – 2D/3D Data Visualizer