Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Introduces WebGL shaders.
Shaders can be assigned to any node using the
shaders
property.See
PossibleShaderConfig
for all accepted values.In the simplest case, you can just pass a string containing the fragment shader.
The general concept follows the
globalCompositeOperation
from 2D Canvas API.The shader gets access to two textures:
With that in mind, the simplest shader that does nothing would look as follows:
#include
is a directive for our custom pre-processor. It resolves the specified module using the same rules as javascript and includes its content in the file.We generate all the necessary source maps so that the errors correctly link back to the original files:
So the following directive:
...includes the common uniforms and inputs used in a fragment shader.
This is what they look like right now:
With that in mind, the example from before should now be clear:
out_color = texture(core_source_tx, source_uv);
We use the source uv to sample the source texture and output the resulting color.
The effect is the same as if we render the node without any shader.
Somewhat of the opposite would be doing this:
out_color = texture(core_destination_tx, destination_uv);
Here we sample the destination texture and return that.
As a result, nothing changes on our screen, we just take what's already there and output it back.
It becomes a bit more interesting when we manipulate the uv coordinates and/or color: