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
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<script src='three.js/build/three.js'></script>
<script src='three.js/examples/js/controls/OrbitControls.js'></script>
<script src='three.js/examples/js/controls/PointerLockControls.js'></script>
</head>
<body>
<canvas class="webgl"></canvas>
<script>
const canvas = document.querySelector('canvas.webgl')
const scene = new THREE.Scene()
const textureLoader = new THREE.TextureLoader()
const geometry = new THREE.PlaneBufferGeometry(1, 1, 32, 32)
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 );
}
`
})
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)
window.addEventListener('resize', () => {
// Update camera
camera.aspect =window.innerWidth / window.innerHeight
camera.updateProjectionMatrix()
// Update renderer
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})
const camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight, 0.1, 100)
camera.position.set(0, 0, 10)
scene.add(camera)
const controls = new THREE.OrbitControls(camera, canvas)
controls.enableDamping = true
const renderer = new THREE.WebGLRenderer({
canvas: canvas
})
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
const clock = new THREE.Clock()
const tick = () => {
const elapsedTime = clock.getElapsedTime()
controls.update()
renderer.render(scene, camera)
window.requestAnimationFrame(tick)
}
tick()
</script>
</body>
</html>
