Hello,
As I mentioned in the previous post, Phaser's StripShader.js ( it's own WebGL Internal Renderer for Triangle Meshes ) needs to support varying colours per vertex. Currently right now, their code base seems to have disabled that functionality.
The runtimes already have the alpha information encoded in them, we just need the Phaser API to be updated on their end to support varying colours/opacity per vertex. Once that is fixed, it will be very easy for me to enable alpha/opacity animation for Creature in the Phaser runtimes. If you could ask anybody on the Phaser team to address this issue, it can be resolved.
Cheers
Region Opacity information not exporting.
Re: Region Opacity information not exporting.
Hi there!
I think I managed to wire the vertex color with this changes in StripShader's code (minus indicates what I remove and plus is what is added):
If I'm correct I'm directly passing the vertex color discarding the alpha attribute because this shader seems to deal with it in the fragment part. Then in the fragment I just accept that vColor and multiply the texture sample with it.
Then I bind it:
I see incorrect funky colors where there should be just an alpha effect. Taking a look at creature's part I see it already has the color stuff as you, chong, explained. Here maybe, in _initWebGL:
At first I thought they needed _renderWebGL counterparts and wrote additions like this:
But then I realized it's marked as STATIC_DRAW so I removed back the updaters.
I think I'm assuming incorrectly the format of the color vertex buffer in the shader adaptation attempts. Isn't it a vec4 array?
Thanks in advance.
I think I managed to wire the vertex color with this changes in StripShader's code (minus indicates what I remove and plus is what is added):
Code: Select all
this.vertexSrc = [
'attribute vec2 aVertexPosition;',
'attribute vec2 aTextureCoord;',
+ 'attribute vec4 aColor;',
'uniform mat3 translationMatrix;',
'uniform vec2 projectionVector;',
'uniform vec2 offsetVector;',
// 'uniform float alpha;',
// 'uniform vec3 tint;',
'varying vec2 vTextureCoord;',
- // 'varying vec4 vColor;',
+ 'varying vec4 vColor;',
'void main(void) {',
' vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);',
' v -= offsetVector.xyx;',
' gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);',
' vTextureCoord = aTextureCoord;',
- // ' vColor = aColor * vec4(tint * alpha, alpha);',
+ ' vColor = aColor;',
'}'
];
Code: Select all
this.fragmentSrc = [
'precision mediump float;',
'varying vec2 vTextureCoord;',
- // 'varying float vColor;',
+ 'varying vec4 vColor;',
'uniform float alpha;',
'uniform sampler2D uSampler;',
'void main(void) {',
- ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * alpha;',
+ ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * vColor * alpha;',
// ' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);',//gl_FragColor * alpha;',
'}'
];
Code: Select all
PIXI.StripShader.prototype.init = function()
// get and store the attributes
this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition');
this.aTextureCoord = gl.getAttribLocation(program, 'aTextureCoord');
+ this.colorAttribute = gl.getAttribLocation(program, 'aColor');
- this.attributes = [this.aVertexPosition, this.aTextureCoord];
+ this.attributes = [this.aVertexPosition, this.aTextureCoord, this.colorAttribute];
Code: Select all
gl.bindBuffer(gl.ARRAY_BUFFER, this._colorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, this.colors, gl.STATIC_DRAW);
Code: Select all
gl.vertexAttribPointer(shader.aTextureCoord, 2, gl.FLOAT, false, 0, 0);
+
+ // Update the vertex colors
+ gl.bindBuffer(gl.ARRAY_BUFFER, this._colorBuffer);
+ gl.bufferData(gl.ARRAY_BUFFER, this.colors, gl.STATIC_DRAW);
+ gl.vertexAttribPointer(shader.aColor, 4, gl.FLOAT, false, 0, 0);
I think I'm assuming incorrectly the format of the color vertex buffer in the shader adaptation attempts. Isn't it a vec4 array?
Thanks in advance.
Re: Region Opacity information not exporting.
Hello,
So if you look at what my code is doing in UpdateRenderData:
You notice that all it does is update the this.colors array to a single float value ( from 0 to 1.0, please check this ) for each vertex.
You should take the this.colors value and then multiply it with each vertex color to get the alpha type effect.
this.colors is flat array sized by num_vertices * 4:
How about you comment out all the this.colors updating code and just submit a basic this.colors array ( sized by num_vertices * 4 ) all filled with 1.0 values into the shader and see what you get?
You should get the original texture without any fading. Get that working first; once that is running it will be easy to wire in the rest of the fading/opacity animation.
Cheers
So if you look at what my code is doing in UpdateRenderData:
Code: Select all
// Update colour/opacity region values
var render_composition =
target_creature.render_composition;
var regions_map =
render_composition.getRegionsMap();
for(region_name in regions_map)
{
var cur_region = regions_map[region_name];
var start_pt_idx = cur_region.getStartPtIndex();
var end_pt_idx = cur_region.getEndPtIndex();
var cur_opacity = cur_region.opacity * 0.01;
for(var i = (start_pt_idx * 3); i <= (end_pt_idx * 3); i++)
{
this.colors[i] = cur_opacity;
}
...
You should take the this.colors value and then multiply it with each vertex color to get the alpha type effect.
this.colors is flat array sized by num_vertices * 4:
Code: Select all
this.colors = new PIXI.Float32Array(target_creature.total_num_pts * 4);
You should get the original texture without any fading. Get that working first; once that is running it will be easy to wire in the rest of the fading/opacity animation.
Cheers
Re: Region Opacity information not exporting.
Hello. Thanks to your invaluable help I got it.
First of all, the Creature that Phaser includes as of 2.6.2 lacks the color update. I added your code to Phaser's Creature version. I did the everything-white test and worked beautifully. Then I tried to pass another value to see if shader was working properly and it did! Thanks for this suggestion.
Then I tried to connect the opacity and there I had to do some bigger work. Phaser's creature code didn't ever set up opacity attribute for the regions so it was always undefined and the resulting color NaN. So I grabbed your latest code, replaced it in Phaser. Now I got opacity in the regions.
There are, on the other hand, some changes I had to make for my version to work flawlessly. The color update calculation has to be like this for my case:
cur_region.opacity is sometimes undefined so I coerce it to zero to avoid NaN as cur_opacity. Also I have to multiply the indexes by 4 and not 3 matching the color buffer structure.
As soon as I have time I will try to bring the subject to the Phaser team. I guess in a worst case scenario the shader can be duplicated, leaving StripShader untouched and having a StripShaderCreature or something.
Thank you very much for your time and speed.
First of all, the Creature that Phaser includes as of 2.6.2 lacks the color update. I added your code to Phaser's Creature version. I did the everything-white test and worked beautifully. Then I tried to pass another value to see if shader was working properly and it did! Thanks for this suggestion.
Then I tried to connect the opacity and there I had to do some bigger work. Phaser's creature code didn't ever set up opacity attribute for the regions so it was always undefined and the resulting color NaN. So I grabbed your latest code, replaced it in Phaser. Now I got opacity in the regions.
There are, on the other hand, some changes I had to make for my version to work flawlessly. The color update calculation has to be like this for my case:
Code: Select all
var cur_opacity = (cur_region.opacity || 0) * 0.01;
for(var i = (start_pt_idx * 4); i <= (end_pt_idx * 4); i++)
{
this.colors[i] = cur_opacity;
}
As soon as I have time I will try to bring the subject to the Phaser team. I guess in a worst case scenario the shader can be duplicated, leaving StripShader untouched and having a StripShaderCreature or something.
Thank you very much for your time and speed.
Re: Region Opacity information not exporting.
Awesome news! Thank you very much for the work and explanation on your part! If your fixes could be integrated into Phaser that will be fantastic Great work!
Cheers
Cheers