by

Open in Shadertoy
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
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 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.

  • Will it support VR mode?

    Yes, we are planning to support VR through the WebXR API.

Changelog

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 compatiable 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!