Draw Gradient with Screen Resolution

Written by

in

{“vs_code”:”/*MY_VERTEX_SHADER*/\n\nvarying vec2 vUv;\nvoid main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); \n}\n”,”fs_code”:”/*MY_FRAGMENT_SHADER*/\n\n// Screen/Window resolution (width and height of window)\nuniform vec2 u_resolution;\n\nvoid main() {\n vec2 st = gl_FragCoord.xy/u_resolution.xy;\n \n vec4 finalColor = vec4(0.0,0.0,0.0,1.0);\n //Visualize pixel in x direction (left to right).\n finalColor=vec4(st.x,0.0,0.0,1.0);\n \n //Visualize pixel in y direction (top to bottom).\n //finalColor=vec4(0.0,st.y,0.0,1.0);\n \n //Visualize pixel in x & y direction\n //finalColor=vec4(st.x,st.y,0.0,1.0);\n \n gl_FragColor=finalColor;\n}”,”uniforms”:{“u_time”:{“type”:”f”,”value”:0,”editable”:false},”u_resolution”:{“type”:”v2″,”value”:{“x”:512,”y”:512},”editable”:false},”u_mouse”:{“type”:”v2″,”value”:{“x”:0,”y”:0},”editable”:false}},”description”:”Info about your shader.”,”threeJsSettings”:{“showFloor”:false,”ambientLight”:true,”directionalLight”:true,”selected3DObject”:{“_reactName”:”onChange”,”_targetInst”:null,”type”:”change”,”nativeEvent”:{“isTrusted”:true},”target”:{“0″:{},”1″:{},”2″:{},”3″:{},”4″:{},”_wrapperState”:{“wasMultiple”:false}},”currentTarget”:null,”eventPhase”:3,”bubbles”:true,”cancelable”:false,”timeStamp”:133569.1000000001,”defaultPrevented”:false,”isTrusted”:true}},”attributes”:{“isPublic”:true,”defaultIndex”:1,”categoryId”:-1}}