muerwre.github.io/docs/api/_content/query/cft4lrDUKB.json

{"_path":"/frontend/webgl/fragment-shaders","_dir":"webgl","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Fragment Shaders","description":"Fragment shaders describe how polygons are painted (or textured). Read Basics of WebGL (Drawing a Cube) first.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Fragment shaders describe "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"how polygons are painted"}]},{"type":"text","value":" (or textured). Read "},{"type":"element","tag":"a","props":{"href":"Basics%20of%20WebGL%20(Drawing%20a%20Cube)"},"children":[{"type":"text","value":"Basics of WebGL (Drawing a Cube)"}]},{"type":"text","value":" first."}]},{"type":"element","tag":"h2","props":{"id":"sample-fragment-vertex"},"children":[{"type":"text","value":"Sample fragment vertex"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Parameters could be passed here as written at "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"precision highp float;\n\n// parameter from Vertex Shader\nvarying vec4 v_positionWithOffset;\n// parameters passed from Javascript loop\nuniform float slide;\nuniform float aspect;\n\nvoid main(void){\n  // color, attached to current verticle {r,g,b,alpha}\n  // same a[\n  //   v_positionWithOffset.x,\n  //   v_positionWithOffset.y, \n  //   v_positionWithOffset.z, \n  //   1\n  //  ]\n  gl_FragColor=vec4(v_positionWithOffset.xyz,1);\n}```\n","language":"c"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"precision highp float;\n\n// parameter from Vertex Shader\nvarying vec4 v_positionWithOffset;\n// parameters passed from Javascript loop\nuniform float slide;\nuniform float aspect;\n\nvoid main(void){\n  // color, attached to current verticle {r,g,b,alpha}\n  // same a[\n  //   v_positionWithOffset.x,\n  //   v_positionWithOffset.y, \n  //   v_positionWithOffset.z, \n  //   1\n  //  ]\n  gl_FragColor=vec4(v_positionWithOffset.xyz,1);\n}```\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Fragment shaders describe "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"how polygons are painted"}]},{"type":"text","value":" (or textured). Read "},{"type":"element","tag":"a","props":{"href":"Basics%20of%20WebGL%20(Drawing%20a%20Cube)"},"children":[{"type":"text","value":"Basics of WebGL (Drawing a Cube)"}]},{"type":"text","value":" first."}]},{"type":"element","tag":"h2","props":{"id":"sample-fragment-vertex"},"children":[{"type":"text","value":"Sample fragment vertex"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Parameters could be passed here as written at "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"precision highp float;\n\n// parameter from Vertex Shader\nvarying vec4 v_positionWithOffset;\n// parameters passed from Javascript loop\nuniform float slide;\nuniform float aspect;\n\nvoid main(void){\n  // color, attached to current verticle {r,g,b,alpha}\n  // same a[\n  //   v_positionWithOffset.x,\n  //   v_positionWithOffset.y, \n  //   v_positionWithOffset.z, \n  //   1\n  //  ]\n  gl_FragColor=vec4(v_positionWithOffset.xyz,1);\n}```\n","language":"c"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-105dc1"},"children":[{"type":"text","value":"precision highp "}]},{"type":"element","tag":"span","props":{"class":"ct-ec5302"},"children":[{"type":"text","value":"float"}]},{"type":"element","tag":"span","props":{"class":"ct-105dc1"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58804f"},"children":[{"type":"text","value":"// parameter from Vertex Shader"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-105dc1"},"children":[{"type":"text","value":"varying vec4 v_positionWithOffset;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58804f"},"children":[{"type":"text","value":"// parameters passed from Javascript loop"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-105dc1"},"children":[{"type":"text","value":"uniform "}]},{"type":"element","tag":"span","props":{"class":"ct-ec5302"},"children":[{"type":"text","value":"float"}]},{"type":"element","tag":"span","props":{"class":"ct-105dc1"},"children":[{"type":"text","value":" slide;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-105dc1"},"children":[{"type":"text","value":"uniform "}]},{"type":"element","tag":"span","props":{"class":"ct-ec5302"},"children":[{"type":"text","value":"float"}]},{"type":"element","tag":"span","props":{"class":"ct-105dc1"},"children":[{"type":"text","value":" aspect;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec5302"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-105dc1"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-be424e"},"children":[{"type":"text","value":"main"}]},{"type":"element","tag":"span","props":{"class":"ct-105dc1"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ec5302"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-105dc1"},"children":[{"type":"text","value":"){"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-105dc1"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-58804f"},"children":[{"type":"text","value":"// color, attached to current verticle {r,g,b,alpha}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-105dc1"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-58804f"},"children":[{"type":"text","value":"// same a["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-105dc1"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-58804f"},"children":[{"type":"text","value":"//   v_positionWithOffset.x,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-105dc1"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-58804f"},"children":[{"type":"text","value":"//   v_positionWithOffset.y, "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-105dc1"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-58804f"},"children":[{"type":"text","value":"//   v_positionWithOffset.z, "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-105dc1"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-58804f"},"children":[{"type":"text","value":"//   1"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-105dc1"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-58804f"},"children":[{"type":"text","value":"//  ]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-105dc1"},"children":[{"type":"text","value":"  gl_FragColor"}]},{"type":"element","tag":"span","props":{"class":"ct-feaed4"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-be424e"},"children":[{"type":"text","value":"vec4"}]},{"type":"element","tag":"span","props":{"class":"ct-105dc1"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-11ed44"},"children":[{"type":"text","value":"v_positionWithOffset"}]},{"type":"element","tag":"span","props":{"class":"ct-105dc1"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-11ed44"},"children":[{"type":"text","value":"xyz"}]},{"type":"element","tag":"span","props":{"class":"ct-105dc1"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-a2a51a"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-105dc1"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-105dc1"},"children":[{"type":"text","value":"}```"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-a2a51a{color:#79C0FF}.ct-11ed44{color:#C9D1D9}.ct-feaed4{color:#FF7B72}.ct-be424e{color:#D2A8FF}.ct-58804f{color:#8B949E}.ct-ec5302{color:#FF7B72}.ct-105dc1{color:#C9D1D9}.light .ct-105dc1{color:#657B83}.light .ct-ec5302{color:#073642}.light .ct-58804f{color:#93A1A1}.light .ct-be424e{color:#268BD2}.light .ct-feaed4{color:#859900}.light .ct-11ed44{color:#268BD2}.light .ct-a2a51a{color:#D33682}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"sample-fragment-vertex","depth":2,"text":"Sample fragment vertex"}]}},"_type":"markdown","_id":"content:Frontend:WebGL:Fragment Shaders.md","_source":"content","_file":"Frontend/WebGL/Fragment Shaders.md","_extension":"md"}