by

Open in Shadertoy

Discover the CineShaders created by the Shadertoy community.
Click on any to preview it in the 3D environment.
If you want to add yours, please .

Sort by:
Credits
CineShader proudly uses:

Shadertoy.com API GLSL Editor's Helpers CodeMirror Three.js GSAP
Special thanks to:

Patricio Gonzalez Vivo for his work of The Book of shaders Refik Anadol for his artwork which inspired us for this 3D stage set up.
Designed and built by Lusion

Visual Lead: Edan Kwan Designer & Lead Developer: Fred Briolet Developer: Roch Bouchayer
FAQ
  • What does CineShader demonstrate?

    CineShader presents procedural fragment shaders inside a cinematic 3D scene. This NGL demonstration preserves the existing visualiser and live editor; it does not claim authorship of the original engine or community shaders.

  • How to import a shader from Shadertoy.com?

    The easiest way to do is to simply copy and paste the shader from Shadertoy.com into the editor. Bare in mind that, CineShader doesn't support any texture, audio and framebuffer. If you want to make your shader CineShader compatible, please see .

  • How to share a shader?

    Editor slots are saved locally in this browser. This demonstration does not upload shader code. If you want to share your shaders, you need to create a new shader in Shadertoy.com and .

  • Why is my Shadertoy shader not showing in the gallery?

    This demonstration uses a saved snapshot of public gallery rankings. Lists do not refresh automatically, and community shader import is currently unavailable. Use the bundled templates or paste compatible shader code into the editor.

  • Why doesn't it support texture and frame buffer?

    This visualiser supports compatible fragment shader code without texture, audio or framebuffer inputs. The conversion instructions describe the supported shader interface.

  • Does it support VR mode?

    Yes, it does support VR through the WebXR API. Open this site in your VR-headset browser to experience it!

Changelog

18/01/2021
- Fix VR bug for specific controllers

14/01/2021
- Improve VR support for specific controllers

13/01/2021
- Add VR support using WebXR API

29/10/2020
- Add gallery page

30/1/2020
- Remove axis helper
- Fix initial iMouse position
- Add anti-aliasing for HD snapshot
- Add changelog

28/1/2020
- Initial release

Terms

We are not responsible for the content the user created. All user generated shaders are hosted on Shadertoy.com and for the ownership/license of the shaders, please refer to https://www.shadertoy.com/terms

About

CineShader is a real-time 3D shader visualiser with a live code editor. This NGL demonstration provides the existing browser runtime, bundled shader templates and locally saved editor slots.

Gallery rankings are saved public-data snapshots. Community shader import is currently unavailable; compatible shader code can still be pasted into the editor and compiled locally. Original engine and shader licenses remain applicable.
About this demonstration
NGL Studio hosts this demonstration as part of its interactive experiment library. Engine and artwork credits remain with their respective authors.
NGL Studio
Demonstration library

Shader editor

Welcome to your personal shader playground, where you can write your own and see how it looks in a cinematic 3D environment.

Few things to know:
  • The shader editing structure matches the same as the one in Shadertoy.com with the same predefined uniforms such as iResolution, iTime, etc. Except no texture, audio and framebuffer supported
  • There are other features including 2.5D through the alpha channel of fragColor.
  • We don’t host your shaders, your shaders are automatically saved in your local machine through the localStorage API. You got 3 shader slots for localStorage. If you want to save and share your CineShader, please
  • WebGL 2 by default and WebGL 1 fallback if the user’s browser doesn’t support WebGL 2
  • Need a reminder of the supported uniforms?
  • If you want to convert your existing shaders from Shadertoy into a compatible shader,
  • Open your shadertoy in CineShader:

We encourage you to add the cineshader tag if you save your shaders on Shadertoy.
  • 1
  • 2
  • 3
Template:
Model:
Title:
Description:
164.7 59fps

CineShader

A cinematic real-time shader visualiser
in the NGL Studio demonstration library

Now Loading (0%)
Error message here!

Entering CineShader VR

Now Loading (%)

Welcome to CineShader VR

Discover shader artworks
from the Shadertoy community
in a cinematic VR environment.

Crafted by Lusion