# Drawing a circle with shaders **URL:** \ **Category:** Questions\ **Tags:** shaders\ **Created:** [July 20, 2021, 8:42pm UTC](https://discourse.threejs.org/t/drawing-a-circle-with-shaders/28191 "2021-07-20T20:42:42Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![gmiliotis](https://avatars.discourse-cdn.com/v4/letter/g/e9bcb4/32.png) [@gmiliotis](https://discourse.threejs.org/u/gmiliotis)\ **Post date:** [July 20, 2021, 8:42pm UTC](https://discourse.threejs.org/t/drawing-a-circle-with-shaders/28191/1 "2021-07-20T20:42:42Z")
I am doing my first steps with threejs and I am trying to experiment with shaders. I meant to draw one single circle at the center of the screen but I fail to do it and cannot understand why. The shader code is taken from the book of shaders. What am I missing? Could you help please ```javascript Title ``` ---
**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\ **Post date:** [July 20, 2021, 9:10pm UTC](https://discourse.threejs.org/t/drawing-a-circle-with-shaders/28191/2 "2021-07-20T21:10:56Z")
> [@gmiliotis](#): > > `uniform vec2 u_resolution;` You don’t pass the data in this uniform. So you get wrong result in this line: `vec2 st = gl_FragCoord.xy/u_resolution.xy;` Just an option, not the ultimate solution: [Edit fiddle - JSFiddle - Code Playground](https://jsfiddle.net/prisoner849/vrs2bpw5/) ---
**Author:** ![gmiliotis](https://avatars.discourse-cdn.com/v4/letter/g/e9bcb4/32.png) [@gmiliotis](https://discourse.threejs.org/u/gmiliotis)\ **Post date:** [July 20, 2021, 9:46pm UTC](https://discourse.threejs.org/t/drawing-a-circle-with-shaders/28191/3 "2021-07-20T21:46:21Z")
Thanks so much! I cant do the very basics. Any idea why this doesnt work? I tried to pass a uniform but obviously I got it wrong. ```javascript const material = new THREE.RawShaderMaterial({ vertexShader: ` uniform mat4 projectionMatrix; uniform mat4 viewMatrix; uniform mat4 modelMatrix; attribute vec3 position; void main() { gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0); } `, fragmentShader: ` precision mediump float; uniform vec2 u_resolution; float circle(in vec2 _st, in float _radius){ vec2 dist = _st-vec2(0.5); return 1.-smoothstep(_radius-(_radius*0.01), _radius+(_radius*0.01), dot(dist,dist)*4.0); } void main() { vec2 st = gl_FragCoord.xy/u_resolution.xy; vec3 color = vec3(circle(st,0.9)); gl_FragColor = vec4( color, 1.0 ); } `, uniforms: {u_resolution: new THREE.Vector2(20, 20) } }) ``` ---
**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\ **Post date:** [July 20, 2021, 9:48pm UTC](https://discourse.threejs.org/t/drawing-a-circle-with-shaders/28191/4 "2021-07-20T21:48:40Z")
Maybe, because you need to pass the size of your window? ```javascript uniforms: { u_resolution: { value: new THREE.Vector2(innerWidth, innerHeight) } } ``` Ah! And the object of a uniform has to have `value` property. ---
**Author:** ![gmiliotis](https://avatars.discourse-cdn.com/v4/letter/g/e9bcb4/32.png) [@gmiliotis](https://discourse.threejs.org/u/gmiliotis)\ **Post date:** [July 20, 2021, 9:55pm UTC](https://discourse.threejs.org/t/drawing-a-circle-with-shaders/28191/5 "2021-07-20T21:55:48Z")
Still no luck. Passing `uniforms: {u_resolution: new THREE.Vector2(window.innerWidth, window.innerHeight) }` gives me the same error: `Uncaught TypeError: Cannot read property 'x' of undefined` Totally removing any reference to `u_resolution` from inside the fragmentShader gives me just a black screen and no error in the console ---
**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\ **Post date:** [July 20, 2021, 9:58pm UTC](https://discourse.threejs.org/t/drawing-a-circle-with-shaders/28191/6 "2021-07-20T21:58:09Z")
> [@prisoner849](#): > > the object of a uniform has to have `value` property You’re still missing that **`value`** property. ---
**Author:** ![gmiliotis](https://avatars.discourse-cdn.com/v4/letter/g/e9bcb4/32.png) [@gmiliotis](https://discourse.threejs.org/u/gmiliotis)\ **Post date:** [July 20, 2021, 10:07pm UTC](https://discourse.threejs.org/t/drawing-a-circle-with-shaders/28191/7 "2021-07-20T22:07:04Z")
Oh! yes! Thanks a million, I must be blind! Thanks so much for helping out ---
**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\ **Post date:** [July 21, 2021, 8:08am UTC](https://discourse.threejs.org/t/drawing-a-circle-with-shaders/28191/8 "2021-07-21T08:08:09Z")
related: from the [Collection of examples from discourse.threejs.org](https://discourse.threejs.org/t/collection-of-examples-from-discourse-threejs-org/4315) 2019 ![2021-07-21 09.59.52](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/d/adcfaf5782354c54bb384da51cef5a38dd701038.png) ![2021-07-21 10.01.23](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/9/a/9a0a3de5995969bc17fa47f3d091c85bd8e0afce.png) 2020 ![2021-07-21 10.02.52](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/c/fcbe1535425f853065cbbd6718177a3ddb3903ba.png) 2021 ![2021-07-21 10.07.05](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/c/6/c6afd59f4c2771abdfa74e8b8076a15ba0227387.png)