halvves / shader-doodle Goto Github PK

Describe the bug
When the window gets resized, buffers end up as empty textures.

To Reproduce
Steps to reproduce the behavior:

1. visit http://cdpn.io/e/GRMBaYR
2. resize the window
3. see that game of life state end up empty

Expected behavior
I am somewhat unsure since the textures size is changing, but at the very least we shouldn't completely lose previous data.

Desktop (please complete the following information):

• OS: any/all
• Browser any/all
• Version v1.0.0-alpha.20

Smartphone (please complete the following information):

• Device: any/all
• OS: any/all
• Browser any/all
• Version v1.0.0-alpha.20

Is it possible to use YouTube iframe embed video, or HTML5 <video> tag as texture? I tried with no success until now, maybe I'm missing something... Thanks!

Describe the bug
sd-texture with an external image url as a source and force-update attribute produces a WebGL INVALID_VALUE error.

To Reproduce
Steps to reproduce the behavior:

1. Use an external url for the src attribute of an sd-texture element.
2. Add a force-update attribute to the element.
3. Clear the browser's cache and use network throttling to be sure the image loads after the component was instantiated.
4. When the image is loaded, it doesn't set as a texture, a WebGL: INVALID_VALUE: texImage2D: no canvas error in the console.

Expected behavior
An image is set a as texture when loaded, no WebGL errors in the console.

Screenshots
http://s.csssr.ru/UGLC8598A/20200613114101.png

Additional context
A pen to reproduce the bug: https://codepen.io/peregrimm/pen/RwrRPKO?editors=1000

While I love the simplicity of the current api, it runs into issues with certain formats of code.

If someone writes something like if (a<c), the usage of either innerHTML or textContent breaks down. There is no way (that I know of) to prevent the <c being parsed as a new node.

I have a few potential solutions...

The traditional <script type="x-shader/x-fragment" />:

<script id="my-shader" type="x-shader/x-fragment">
  ...SHADERCODE
</script>
<shader-doodle src="#my-shader"></shader-doodle>

This solution would create two attributes: raw and src. src could receive a url or an id selector, and raw would take a plain string (primarily for usage in js/react/vue).

A custom script tag <script is="shader-doodle-main" />:

<shader-doodle>
  <script is="shader-doodle-main">
    ...SHADERCODE
  </script>
</shader-doodle>

This would open up shader-doodle for more modular components for adding additional passes/uniforms/etc...
you could add more processing/channels like

<shader-doodle>
  <script is="shader-doodle-main">
    ...SHADERCODE
  </script>
  <script is="shader-doodle-pass" order="0">
    ...MORE
  </script>
  <script is="shader-doodle-pass" order="1">
    ...MORE
  </script>
  <shader-doodle-uniform val="..." type="..." name="..."></shader-doodle-uniform>
  <shader-doodle-texture src="..." type="..." name="..."></shader-doodle-texture>
</shader-doodle>

Or something along that line.

I would love to get opinions/thoughts.

Hey! I had a similar idea awhile back, but I didn't follow through with anything after making it. I dig that you're tying into Shader Toy. You list next steps as webcam support. That's like the main thing mine supports. I also created a simple tooling task to turn glsl files into ES6 modules.

Anyway I wouldn't mind seeing something come out of my efforts, and you're doing something so similar...

Here's mine: https://github.com/creativecode-webcomponents/ccwc-video

If you want to do it all yourself, I completely understand - but I could see if it's easy to port my code if you're interested (or the other way around, whatever).