sphere shader

In this example below you will see how to do a sphere shader with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by takashi, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright takashi ©

Technologies

  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>sphere shader</title>
  
  
  
  
  
</head>

<body>

  <html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style>
        body { margin: 0; overflow: hidden;}
    </style>
</head>

<body id="body">
    <div id="WebGL-output"></div>
  
    <script id="vs" type="x-shader/x-vertex">
			attribute float displacement;
			varying vec3 vNormal;
			varying vec2 vUv;
			uniform float textureAmplitude;

			void main() {
        
				vec3 tempPos = position + normal * vec3(displacement);
				gl_Position = projectionMatrix * modelViewMatrix * vec4( tempPos, 1.0 );
        
				vNormal = normal;
        
				vUv = uv + vec2( textureAmplitude );
        
			}
		</script>

		<script id="fs" type="x-shader/x-fragment">
			uniform vec3 color;
			uniform sampler2D texture;
			varying vec3 vNormal;
			varying vec2 vUv;

			void main() {

				vec3 lightPos = vec3( 1.0, 1.0, 0.0 );
				lightPos = normalize( lightPos );

				float brightness = dot( vNormal, lightPos ) * 0.5 + 0.5 + 0.3;

				vec4 tcolor = texture2D( texture, vUv );

				gl_FragColor =  brightness * tcolor * vec4( color, 1.0 );
        
			}
		</script>
  
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/simplex-noise/2.4.0/simplex-noise.min.js"></script>
  <script src="https://cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
    <script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
</body>

</html>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/tksiiii/sphere-shader-deVrPR */
var scene = void 0,
    camera = void 0,
    renderer = void 0,
    orbitControls = void 0,
    sphereMesh = void 0,
    simplexNoiseArr = void 0;

var simplexNoise = new SimplexNoise();

var render = function render() {
    var timeStamp = Date.now() * 0.01;

    sphereMesh.material.uniforms.textureAmplitude.value = Math.sin(timeStamp * 0.01) + Math.sin(timeStamp * 0.01);
    sphereMesh.material.uniforms.color.value.offsetHSL(0.001, 0, 0);

    var position = sphereMesh.geometry.attributes.position.array;
    var displacement = sphereMesh.geometry.attributes.displacement.array;

    for (var i = 0; i < position.length; i += 3) {
        simplexNoiseArr[i] = Math.sin(timeStamp * 0.05) * 16 * simplexNoise.noise3D(position[i] + timeStamp * 0.08, position[i + 1] + timeStamp * 0.09, position[i + 2] + timeStamp * 0.084);
    }

    for (var _i = 0; _i < displacement.length; _i++) {
        displacement[_i] = Math.sin(timeStamp + _i * 0.1) * Math.sin(timeStamp * 0.01) * 5;
        displacement[_i] += simplexNoiseArr[_i];
    }

    sphereMesh.geometry.attributes.displacement.needsUpdate = true;

    orbitControls.update();
    renderer.render(scene, camera);
    requestAnimationFrame(render);
};

var onResize = function onResize() {
    var width = window.innerWidth;
    var height = window.innerHeight;
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(width, height);
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
};

function init() {

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
    scene.add(camera);
    camera.position.x = 0;
    camera.position.y = 0;
    camera.position.z = 340;
    camera.lookAt(scene.position);

    renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(new THREE.Color(0x000000));
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.getElementById('WebGL-output').appendChild(renderer.domElement);

    /* OrbitControls
    --------------------------------------*/
    orbitControls = new THREE.OrbitControls(camera);
    orbitControls.autoRotate = false;

    /* Mesh
    --------------------------------------*/
    var sphereBufferGeometry = new THREE.SphereBufferGeometry(100, 128, 64);
    var positionNum = sphereBufferGeometry.attributes.position.count;
    simplexNoiseArr = new Float32Array(sphereBufferGeometry.attributes.position.count);
    sphereBufferGeometry.addAttribute('displacement', new THREE.BufferAttribute(new Float32Array(positionNum), 1));

    var shaderMaterial = new THREE.ShaderMaterial({
        uniforms: {
            color: {
                type: 'c',
                value: new THREE.Color(0x0aa0f0)
            },
            texture: {
                type: 't',
                value: getTexture()
            },
            textureAmplitude: {
                type: 'f',
                value: 1.0
            }
        },
        transparent: true,
        depthWrite: false,
        blending: THREE.AdditiveBlending,
        vertexShader: document.getElementById('vs').textContent,
        fragmentShader: document.getElementById('fs').textContent
    });
    shaderMaterial.uniforms.texture.value.wrapS = THREE.RepeatWrapping;
    shaderMaterial.uniforms.texture.value.wrapT = THREE.RepeatWrapping;
    sphereMesh = new THREE.Mesh(sphereBufferGeometry, shaderMaterial);
    scene.add(sphereMesh);

    /* OrbitControls
    -------------------------------------------------------------*/
    orbitControls = new THREE.OrbitControls(camera, renderer.domElement);
    orbitControls.autoRotate = false;
    orbitControls.enableDamping = true;
    orbitControls.dampingFactor = 0.15;

    /* resize
    -------------------------------------------------------------*/
    window.addEventListener('resize', onResize);

    /* rendering start
    -------------------------------------------------------------*/
    document.getElementById('WebGL-output').appendChild(renderer.domElement);
    render();
}

window.onload = init;

function getTexture() {
    var canvas = document.createElement('canvas');
    canvas.width = 512;
    canvas.height = 512;
    var ctx = canvas.getContext('2d');
    var imgDataObj = ctx.getImageData(0, 0, canvas.width, canvas.height);
    var data = imgDataObj.data;
    var yOffset = 0;
    for (var y = 0; y < canvas.height; y++) {
        var xOffset = 0;
        for (var x = 0; x < canvas.width; x++) {
            var index = (x + y * canvas.width) * 4;
            var c = 255 * simplexNoise.noise2D(xOffset, yOffset) + 255;
            data[index] = c;
            data[index + 1] = c;
            data[index + 2] = c;
            data[index + 3] = 255;
            xOffset += 0.04;
        }
        yOffset += 0.04;
    }
    ctx.putImageData(imgDataObj, 0, 0);
    document.body.appendChild(canvas);
    texture = new THREE.Texture(canvas);
    texture.needsUpdate = true;
    return texture;
}

Comments