Three.js Raymarching with Matcap: Rendering 3D SDF Spheres

{"title":"Three.js Raymarching with Matcap: Rendering 3D SDF Spheres","description":"Learn how to use raymarching in Three.js to create 3D SDF spheres and map Matcap textures onto them for a unique visual effect. This tutorial includes a step-by-step guide and code examples.","keywords":"Three.js, raymarching, SDF, sphere, Matcap, texture, shader, fragment shader, vertex shader, WebGL","content":"To render a 3D SDF sphere with raymarching in Three.js and map a Matcap texture onto it, follow these steps:\n\n1. Create an HTML file and include the Three.js library and a custom shader file (containing the Raymarching and Matcap mapping logic). For example:\n\nhtml\n<!DOCTYPE html>\n<html lang="en">\n<head>\n <meta charset="UTF-8">\n <title>Three.js Raymarching with Matcap</title>\n <style>\n body { margin: 0; overflow: hidden; }\n canvas { display: block; }\n </style>\n</head>\n<body>\n <script src="https://threejs.org/build/three.js"></script>\n <script src="shader.js"></script>\n <script>\n // Create and render the scene here\n </script>\n</body>\n</html>\n\n\n2. Within the <script> tag, write the code to create and render the scene:\n\njavascript\n// Create the scene\nconst scene = new THREE.Scene();\n\n// Create the camera\nconst camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);\ncamera.position.z = 5;\n\n// Create the renderer\nconst renderer = new THREE.WebGLRenderer();\nrenderer.setSize(window.innerWidth, window.innerHeight);\ndocument.body.appendChild(renderer.domElement);\n\n// Create the sphere material\nconst material = new THREE.ShaderMaterial({\n uniforms: {\n resolution: { value: new THREE.Vector2() }, // Resolution\n time: { value: 0.0 } // Time\n },\n vertexShader: document.getElementById('vertexShader').textContent,\n fragmentShader: document.getElementById('fragmentShader').textContent\n});\n\n// Create the sphere geometry\nconst geometry = new THREE.SphereGeometry(1, 32, 32);\n\n// Create the sphere mesh and add it to the scene\nconst sphere = new THREE.Mesh(geometry, material);\nscene.add(sphere);\n\n// Update the resolution and time uniform variables\nfunction updateUniforms() {\n material.uniforms.resolution.value.x = window.innerWidth;\n material.uniforms.resolution.value.y = window.innerHeight;\n material.uniforms.time.value += 0.01;\n}\n\n// Rendering loop\nfunction animate() {\n requestAnimationFrame(animate);\n updateUniforms();\n renderer.render(scene, camera);\n}\nanimate();\n\n\n3. Create the shader file shader.js and write the Raymarching and Matcap mapping logic. For example:\n\njavascript\n// Vertex shader code\nconst vertexShader = `\n void main() {\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n`;\n\n// Fragment shader code\nconst fragmentShader = `\n uniform vec2 resolution;\n uniform float time;\n\n // SDF sphere function for raymarching\n float sdfSphere(vec3 p, float radius) {\n return length(p) - radius;\n }\n\n // Matcap texture sampling function\n vec2 getMatcapUV(vec3 normal) {\n vec3 reflectDir = reflect(normalize(normal), vec3(0.0, 0.0, 1.0));\n float theta = atan(reflectDir.y, reflectDir.x);\n float phi = acos(reflectDir.z);\n vec2 uv = vec2((theta + 3.141592653589793) / (2.0 * 3.141592653589793), phi / 3.141592653589793);\n return uv;\n }\n\n void main() {\n vec2 p = (2.0 * gl_FragCoord.xy - resolution) / min(resolution.x, resolution.y);\n vec3 rayOrigin = vec3(0.0, 0.0, -5.0);\n vec3 rayDirection = normalize(vec3(p, 1.0));\n float t = 0.0;\n float totalDistance = 0.0;\n\n // Raymarching loop, iteratively calculates the intersection point of the ray with the sphere\n for (int i = 0; i < 100; i++) {\n vec3 p = rayOrigin + rayDirection * t;\n float distance = sdfSphere(p, 1.0); // Call the SDF sphere function\n totalDistance += distance;\n t += distance;\n\n // Check if it's outside the sphere\n if (distance < 0.001 || t > 100.0) {\n break;\n }\n }\n\n // Calculate the normal vector\n vec3 normal = normalize(vec3(\n sdfSphere(vec3(p.x + 0.001, p.y, p.z), 1.0) - totalDistance,\n sdfSphere(vec3(p.x, p.y + 0.001, p.z), 1.0) - totalDistance,\n sdfSphere(vec3(p.x, p.y, p.z + 0.001), 1.0) - totalDistance\n ));\n\n // Sample the Matcap texture based on the normal vector\n vec2 matcapUV = getMatcapUV(normal);\n vec4 matcapColor = texture2D(matcapTexture, matcapUV);\n\n gl_FragColor = vec4(matcapColor.rgb, 1.0);\n }\n`;\n\n// Add the shader code to the page\nconst vertexShaderElement = document.createElement('script');\nvertexShaderElement.type = 'x-shader/x-vertex';\nvertexShaderElement.id = 'vertexShader';\nvertexShaderElement.textContent = vertexShader;\ndocument.head.appendChild(vertexShaderElement);\n\nconst fragmentShaderElement = document.createElement('script');\nfragmentShaderElement.type = 'x-shader/x-fragment';\nfragmentShaderElement.id = 'fragmentShader';\nfragmentShaderElement.textContent = fragmentShader;\ndocument.head.appendChild(fragmentShaderElement);\n\n\n4. In the fragmentShader, you need to call the getMatcapUV function to calculate the normal and sample the Matcap texture. Therefore, you need to pass the Matcap texture to the shader. You can load the Matcap texture as a texture using the following code:\n\njavascript\n// Create the Matcap texture\nconst matcapTexture = new THREE.TextureLoader().load('matcap.jpg');\n\n// Pass the texture to the shader's uniform variable\nmaterial.uniforms.matcapTexture = { value: matcapTexture };\n\n\nEnsure that the actual Matcap texture file (e.g., matcap.jpg) is placed in the same directory as the HTML file and update the filename to the correct one.\n\nThese are the basic steps for using Three.js's ShaderMaterial to perform Raymarching to render 3D SDF spheres and map a Matcap texture to them. Adjust and modify according to your specific needs.