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

{"_path":"/frontend/webgl/vertex-shaders","_dir":"webgl","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Vertex Shaders","description":"Read Basics of WebGL (Drawing a Cube) first.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"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":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":" define vertice positions in 3D-space. That's just a function, that defines "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"gl_Position"}]},{"type":"text","value":" value by applying different transformations to it."}]},{"type":"element","tag":"h2","props":{"id":"sample-code"},"children":[{"type":"text","value":"Sample code"}]},{"type":"element","tag":"code","props":{"code":"// current vertice position {x,y,z,w}\nattribute vec4 aVertexPosition;\n// final vertice position with all transformations applied,\n// that will be passed to Fragment Shader\nvarying vec4 v_positionWithOffset;\n// Parameters passed from Javascript loop\nuniform float slide;\nuniform float aspect;\n\nvoid main(){\n  // float array of 4 elements, same as [slide,slide,slide,1]\n  vec4 scale=vec4(vec3(slide),1);\n  // float array of 4 elements, same as [aspect,1,1,1]\n  vec4 aspectRatioFix=vec4(aspect,vec3(1));\n  // vertice position, multiplied with matrices of scale and aspect ratio\n  gl_Position=aVertexPosition*scale*aspectRatioFix,\n  // vertice offset, that will be passed to fragment shader\n  v_positionWithOffset=gl_Position+vec4(1,1,1,1);\n}\n","language":"c"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// current vertice position {x,y,z,w}\nattribute vec4 aVertexPosition;\n// final vertice position with all transformations applied,\n// that will be passed to Fragment Shader\nvarying vec4 v_positionWithOffset;\n// Parameters passed from Javascript loop\nuniform float slide;\nuniform float aspect;\n\nvoid main(){\n  // float array of 4 elements, same as [slide,slide,slide,1]\n  vec4 scale=vec4(vec3(slide),1);\n  // float array of 4 elements, same as [aspect,1,1,1]\n  vec4 aspectRatioFix=vec4(aspect,vec3(1));\n  // vertice position, multiplied with matrices of scale and aspect ratio\n  gl_Position=aVertexPosition*scale*aspectRatioFix,\n  // vertice offset, that will be passed to fragment shader\n  v_positionWithOffset=gl_Position+vec4(1,1,1,1);\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"passing-parameters-to-vertexshader"},"children":[{"type":"text","value":"Passing parameters to VertexShader"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Search for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Uniforms"}]},{"type":"text","value":" "},{"type":"element","tag":"a","props":{"href":"https://open.gl/drawing","rel":["nofollow"]},"children":[{"type":"text","value":"at open.gl"}]},{"type":"text","value":" for further reading."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There're 3 ways to pass parameters."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"attribute"}]},{"type":"text","value":" are parameters, that won't change. Good for vertex buffers."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"uniform"}]},{"type":"text","value":" are meant to change over the time. Good for passing transformations."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"varying"}]},{"type":"text","value":" are parameters, that's shared between Vertex and "},{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"h2","props":{"id":"applying-transformations"},"children":[{"type":"text","value":"Applying transformations"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Every vertice position is defined as "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"{x,y,z,w}"}]},{"type":"text","value":", where "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"w"}]},{"type":"text","value":" is a common denominator, that's used to achieve fast coord transformations by multiplying number of square matrices with original vertice coordinates."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"We don't change vertice position buffer"}]},{"type":"text","value":", because it's slow when being run inside Javascript loop, we "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"pass transformation matrices"}]},{"type":"text","value":" instead and "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"multiply vertice positions with transformation matrices"}]},{"type":"text","value":" inside a Graphic Card's GPU, because that's what GPU made for."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Good explanation can be found here: "},{"type":"element","tag":"a","props":{"href":"https://open.gl/transformations","rel":["nofollow"]},"children":[{"type":"text","value":"open.gl"}]},{"type":"text","value":"."}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"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":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":" define vertice positions in 3D-space. That's just a function, that defines "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"gl_Position"}]},{"type":"text","value":" value by applying different transformations to it."}]},{"type":"element","tag":"h2","props":{"id":"sample-code"},"children":[{"type":"text","value":"Sample code"}]},{"type":"element","tag":"code","props":{"code":"// current vertice position {x,y,z,w}\nattribute vec4 aVertexPosition;\n// final vertice position with all transformations applied,\n// that will be passed to Fragment Shader\nvarying vec4 v_positionWithOffset;\n// Parameters passed from Javascript loop\nuniform float slide;\nuniform float aspect;\n\nvoid main(){\n  // float array of 4 elements, same as [slide,slide,slide,1]\n  vec4 scale=vec4(vec3(slide),1);\n  // float array of 4 elements, same as [aspect,1,1,1]\n  vec4 aspectRatioFix=vec4(aspect,vec3(1));\n  // vertice position, multiplied with matrices of scale and aspect ratio\n  gl_Position=aVertexPosition*scale*aspectRatioFix,\n  // vertice offset, that will be passed to fragment shader\n  v_positionWithOffset=gl_Position+vec4(1,1,1,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-54f2af"},"children":[{"type":"text","value":"// current vertice position {x,y,z,w}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-4be6d4"},"children":[{"type":"text","value":"attribute vec4 aVertexPosition;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-54f2af"},"children":[{"type":"text","value":"// final vertice position with all transformations applied,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-54f2af"},"children":[{"type":"text","value":"// that will be passed to Fragment Shader"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-4be6d4"},"children":[{"type":"text","value":"varying vec4 v_positionWithOffset;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-54f2af"},"children":[{"type":"text","value":"// Parameters passed from Javascript loop"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-4be6d4"},"children":[{"type":"text","value":"uniform "}]},{"type":"element","tag":"span","props":{"class":"ct-7856d4"},"children":[{"type":"text","value":"float"}]},{"type":"element","tag":"span","props":{"class":"ct-4be6d4"},"children":[{"type":"text","value":" slide;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-4be6d4"},"children":[{"type":"text","value":"uniform "}]},{"type":"element","tag":"span","props":{"class":"ct-7856d4"},"children":[{"type":"text","value":"float"}]},{"type":"element","tag":"span","props":{"class":"ct-4be6d4"},"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-7856d4"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-4be6d4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-870cff"},"children":[{"type":"text","value":"main"}]},{"type":"element","tag":"span","props":{"class":"ct-4be6d4"},"children":[{"type":"text","value":"(){"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-4be6d4"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-54f2af"},"children":[{"type":"text","value":"// float array of 4 elements, same as [slide,slide,slide,1]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-4be6d4"},"children":[{"type":"text","value":"  vec4 scale"}]},{"type":"element","tag":"span","props":{"class":"ct-2336c7"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-870cff"},"children":[{"type":"text","value":"vec4"}]},{"type":"element","tag":"span","props":{"class":"ct-4be6d4"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-870cff"},"children":[{"type":"text","value":"vec3"}]},{"type":"element","tag":"span","props":{"class":"ct-4be6d4"},"children":[{"type":"text","value":"(slide),"}]},{"type":"element","tag":"span","props":{"class":"ct-bb5e76"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-4be6d4"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-4be6d4"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-54f2af"},"children":[{"type":"text","value":"// float array of 4 elements, same as [aspect,1,1,1]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-4be6d4"},"children":[{"type":"text","value":"  vec4 aspectRatioFix"}]},{"type":"element","tag":"span","props":{"class":"ct-2336c7"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-870cff"},"children":[{"type":"text","value":"vec4"}]},{"type":"element","tag":"span","props":{"class":"ct-4be6d4"},"children":[{"type":"text","value":"(aspect,"}]},{"type":"element","tag":"span","props":{"class":"ct-870cff"},"children":[{"type":"text","value":"vec3"}]},{"type":"element","tag":"span","props":{"class":"ct-4be6d4"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-bb5e76"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-4be6d4"},"children":[{"type":"text","value":"));"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-4be6d4"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-54f2af"},"children":[{"type":"text","value":"// vertice position, multiplied with matrices of scale and aspect ratio"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-4be6d4"},"children":[{"type":"text","value":"  gl_Position"}]},{"type":"element","tag":"span","props":{"class":"ct-2336c7"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-4be6d4"},"children":[{"type":"text","value":"aVertexPosition"}]},{"type":"element","tag":"span","props":{"class":"ct-2336c7"},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"class":"ct-4be6d4"},"children":[{"type":"text","value":"scale"}]},{"type":"element","tag":"span","props":{"class":"ct-2336c7"},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"class":"ct-4be6d4"},"children":[{"type":"text","value":"aspectRatioFix,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-4be6d4"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-54f2af"},"children":[{"type":"text","value":"// vertice offset, that will be passed to fragment shader"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-4be6d4"},"children":[{"type":"text","value":"  v_positionWithOffset"}]},{"type":"element","tag":"span","props":{"class":"ct-2336c7"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-4be6d4"},"children":[{"type":"text","value":"gl_Position"}]},{"type":"element","tag":"span","props":{"class":"ct-2336c7"},"children":[{"type":"text","value":"+"}]},{"type":"element","tag":"span","props":{"class":"ct-870cff"},"children":[{"type":"text","value":"vec4"}]},{"type":"element","tag":"span","props":{"class":"ct-4be6d4"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-bb5e76"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-4be6d4"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-bb5e76"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-4be6d4"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-bb5e76"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-4be6d4"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-bb5e76"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-4be6d4"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-4be6d4"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"passing-parameters-to-vertexshader"},"children":[{"type":"text","value":"Passing parameters to VertexShader"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Search for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Uniforms"}]},{"type":"text","value":" "},{"type":"element","tag":"a","props":{"href":"https://open.gl/drawing","rel":["nofollow"]},"children":[{"type":"text","value":"at open.gl"}]},{"type":"text","value":" for further reading."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There're 3 ways to pass parameters."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"attribute"}]},{"type":"text","value":" are parameters, that won't change. Good for vertex buffers."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"uniform"}]},{"type":"text","value":" are meant to change over the time. Good for passing transformations."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"varying"}]},{"type":"text","value":" are parameters, that's shared between Vertex and "},{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"h2","props":{"id":"applying-transformations"},"children":[{"type":"text","value":"Applying transformations"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Every vertice position is defined as "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"{x,y,z,w}"}]},{"type":"text","value":", where "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"w"}]},{"type":"text","value":" is a common denominator, that's used to achieve fast coord transformations by multiplying number of square matrices with original vertice coordinates."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"We don't change vertice position buffer"}]},{"type":"text","value":", because it's slow when being run inside Javascript loop, we "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"pass transformation matrices"}]},{"type":"text","value":" instead and "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"multiply vertice positions with transformation matrices"}]},{"type":"text","value":" inside a Graphic Card's GPU, because that's what GPU made for."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Good explanation can be found here: "},{"type":"element","tag":"a","props":{"href":"https://open.gl/transformations","rel":["nofollow"]},"children":[{"type":"text","value":"open.gl"}]},{"type":"text","value":"."}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-bb5e76{color:#79C0FF}.ct-2336c7{color:#FF7B72}.ct-870cff{color:#D2A8FF}.ct-7856d4{color:#FF7B72}.ct-4be6d4{color:#C9D1D9}.ct-54f2af{color:#8B949E}.light .ct-54f2af{color:#93A1A1}.light .ct-4be6d4{color:#657B83}.light .ct-7856d4{color:#073642}.light .ct-870cff{color:#268BD2}.light .ct-2336c7{color:#859900}.light .ct-bb5e76{color:#D33682}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"sample-code","depth":2,"text":"Sample code"},{"id":"passing-parameters-to-vertexshader","depth":2,"text":"Passing parameters to VertexShader"},{"id":"applying-transformations","depth":2,"text":"Applying transformations"}]}},"_type":"markdown","_id":"content:Frontend:WebGL:Vertex Shaders.md","_source":"content","_file":"Frontend/WebGL/Vertex Shaders.md","_extension":"md"}