Skip to content

Add Tint support in WebGL #3709

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Jun 17, 2019
Merged

Add Tint support in WebGL #3709

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
40f18f2
Add Tint support in WebGL
vedhant Apr 25, 2019
430b37b
Reset tint value in _update(), Optimize tint calculation in shader
vedhant May 22, 2019
a9eaf22
Merge branch 'master' into webgl_tint
vedhant May 22, 2019
f494b83
Add defualt tint value
vedhant Jun 5, 2019
79639c8
Merge branch 'master' into webgl_tint
vedhant Jun 5, 2019
754d4d7
Add unit tests for tint in WEBGL mode
vedhant Jun 5, 2019
6121a1d
Add more unit test to tint WEBGL mode
vedhant Jun 6, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions src/webgl/p5.RendererGL.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -451,6 +451,9 @@ p5.RendererGL.prototype._update = function() {
this.pointLightColors.length = 0;

this._enableLighting = false;

//reset tint value for new frame
this._tint = [255, 255, 255, 255];
};

/**
Expand Down Expand Up @@ -1083,6 +1086,10 @@ p5.RendererGL.prototype._setFillUniforms = function(fillShader) {
if (this._tex) {
fillShader.setUniform('uSampler', this._tex);
}
if (this._tint) {
fillShader.setUniform('uTint', this._tint);
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This causes this example sketch to break:

let img;
function preload() {
  img = loadImage('../webgl/assets/UV_Grid_Sm.jpg');
}
function setup() {
  createCanvas(400, 200, WEBGL);
  image(img, 0, 0, 100, 100);
  tint(0, 153, 204); // Tint blue
  image(img, 100, 0, 100, 100);
}

The uTint uniform in the shader will have a value of vec4(0, 0, 0, 0) when drawing the first image. There are a number of different solutions that will work. You can initialize _tint with a value in RendererGL or add an else to this conditional that send a default value when _tint is null.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i would recommend using a default value instead of a conditional.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have added default value for tint and a couple of unit tests. I wanted to add a unit test for testing whether _tint is reset after draw() loop. How can do that?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you need to use a Promise that tests _tint on the second pass through draw before calling resolve or reject. There may be better examples elsewhere but one place to look is the structure.js tests.


fillShader.setUniform('uSpecular', this._useSpecularMaterial);
fillShader.setUniform('uShininess', this._useShininess);

Expand Down
8 changes: 4 additions & 4 deletions src/webgl/shaders/light_texture.frag
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
precision mediump float;

uniform vec4 uMaterialColor;
uniform vec4 uTint;
uniform sampler2D uSampler;
uniform bool isTexture;
uniform bool uUseLighting;
Expand All @@ -9,9 +10,8 @@ varying vec3 vLightWeighting;
varying highp vec2 vVertTexCoord;

void main(void) {
// Lets init gl_FragColor just to be safe
gl_FragColor = vec4(1.0,1.0,1.0,1.0);
gl_FragColor = isTexture ? texture2D(uSampler, vVertTexCoord) * (uTint / vec4(255, 255, 255, 255)) : uMaterialColor;

gl_FragColor = isTexture ? texture2D(uSampler, vVertTexCoord) : uMaterialColor;
if (uUseLighting) gl_FragColor.rgb *= vLightWeighting;
if (uUseLighting)
gl_FragColor.rgb *= vLightWeighting;
}