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
  • Why did we make CineShader?

    We simply wanted to make something beautiful. As developers working in the advertisting industry, we have learnt a lot from the Shadertoy community. We decided to make this little non-profit project for the Shadertoy community to allow their users to demonstrate their shader in a cinematic way.

  • 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?

    We don't store your shaders. 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?

    CineShader refreshes the shader lists from Shadertoy each day, every 6 hours. Also, please make sure it is visible by Cineshader:
    it must include the tag "cineshader" its visibility must be set to "public + API"

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

    Since we don’t store your shaders on our server and shader storage relies on user saving their shaders on Shadertoy, it will be troublesome for us as well as for the users to synchronise the inputs and their settings between CineShader and their shadertoy entry.

  • 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. It leverages the Shadertoy.com API to bring thousands of existing shader artworks into a cinematic 3D environment.

The whole project was started as an idea of using a web demo to explain what procedural noise is to our clients at Lusion. After sending out the demo to some of our friends, we were encouraged to add the live editor support and we decided to release it to the public.

We are not trying to make another Shadertoy but instead hoping to give the Shadertoy users an extension to demonstrate their shaders with a different presentation. Hence, all shaders are still hosted at Shadertoy.com and reverse compatible in Shadertoy.
About Us
Lusion is an award winning multidisciplinary production studio. From creative to production, we collaborate with creative agencies and design studios to deliver compelling, real-time experiences, which go far beyond expectations.
Follow Us
www | tw | in | ig | fb

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
brought to you by Lusion

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