Region Opacity information not exporting.

Discuss issues pertaining to the Creature Animation Editor here.
chong
Posts: 1178
Joined: Thu Feb 19, 2015 2:21 am

Re: Region Opacity information not exporting.

Post by chong » Wed Aug 24, 2016 7:30 am

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

braben
Posts: 2
Joined: Wed Dec 14, 2016 3:15 pm

Re: Region Opacity information not exporting.

Post by braben » Wed Dec 14, 2016 3:47 pm

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):

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;',
         '}'
     ];
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.

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;',
         '}'
     ];
Then I bind it:

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];
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:

Code: Select all

    gl.bindBuffer(gl.ARRAY_BUFFER, this._colorBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, this.colors, gl.STATIC_DRAW);
At first I thought they needed _renderWebGL counterparts and wrote additions like this:

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);
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.

chong
Posts: 1178
Joined: Thu Feb 19, 2015 2:21 am

Re: Region Opacity information not exporting.

Post by chong » Wed Dec 14, 2016 4:39 pm

Hello,

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 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:

Code: Select all

this.colors = new PIXI.Float32Array(target_creature.total_num_pts * 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

braben
Posts: 2
Joined: Wed Dec 14, 2016 3:15 pm

Re: Region Opacity information not exporting.

Post by braben » Thu Dec 15, 2016 8:55 am

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:

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;
		}
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.

chong
Posts: 1178
Joined: Thu Feb 19, 2015 2:21 am

Re: Region Opacity information not exporting.

Post by chong » Thu Dec 15, 2016 4:44 pm

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

Post Reply