<p>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.</p>
<h3>Highlights</h3>
<p><strong>Three.js + WebGL Shaders</strong> – Next‑gen GLSL grid with rich visual effects and GPU performance.</p>
<p><strong>Easy To Configure And Install</strong> – Includes detailed documentation, demo pages, updates, and direct support from the developer – <strong><a href="mailto:tibi@fwdapps.net" rel="nofollow ugc">Tibi @ FWD</a></strong>.</p>
<h3>Main Features</h3>
<ul>
<li><strong>Responsive Layout</strong> – Fully responsive and adaptable regardless of which device or screen size is used.</li>
<li><strong>Desktop & Mobile Optimized</strong> – Optimized for iOS, Android, and desktop browsers.</li>
<li><strong>Lazy Scrolling/Loading</strong> – Initialize only when visible in the page to save resources.</li>
<li><strong>Infinite Drag</strong> – Drag infinitely in all directions with seamless wrapping.</li>
<li><strong>Paralax</strong> – Optional vertical parallax.</li>
<li><strong>Customizable Size</strong> – Adjust image size and spacing as needed.</li>
<li><strong>Caption</strong> – Optional captions styled via CSS.</li>
<li><strong>Dynamic Image Black & White</strong> – Adjustable black and white falloff from the center.</li>
<li><strong>Hover Scale</strong> – Smooth hover scale with custom size.</li>
<li><strong>Scroll Speed Strength</strong> – Fine‑tune drag speed and feel.</li>
<li><strong>Wave Post‑Processing</strong> – Adjustable wave frequency, amplitude, and RGB shift.</li>
<li><strong>Glitch Post‑Processing</strong> – Optional glitch effect.</li>
<li><strong>Bulge Post‑Processing</strong> – Bulge effect with RGB distortion controls.</li>
<li><strong>Ripple Post‑Processing</strong> – Ripple effect with strength and size controls.</li>
<li><strong>Customizable Mouse Distortion</strong> – Flowmap‑based distortion with optional RGB shift.</li>
<li><strong>Lightbox Video/Audio</strong> – 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><strong>Video Autoplay</strong> – 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><strong>Private Video & Audio</strong> – 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><strong>Chromecast Support</strong> – Cast compatible streams to TV.</li>
<li><strong>Video Thumbnails Live Preview</strong> – VTT or auto‑generated thumbnails in the lightbox.</li>
<li><strong>Video Subtitle Support</strong> – 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><strong>Automatic Content Detection</strong> – <a href="https://fwdapps.net/p/rl/" rel="nofollow ugc">Revolution Lightbox</a> detects media type automatically.</li>
<li><strong>Slideshow Support</strong> – Autoplay for grid items and lightbox.</li>
<li><strong>Drag & Swipe Support</strong> – Touch and drag navigation.</li>
<li><strong>Maximize & Minimize For Images</strong> – Double‑click/tap zoom and maximize controls.</li>
<li><strong>Share Button And Share Window</strong> – Built‑in share window with multiple platforms.</li>
<li><strong>Detailed Documentation</strong> – <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>
<p>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.</p>
<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>
<p>Basic example:</p>
<p>[fwdsg preset_name=”Grid preset 1″ gallery_name=”test”]</p>
<h3>Development</h3>
<p>This plugin’s full source code is publicly available for transparency and verification.<br />
Developed and maintained by <a href="https://fwdapps.net" rel="nofollow ugc">FutureWebDesign</a>.</p>
<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.

callahancodes

