Thanks for this @jamieowen - I will have to do more studying of the different GLSL ES refs, specifically the WebGL2 texture functions. TBH I don't think I've ever used textures in a vertex shader, so would explain the oversight... will report back ASAP!

Just wanted to briefly follow up re: your Q about symbol naming... You can assign a custom name via this function signature, e.g.

// sym(type, name, opts, initval)
sym("vec2", "foo", {}, vec2(1))

import { targetGLSL } from "@thi.ng/shader-ast-glsl";

targetGLSL()(decl(sym("vec2", "foo", {}, vec2(1))))
// 'vec2 foo = vec2(1.0)'

What's your use case for that? Human legible output / debugging of the generated GLSL?

Ahh.. cheers! I had overlooked that, makes sense it needs an init value.

Yes use case is mainly for debugging, especially on larger chunks of glsl.
Although i do like a good variable name!

Also, I had converted these photoshop blending modes a few years ago :
https://github.com/jamieowen/glsl-blend

They work with glslify, but i've been meaning to update them to include an es6 template string version as well.

I was potentially going to convert to typescript/shader-ast and then generate the source from there. may be with glsl 1 + 3 versions.

Cool. I also hope you're aware that there're already are all 12 Porter-Duff blend operators available in the shader-ast-stdlib package here (i know they're not all the same as PS modes, but some are):

• Shader AST version
• JS version

Cheers.

That's good to know!

So I just did some more digging through the WebGL2 / GLSL ES 3.0 docs and think your PR is good to go (I might finally add some of those other missing texture fns too)! Thank you!!! :)

When I get around to converting the photoshop ones . I could add to thi.ng/shader-ast-stdlib if you like.

That is if you think they are relevant. Not sure how streamlined you would want to keep it.

Definitely appreciate this kind of modular approach though. It's been a refreshing learning curve!

The only thing similar to this for webgl has been stack.gl, but the micro module/git repo approach was pretty mental.

Grand stuff! ( For texture stuff )

Since all of these functions are easily tree-shakeable I'm not worried about the overall size for this package. So thank you for considering adding to it! 👍

Re: learning curve - I'm glad to hear it... The Twitter conversations these past few days seem to argue the opposite... but am always keen to hear to how we could make things easier to grasp!

@jamieowen one more small thing to ask (for the future): Can you please use the Conventional Commits format for your commit messages? This is quite important for a project of this scale and used to auto-generate changelogs & visualization purposes (e.g. the timelines on the thi.ng website). Thank you! :)

Yes no problem.. Apologies for not checking first!

No worries & also just wanted to let you know that your changes are now published:

https://github.com/thi-ng/umbrella/blob/develop/packages/shader-ast/CHANGELOG.md

(ps. if you had used conventional commits, your commits would have been listed in this file now too... 😸 just sayin').

Haha.. I am actually quite disappointed!

This will be a tough stain to remove from my quite limited open source contributions!

Well, let's hope you're just getting started... keeping an eye out for that blendmode PR soon :) Happy to advise if you get stuck w/ shader-ast. After my relocation (likely in the next few months), I also want to start tackling the WGSL code target (WebGPU)... and there's a WASM target waiting too

Thanks, I will get on it ASAP, will let you know if I have any problems.

Looking forward to the Web GPU target!

Hey @postspectacular.

Not sure best place to post this but...

Managed to get a version going with the photoshop blend modes.. all composable and with vec3 or vec4 options.

All implementations are defined with one liners as either a vec 3/4 or float input/output:

export const blendAverageVec: BlendModeVec<"vec3" | "vec4"> = (base, blend) =>
  div(add(base, blend), float(2.0));

export const blendColorBurnFloat: BlendModeFloat = (base, blend) =>
  ternary(
    lte(blend, float(0.0)),
    blend,
    max(sub(float(1.0), div(sub(float(1.0), base), blend)), float(0.0))
  );

The float versions are converted to vec3 / vec4 versions :

export const blendFloatToVec3 = (
  blendFloat: BlendModeFloat
): BlendModeVec<"vec3"> => (base, blend) =>
  vec3(
    blendFloat($x(base), $x(blend)),
    blendFloat($y(base), $y(blend)),
    blendFloat($z(base), $z(blend))
  );

export const blendFloatToVec4 = (
  blendFloat: BlendModeFloat
): BlendModeVec<"vec4"> => (base, blend) =>
  vec4(
    blendFloat($x(base), $x(blend)),
    blendFloat($y(base), $y(blend)),
    blendFloat($z(base), $z(blend)),
    blendFloat($w(base), $w(blend))
  );

Then they are wrapped using the following to define the function and apply the opacity base/blend shenanigans..

export const blendLayerOpacity = (
  blendFn: BlendModeVec<"vec3" | "vec4">,
  base: Term<"vec3" | "vec4">,
  blend: Term<"vec3" | "vec4">,
  opacity: Term<"float">
) =>
  add(mul(blendFn(base, blend), opacity), mul(base, sub(float(1.0), opacity)));

export const defBlendFn3 = (blendFn: BlendModeVec<"vec3">, fnName: string) =>
  defn("vec3", fnName, ["vec3", "vec3", "float"], (base, blend, opacity) => [
    ret(blendLayerOpacity(blendFn, base, blend, opacity)),
  ]);

export const defBlendFn4 = (blendFn: BlendModeVec<"vec4">, fnName: string) =>
  defn("vec4", fnName, ["vec4", "vec4", "float"], (base, blend, opacity) => [
    ret(blendLayerOpacity(blendFn, base, blend, opacity)),
  ]);

Super pleased with the results. Makes defining new blend functions really easy.
Really enjoying this way of composing glsl!

Not sure if you have any other suggestions for handling vec3/vec4 options.
Or may be the typescript definitions..

Preview:
http://jamieowen.github.io/glsl-blend/shader-ast.html
And code:
https://github.com/jamieowen/glsl-blend/tree/v2/src

I've got a handful more to go.. but will have to look at them soon.

This is awesome! I've forked your repo and will send you PR w/ some further possible suggestions/simplifications - but much impressed to see how you picked this up! 🙇

Great stuff. Glad you like it!
Yeah it's a little confusing to begin with but once I got the Term/Sym distinction it all fits into place.

I think the trickiest thing is getting typescript types right..