Jump to content

problems in mesh and shader


Recommended Posts

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;
let app new PIXIApplicationwidth, height;
// 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);
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
Edited by cyh
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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


Link to comment
Share on other sites

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]

Link to comment
Share on other sites

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 by cyh
Link to comment
Share on other sites

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


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 by ivan.popelyshev
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...