problems in mesh and shader

[cyh]

i am creating a mesh using geometry and shader

in vertex Shader,i transformed the point by multiply projectionMatrix * translationMatrix,which i suppose should be set by PIXI itself,but when i doing the same thing in fragement shader,problems occures, i cannot tranform the point to where i want.

here is the code,thank you very much

let width windowinnerWidth;
let height windowinnerHeight;
consolelogheight,width;
let app new PIXIApplicationwidth, height;
documentbodyappendChildappview;
// shaders
const PIXI_SVG_PROGRAM PIXIProgramfrom`
  precision mediump float;
  attribute vec2 aVertexPosition;
  
  uniform mat3 translationMatrix;
  uniform mat3 projectionMatrix;
  uniform vec2 pPoint;
  
  void main() {
      gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);
  }`,
    `
    precision mediump float;

     
    uniform mat3 translationMatrix;
    uniform mat3 projectionMatrix;
  
    uniform vec2 a_point1;
    uniform vec2 a_point2;
    uniform vec2 center;
    
 
    const int pNum = 128;
    uniform float controlPointsArray[pNum];
    uniform vec4 controlPointsColors[pNum];
 
    void main() {
        vec2 tCenter = vec2((projectionMatrix * translationMatrix * vec3(center, 1.0)).xy);
        
        //distance to center
        float r = 0.0;        
        //Long axis and short axis length ,they are relative now
        float l1 = distance(a_point1, vec2(0.0,0.0));
        float l2 = distance(a_point2, vec2(0.0,0.0));
        
        //long axis's angle
        float mainAngle = atan(a_point1.y, a_point1.x);
        
        //point's corresponding angle
        float currentAngle = atan(gl_FragCoord.y-tCenter.y, gl_FragCoord.x - tCenter.x);
        
        //standard angle(long axis is horizontal)
        float stdAngle = currentAngle - mainAngle;
        
        //the length between point on ellipse and center
        float dist = sqrt((1.0 + pow(tan(stdAngle),2.0)) * pow(l1,2.0) *pow(l2,2.0)/(pow(l2,2.0) + pow(l1,2.0) * pow(tan(stdAngle),2.0)));
        r = distance(gl_FragCoord.xy,tCenter) / dist;        

        vec4 color = mix(controlPointsColors[pNum-2], controlPointsColors[pNum-1], smoothstep(controlPointsArray[pNum-2], controlPointsArray[pNum-1], r));
        for(int i = pNum-2;i >= 0;i--){
            color = mix(controlPointsColors[i],color,smoothstep(controlPointsArray[i], controlPointsArray[i+1], r));
        }
        gl_FragColor = vec4(color);
    }
`
const shader new PIXIShaderPIXI_SVG_PROGRAMlet v 300

let data 0,0, ,0, ,, 0,let result 0,1,2,0,2,3const geometry new PIXIGeometrygeometryaddAttribute'aVertexPosition', data , 2geometryaddIndexresultconsolelogshaderconsoleloggeometryconst combinedShapeMesh new PIXIMeshgeometry, shaderlet container new PIXIContainer;
// combinedShapeMesh.setTransform(0,0,0,0,6.2);
combinedShapeMeshsetTransform0,0,0,0,0;
containeraddChildcombinedShapeMeshappstageaddChildcontainer;
combinedShapeMeshshaderuniformscenter 100400,600300 400300;
// combinedShapeMesh.shader.uniforms.center = [100,400];
combinedShapeMeshshaderuniformsa_point1 0, 50;
combinedShapeMeshshaderuniformsa_point2 50, 0;
combinedShapeMeshshaderuniformscontrolPointsArray 0.0,1.0;
combinedShapeMeshshaderuniformscontrolPointsColors 0.9019607843137255, 0.13333333333333333, 0.13333333333333333, 1, 0.050980392156862744, 0.9411764705882353, 0.2784313725490196, 1
;
// Animate the filter
apptickeraddfunction;

Edited July 14, 2020 by cyh

[cyh]

i find a weild way to partly solve this problem by 

 [100*400,-(600*300 - 400*300)];

but i am very confuse why it will works beacause center and geometry points both multiply the same matrix, 

and in spacial scenario like rotate,it still will not work

please help me,THX!

[cyh]

10 minutes ago, cyh said:

i am creating a mesh using geometry and shader with pixi v5

 

[ivan.popelyshev]

I cant understand what did you want to do there.

gl_Fragcolor is pixel coord of current pixel. The problem is that you cant use it in pixi shaders because projection might be reversed. Also, projection*translation * point  gives you viewport coords (-1,-1) - (1,1) where point is LOCAL coords in mesh. yes , you dont have a transform on it.

I changed approach - i calcaulte world position =translation * local , save it, calculate viewport pos and give it to webgl. Then in frag shader i operate that world position. "center" now is in global pixel coords

https://jsfiddle.net/Hackerham/sc1kmqxt/6/

[cyh]

thank you very much for replying and i am sorry for didn't explain it well.and due to some reason, i cant open jsfiddle.net to see the example you offered(but jsbin is ok……)

i want to use pixi.mesh to implement a radial gradient like photoshop or sketch, which can be controlled by center point and another two points.

in vertex shader, i transformed rectangle from local coords to viewport coords by multiply projectionMatrix * translationMatrix, and i remember vertex shader and fragment shader share the uniforms if they share the same name. in order to get viewport coords, i do the same thing to control point (center and two another) in fragment shader ,but failed

my height and width is 800 and 600, so i used some tricks [100*400,-(600*300 - 400*300)] to achieve the same effect, but actually i want center point to be (100,400),because the rectangle coords is[0,0,   600,0,   600,600,   0,600]

[cyh]

the real thing i wanna do is  changing the color of every pixel within the circle by the distance between itself and center, THX

actually what i am finding is a way to measure the distance between fragments and the center point ,but i cant transform them into the same coord system

Edited July 14, 2020 by cyh

[cyh]

here is the code https://jsbin.com/gimulid/2/edit?html,output

[ivan.popelyshev]

Here you go: https://www.pixiplayground.com/#/edit

 

[cyh]

thank you very much

here it is https://www.pixiplayground.com/#/edit/3s-IQ3i-gizAoc5nMonKy

if i want it to be the center of rectangle, is there some solution?use (300,300) rather than something else, thx

Edited July 14, 2020 by cyh

[ivan.popelyshev]

Oh , sorry, I gave wrong link  playground doesnt like UTF characters

https://www.pixiplayground.com/#/edit/Ql9uafhDGLiqT2lx7xvG0

Thats what was in my jsfiddle. Hope it helps. That's the code i made less than in hour after your first post. I'm sorry it took two days

Edited July 14, 2020 by ivan.popelyshev

[cyh]

aha!?, it solved my problems perfectly, thank you very much !  ORZ

 

[cyh]

thank you for helping me a lot & hope to make some contribute to PIXI someday!?