<p>Three Importer allows users to insert custom ThreeJS scenes which can be implemented via Block editor, shortcode, or custom script injection. This allows people with little-to-no coding experience to well-seasoned developers to create beautiful, 3D scenes with full control over the settings.</p>
<p><strong>Block Support</strong><br />
Three Importer has full support with the official WordPress Block Editor. Simply type and select “/Three Importer” in your page editor and you’ll see the 3D render notice for the public view.</p>
<p><strong>Shortcode Support</strong><br />
Three Importer allows the exact same functionality from blocks within the <code>[ti3d_scene]</code> shortcode. Developers can also use the <code>[ti3d_sceneinject]</code> shortcode to call project-specific libraries from THREE and use them within custom scripts.</p>
<h3>Shortcode Parameters</h3>
<h4>Geometry Settings</h4>
<ul>
<li><code>geometry</code> : Type of 3D shape (default: box).</li>
<li><code>geometry_color</code> : Hex color code (default: #000000).</li>
<li><code>geometry_material</code> : Three.js material type (default: basic).</li>
<li><code>geometry_size</code> : Scaling factor (default: 1).</li>
<li><code>geometry_xrotation</code> / <code>yrotation</code> / <code>zrotation</code> : Initial rotation.</li>
<li><code>geometry_instancing</code> : Enable instanced rendering (default: false).</li>
<li><code>geometry_instancingnum</code> : Total instances (default: 50).</li>
<li><code>geometry_instancingspacing</code> : Gap between instances (default: 1).</li>
<li><code>gltf_url</code> : URL for external GLTF/GLB models.</li>
</ul>
<h4>Lighting Settings</h4>
<ul>
<li><code>light</code> : Light source type (default: ambient).</li>
<li><code>light_color</code> : Color of the light (default: #ffffff).</li>
<li><code>light_intensity</code> : Brightness (default: 1).</li>
<li><code>light_xpos</code> / <code>ypos</code> / <code>zpos</code> : Light coordinates (default: 0).</li>
<li><code>light_helper</code> : Toggle visual position guide (default: false).</li>
</ul>
<h4>Camera Settings</h4>
<ul>
<li><code>camera_xpos</code> / <code>ypos</code> / <code>zpos</code> : Camera coordinates.</li>
<li><code>camera_xtarget</code> / <code>ytarget</code> / <code>ztarget</code> : Camera look-at target.</li>
<li><code>camera_followmouse</code> : Enable mouse-tracking (default: false).</li>
</ul>
<h4>Particles & Scene</h4>
<ul>
<li><code>scene_background</code> : Background color or transparency (default: none).</li>
<li><code>particle_amount</code> : Total particles (default: 1000).</li>
<li><code>particle_size</code> : Size of particles (default: 1).</li>
<li><code>particle_speed</code> : Movement speed (default: 5).</li>
<li><code>particle_direction</code> : Flow direction (default: right).</li>
<li><code>particle_color</code> : Particle hex color (default: #000000).</li>
<li><code>particle_stretch</code> : Motion stretch factor (default: 5).</li>
</ul>
<h4>Grid & Text</h4>
<ul>
<li><code>cubegrid_stretch</code> : Grid stretch amount (default: 120).</li>
<li><code>cubegrid_spacing</code> : Distance between grid cubes (default: 1).</li>
<li><code>cubegrid_material</code> : Material for the grid (default: phong).</li>
<li><code>cubegrid_color</code> : Grid hex color (default: #ffffff).</li>
<li><code>trid_text</code> : String of text to render in 3D (default: TI).</li>
<li><code>trid_color</code> : Color of 3D text (default: #ffffff).</li>
<li><code>trid_size</code> : Depth/Size of 3D text (default: 1).</li>
</ul>
<h3>[ti3d_sceneinject] Available Modules</h3>
<ul>
<li><strong>Controls:</strong> orbitcontrols, flycontrols, firstpersoncontrols, pointerlockcontrols, trackballcontrols</li>
<li><strong>Loaders:</strong> gltfloader, objloader, fbxloader, textureloader, cubetextureloader, dracoloader, rgbeloader</li>
<li><strong>Post-Processing:</strong> effectcomposer, renderpass, unrealbloompass, shaderpass, ssaopass</li>
<li><strong>Shaders:</strong> fxaashader, copyshader, luminosityshader, sobeloperatorshader</li>
<li><strong>Geometry:</strong> boxlinegeometry, convexgeometry, parametricgeometry, teapotgeometry</li>
<li><strong>Helpers:</strong> gridhelper, axeshelper, camerahelper, directionallighthelper</li>
<li><strong>Misc:</strong> animationmixer, gui</li>
</ul>


Three Importer

A powerful ThreeJS WordPress plugin for creating 3D scenes via blocks, shortcodes, or custom script injection.

Shader Grid vs Three Importer