#shadersinthreejs

One of the very useful projects that can be used for larger projects is creating a glowing sphere using Three js. The use cases of this object are very wide. It can be used for simulating the sun, the moon, the planets, or the planet earth itself. A glowing sphere usually has a kind of halo based on the kind of object it is. For instance, the planet earth needs a kind of a halo for simulating its atmosphere or the moon needs a halo for simulating the white light around it. When we want to simulate the sun in open space, we need a glowing sphere as well.Creating a Glowing Sphere from ScratchIn this article, we are going to get familiar with the steps we can take to create a glowing sphere in Three js. Of course, we are going to simulate the halo of the glowing sphere with the aid of shaders. If you are a beginner, don’t worry because we are going to teach you how to do this task from scratch. As we mentioned earlier, a glowing sphere is composed of the sphere itself with a halo which we are going to design using a shader. There is also another important element that we should consider when designing a glowing sphere and that is considering a light source for it. The position of the light source should be the same as the position of the object. As a result, the object will work as a light source as well.Basics of Creating Sphere in Three JSWe are going to get started with the simple elements of a Three js scene including the camera, the renderer, the scene, the object, and the light source (if necessary). Before we do that, we’d rather use the Vite plugin to be able to easily create all the folders and files that you need to run the Three.js code. First off, create a folder in the directory of your projects by using the following commands: Coppied to clipboard. mkdir glowingSphere cd glowingSphereThen, inside of the glowing sphere folder, create the necessary files and folders by simply running the Vite plugin command: Coppied to clipboard. npm create vite@latestThen enter the name of the project. You can write glowingSphere as the name. And also the package (the name is arbitrary and you can choose anything that you want). Then select vanilla as the framework and variant. After that, enter the following commands in the terminal: Coppied to clipboard. cd glowingSphere npm installAfterward, you can enter the javascript code that you want to write in the main.js file. So, we will enter the base or template code for running every project with an animating object, such as an sphere. Also do not forget to install Three js package library every time create a project: Coppied to clipboard. npm install threeNow, enter the following script in the main.js file:import * as THREE from 'three'; import { Mesh } from 'three'; const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, innerWidth / innerHeight , 0.1, 1000); const renderer = new THREE.WebGLRenderer({ antialias : true }) renderer.setSize(innerWidth, innerHeight); document.body.appendChild(renderer.domElement); //creating a sphere const geometry = new THREE.SphereGeometry(5, 50, 50); const material = new THREE.MeshBasicMaterial({ color:0x3268F8 }) const sphere = new THREE.Mesh(geometry,material); scene.add(sphere); camera.position.z = 15; function animate(){ requestAnimationFrame(animate); renderer.render(scene,camera); sphere.rotation.y += 0.003; } animate();The above code can be used as a boilerplate for later projects. The output of this code will be blue sphere like the below photo. But to be able to show that, you should write the following command in the terminal: Coppied to clipboard. npm run devCreating A Glowing SphereNow, if we want to create a halo to make it glow, we need to create a shader. So, we modify the code a bit. To do so, add the followings to the main.js:const haloVertexShader = /*glsl*/` varying vec3 vertexNormal; void main() { vertexNormal = normal; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `; const haloFragmentShader = /*glsl*/` varying vec3 vertexNormal; void main() { float intensity = pow(0.9 - dot(vertexNormal, vec3(0, 0, 1.0)), 2.0); gl_FragColor = vec4(0.8, 1.0, 0.6, 0.2) * intensity; } `; const halo = new THREE.Mesh( new THREE.SphereGeometry(5, 50, 50), new THREE.ShaderMaterial({ vertexShader:haloVertexShader, fragmentShader:haloFragmentShader, blending: THREE.AdditiveBlending, side: THREE.BackSide }) )scene.add(sphere); halo.scale.set(1.2, 1.2, 1.2); scene.add(halo);Now, we save the code and see a halo around the sphere as a result:What we did here was to create a halo sphere using shaders. Shaders are usually written in other files called vertex.glsl and fragment.glsl. But here for the ease of code execution, we have written it in the main.js file with ‘ ‘ marks. Notice that you need to install the Comment tagged templates in VSCode to be able to support other languages in the main.js. This way writing shader is much easier and faster. In the haloFragmentShader, we have written an algorithm to create this kind of glowing effect and notice that we created another sphere in addition to the main sphere in the boilerplate to simulate a halo so that we can have the glowing sphere using the 2 of them in the same place.Adding the Texture of the Moon:In order to give meaning to our design, we can add the texture of the moon. To do so, we need the UV map of its surface. You can google UV map of the moon and the photo you need should be something like this:Now, we need to create a folder and paste the uv map of the moon and change the material from:const material = new THREE.MeshBasicMaterial({ color:0x3268F8 })To:const material = new THREE.MeshBasicMaterial({ map : new THREE.TextureLoader().load('./img/moon.jpg') })What we actually did was to change the color property to the map property. Finally, you will be to see the rotating moon like this:The final thing that we need to do is to create a light point. We have covered a full tutorial on the point lights in our previous articles. We can use either the spotlight or the directional light to simulate the light in space. However, since we do not have any other objects here, we can neglect this part and do not add any light sources in the position of the moon. But if we want to have more objects and planets in space or simulate the moonlight in the night sky, we would rather use a spotlight or directional light. Notice that if the planets are going to be simulated near each other, the spotlight might be a better choice. But if you want to simulate only the moon in the sky, the directional light may be a better option to provide the scene of a glowing sphere in the middle of the night, because we usually use the directional lights for the sources that are far away and have parallel beams. According to the above explanations, we use the directional light and consider the white color for it and then add it to the scene:const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 ); scene.add( directionalLight );Notice that you should set the position of the point light according to the sphere object (They should have the same position).Final WordIn this tutorial, we have provided the guidelines for creating a sphere from scratch using the Vite plugin and the base code or boilerplate for every Three js project. Afterward, we added the fragment and vertex shaders written in GLSL to our script to simulate the glowing effect on our glowing sphere in Three js. The halo or the glowing effect comes from another sphere that has been scaled relative to the main sphere. Then, to give meaning to the glowing sphere we have created, we decided to create a moon with a UV map of it, which was downloaded from Google images. Finally, we considered adding a light source in case additional objects might be added to the scene in the future. Download this Article in PDF format Curious about What We're Up To? In Arashtad we provide custom services in various design and development fields. 3D websites, 3D games, metaverses, and other types of WebGL and 3D applications are just some of our expertise. Check Out Our Services Arashtad Serivces Drop us a message and tell us about your ideas. Request a Quote 3D Development

If you have read our previous articles on Three.js, you are familiar with the basic functions of this powerful tool. We have different ways to apply our desired textures on the surface of an object, One of which for instance is the MeshStandardMaterial() function we can apply any texture that we want on the object by using it. There is also another technique using which we can apply our desired texture to the object. Not only the texture but photo, logo, color, effects, and so on. This method is using shaders.Shaders in Three.jsBy using a shader, you can create the kinds of effects that you cannot normally do with the aid of built-in materials inside the Three.js. Consequently, using shaders which are written GLSL language, you have a wider variety of options to create a beautiful effect on the surface of an object. Generally in computer graphics, a shader is a computer program that calculates the appropriate levels of light, darkness, and color during the rendering of a 3D scene. With this general definition, a shader will not boil down to the specific case of the program written in GLSL (OpenGL Shading Language). In other words, we can create shading using different methods and languages. For instance, in Three.js we can use the MeshStandardMaterial() function to cover many of the shading effects that we want including a custom texture or lighting, shadows, colors, and so on. It is totally up to you to decide which way is easier to go to create the kind of shader that you like. But the easier way is to use MeshStandardMaterial() and it is recommended that you use this method as far as you can since it’s much simpler and faster than using the GLSL method. However, when your custom shader cannot be implemented using the Three.js functions, you will have no other option but to use the GLSL. In this tutorial, we cover both methods. The first one that we go after is using the MeshStandardMaterial() function.A Simple Project to Use Shaders in Three.jsFirst off, make sure you have npm installed. You can start your first project by git cloning one of the simple Three.js projects to find a boilerplate for further development. Most of these projects can be found on Github, animate simple objects like a cube, sphere, torus, and so on. The animation is usually rotation. Running these projects and developing them step by step by changing some of the features about rendering, lighting, camera perspective, the color of the objects, textures, animations, and so on will help you find the necessary tools to design more complex objects. We start our first project by git cloning one of the Github repositories. To do so, enter the following command in the terminal: Coppied to clipboard. npm install npm install webpack-dev-server -gNow, change the directory to threejs-webpack-starter: Coppied to clipboard. cd threejs-webpack-starterThen, enter the followings one by one to get a pre-designed 3D animated torus: Coppied to clipboard. npm i npm run dev npm run buildAnd you will be able to see the animated (rotating) torus like this in your browser: Coppied to clipboard. *****Now, let’s head over to the JavaScript code behind the scenes and see the elements of this 3D design and rendering. In the src folder, script.js file, you will some scripts that we are going to modify later:Using Shaders in Three.jsAlthough when we talk about shaders we most usually mean the one written in GLSL, here we want to show you simpler ways to create the effects that you want using the Three.js functions. The properties that you can apply to the object are color, lighting effects, metalness, roughness, textures, wireframes, and so on. However, if you work with the GLSL, you have a wider variety of options available. In this part, we are going to modify the code in the script.js file to create some effects on a torus object. To do so, we need to first define the geometry of the object, which here is a torus knot object.const geometry = new THREE.TorusKnotGeometry(0.5, 0.15, 100, 64);Second of all, we can change the material from basic to standard by writing:const material = new THREE.MeshStandardMaterial();Instead of:const material = new THREE.MeshBasicMaterial();And then, we can apply the metalness, roughness and color effects:material.metalness = 0.7; material.roughness = 0.2; material.color = new THREE.Color(0xff00ff);The next thing that we should do is to modify the renderer a little bit from:const renderer = new THREE.WebGLRenderer({ canvas: canvas })To:const renderer = new THREE.WebGLRenderer({ canvas: canvas, alpha: true })The next thing that you should do is to modify the point lights like below (notice that we add another point light):const pointLight = new THREE.PointLight(0xffffff, 0.1); pointLight.position.x = 2; pointLight.position.y = 3; pointLight.position.z = 4; pointLight.intensity = 2; scene.add(pointLight); const pointLight2 = new THREE.PointLight(0x000ff0, 2); pointLight2.position.x = 4; pointLight2.position.y = 3; pointLight2.position.z = 2; scene.add(pointLight2);Also in the style.css file, add a background color in the body section like below:background:rgb(24, 24, 24);Now, it is time to see the result by running the below command in the terminal: Coppied to clipboard. npm run devThe result:And if we add a wireframe to the material like below:material.wireframe = true;And then save the script, the result will be:You can also make the meshes bigger by changing the geometry (4th attribute) from 64 to 16:const geometry = new THREE.TorusKnotGeometry(0.5, 0.15, 100, 16);The result will be:Shaders in Three.js Using GLSLUsing the GLSL language you can create a wide variety of shaders on the object. As there is a huge amount of shaders using this method, here we only introduce the template using which you can create your own custom shader in GLSL and consequently in Three.js. The scripts that we write here are just kind of a Hello World! of all shaders in GLSL. To get started, in the main directory, create a folder called shaders and inside it, create 2 files with the names: fragmentShader.glsl.js and vertexShader.glsl.js. Afterward, in the vertexShader.glsl.js file, paste in the following script:import { Vector4 } from "three"; const vertexShader ='void main(){gl_Position = projectionMatrix * modelViewMatrix *Vector4(position, 1.0)}'; export default vertexShader;Then, you should enter another script in the fragmentShader.glsl.js file:const fragmentShader = 'void main(){gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);}' export default fragmentShader;After that, in the script.js import the 2 files:import vertexShader from '../shaders/vertexShader.glsl'; import fragmentShader from '../shaders/fragmentShader.glsl';And instead of the:const material = new THREE.MeshBasicMaterial({ color : 'red' })You can write:const customShaderMaterial = new THREE.ShaderMaterial({ vertexShader: vertexShader, fragmentShader: fragmentShader })And in the end, you can define the mesh using the geometry and the material created by the .glsl scripts.const sphere = new THREE.Mesh(geometry, customShaderMaterial); scene.add(sphere);After running the modified project using the npm run dev command, you will see:This is of course a simple shading with only one color set in the fragmentShader, but you can develop both of the vertexShader.glsl.js and fragmentShader.glsl.js files to get your custom shader. And hopefully, in the next articles, we will make some custom shaders that are more complex than this one. Also notice that we are not going to talk about the rest of the code inside script.js as most of the parts are not the subject of our article and for now and we can set and forget them. We are going to talk about these details in the next articles where the animation and other details are going to be modified.Last Thought In this article, we have introduced different sorts of shaders including the ones created by the Three.js MeshStandard and MeshBasic function. Using these functions we managed to write different scripts to create shadings like metalness, roughness, color, wireframe, and so on. We also wrote a script to create and run the GLSL custom shader. With the GLSL language, we only wrote a code to create the red color for the surface of the object. However, there is a huge amount of other shaders that we can create with this language that help us create shadings beyond the imagination of others. Some of the most famous shaders are creating textures, logos, backgrounds or even a combination of all of these shaders altogether applied on one object. Moreover, it is important to notice that GLSL is a more common way of creating shaders and most of the designers are familiar with this type of creating shaders. Download this Article in PDF format Care to Know About Metaverse? In Arashtad, we are providing custom services on 3d developments such as 3d websites, 3d models, metaverses and all 3d applications. Check Out All Services Arashtad Serivces Tell us about your ideas Fill in the Form 3D Development