Question 1

How to use a webcam as a texture in shader-doodle?

Accepted Answer

Use the <sd-texture> component with the 'webcam' attribute, as shown in the README's camera example. It automatically captures the webcam feed and makes it available as a sampler2D uniform in your shader.

Question 2

shader-doodle vs Three.js for shader effects?

Accepted Answer

Shader-doodle is focused on 2D fragment shaders with a simple HTML interface, ideal for quick embeds and prototypes. Three.js is a full 3D library better for complex 3D scenes, vertex shaders, and advanced rendering, but with more setup overhead.

Question 3

Can I add custom uniforms to shader-doodle?

Accepted Answer

Not currently—the README lists custom uniforms as a low-priority future feature in the 'Next steps' section. You're limited to the built-in uniforms unless you modify the source code.

Question 4

Is shader-doodle good for audio visualizers?

Accepted Answer

Yes, it includes <sd-audio> for integrating frequency and waveform data into shaders, making it suitable for audio-reactive visualizers, as demonstrated in the example gifs and code snippets.

Question 5

How to make shaders responsive in shader-doodle?

Accepted Answer

The canvas automatically fits its container, and you can use the u_resolution uniform in your GLSL code to adjust shaders based on screen size, as shown in the basic shader example with st coordinates.

Question 6

Does shader-doodle work with React or Vue?

Accepted Answer

Yes, since it's a web component, you can import it and use the custom elements in frameworks like React or Vue, though you may need to handle attribute binding and lifecycle events carefully.

<shader-doodle>

What is <shader-doodle>?

Overview

Use Cases

Best For

Related Projects

Found a gem we're missing?

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions