WebGL Simplex Noise - Sphere

index.html

<canvas id="webgl-contents"></canvas>
<script id="vs" type="x-shader/x-vertex">
   precision mediump float;

   attribute vec3 position;

   uniform float time;
   uniform mat4 p_matrix;
   uniform mat4 mv_matrix;

   varying vec3 vColor;

   //
   // Description : Array and textureless GLSL 2D/3D/4D simplex
   //               noise functions.
   //      Author : Ian McEwan, Ashima Arts.
   //  Maintainer : ijm
   //     Lastmod : 20110822 (ijm)
   //     License : Copyright (C) 2011 Ashima Arts. All rights reserved.
   //               Distributed under the MIT License. See LICENSE file.
   //               https://github.com/ashima/webgl-noise
   //
   vec3 mod289(vec3 x) {
      return x - floor(x * (1.0 / 289.0)) * 289.0;
   }
   vec4 mod289(vec4 x) {
      return x - floor(x * (1.0 / 289.0)) * 289.0;
   }
   vec4 permute(vec4 x) {
      return mod289(((x*34.0)+1.0)*x);
   }
   vec4 taylorInvSqrt(vec4 r) {
      return 1.79284291400159 - 0.85373472095314 * r;
   }
   float snoise(vec3 v) {
      const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;
      const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);

      vec3 i  = floor(v + dot(v, C.yyy) );
      vec3 x0 =   v - i + dot(i, C.xxx) ;

      vec3 g = step(x0.yzx, x0.xyz);
      vec3 l = 1.0 - g;
      vec3 i1 = min( g.xyz, l.zxy );
      vec3 i2 = max( g.xyz, l.zxy );

      vec3 x1 = x0 - i1 + C.xxx;
      vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y
      vec3 x3 = x0 - D.yyy;      // -1.0+3.0*C.x = -0.5 = -D.y

      i = mod289(i);
      vec4 p = permute( permute( permute(
      i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
      + i.y + vec4(0.0, i1.y, i2.y, 1.0 ))
      + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));

      float n_ = 0.142857142857; // 1.0/7.0
      vec3  ns = n_ * D.wyz - D.xzx;

      vec4 j = p - 49.0 * floor(p * ns.z * ns.z);  //  mod(p,7*7)

      vec4 x_ = floor(j * ns.z);
      vec4 y_ = floor(j - 7.0 * x_ );    // mod(j,N)

      vec4 x = x_ *ns.x + ns.yyyy;
      vec4 y = y_ *ns.x + ns.yyyy;
      vec4 h = 1.0 - abs(x) - abs(y);

      vec4 b0 = vec4( x.xy, y.xy );
      vec4 b1 = vec4( x.zw, y.zw );

      vec4 s0 = floor(b0)*2.0 + 1.0;
      vec4 s1 = floor(b1)*2.0 + 1.0;
      vec4 sh = -step(h, vec4(0.0));

      vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
      vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;

      vec3 p0 = vec3(a0.xy,h.x);
      vec3 p1 = vec3(a0.zw,h.y);
      vec3 p2 = vec3(a1.xy,h.z);
      vec3 p3 = vec3(a1.zw,h.w);

      vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
      p0 *= norm.x;
      p1 *= norm.y;
      p2 *= norm.z;
      p3 *= norm.w;

      vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
      m = m * m;
      return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3) ) );
   }

   vec3 hsv2rgb(vec3 c){
      vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
      vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
      return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
   }

   void main() {
      float update_time = time / 1000.0;
      float noise = snoise(vec3(position + update_time * 2.0));
      vec4 mv_position = mv_matrix * vec4(position * (noise * 0.3 + 1.0), 1.0);

      vColor = hsv2rgb(vec3(noise * 0.6 + update_time, 0.5, 1.0));

      gl_Position = p_matrix * mv_position;
   }
</script>
<script id="fs" type="x-shader/x-fragment">
   precision mediump float;

   uniform float time;

   varying vec3 vColor;

   void main() {
     gl_FragColor = vec4(vColor, 0.13);
   }
</script>

script.js

const canvas = document.getElementById('webgl-contents');
const gl = canvas.getContext('webgl');

const getPolar = (rad1, rad2, r) => {
   var x = Math.sin(rad1) * Math.cos(rad2) * r;
   var z = Math.sin(rad1) * Math.sin(rad2) * r;
   var y = Math.cos(rad1) * r;
   return [x, y, z];
};
const loadProgram = (gl, vs_src, fs_src) => {
  const program = gl.createProgram();
  const vs = loadShader(gl.VERTEX_SHADER, gl, vs_src);
  const fs = loadShader(gl.FRAGMENT_SHADER, gl, fs_src);

  gl.attachShader(program, vs);
  gl.attachShader(program, fs);
  gl.linkProgram(program);
  gl.useProgram(program);

  return program;
};
const loadShader = (type, gl, shader_src) => {
  const shader = gl.createShader(type);
  gl.shaderSource(shader, shader_src);
  gl.compileShader(shader);
  return shader;
};

const vertices = [];
const colors = [];

const init = () => {
   canvas.width = window.innerWidth;
   canvas.height = window.innerHeight;
   canvas.style.width = `${document.body.clientWidth}px`;
   canvas.style.height = `${document.body.clientHeight}px`;

   gl.clearColor(0.05, 0.05, 0.05, 1.0);
   gl.enable(gl.DEPTH_TEST);
   gl.depthFunc(gl.LESS);
   gl.enable(gl.BLEND);
   gl.blendFunc(gl.SRC_ALPHA, gl.ONE);
   gl.clear(gl.COLOR_BUFFER_BIT);
   gl.viewport(0, 0, canvas.width, canvas.height);

   for (var i = 0; i < 50000; i++) {
      const v = getPolar(
         Math.PI / 180 * (Math.random() * 150 + 15),
         Math.PI / 180 * (Math.random() * 360),
         450
      );
      vertices.push(v[0], v[1], v[2]);
   }

   const center = [0.0, 0.0, 0.0];
   const camera = {
      position: [1000.0, 0.0, 0.0],
      up: [0.0, 1.0, 0.0]
   };

   let fovy = 30;
   let aspect = canvas.width / canvas.height;
   let near = 0.1;
   let far = 10000.0;

   let time = 0;

   const m_matrix   = mat4.identity(mat4.create());
   const v_matrix   = mat4.identity(mat4.create());
   const p_matrix   = mat4.identity(mat4.create());
   const mv_matrix  = mat4.identity(mat4.create());
   const mvp_matrix = mat4.identity(mat4.create());

   mat4.lookAt(v_matrix, camera.position, center, camera.up);
   mat4.perspective(p_matrix, fovy, aspect, near, far);
   mat4.multiply(mv_matrix, v_matrix, m_matrix);
   mat4.multiply(mvp_matrix, p_matrix, mv_matrix);

   const program = loadProgram(gl, document.getElementById('vs').textContent, document.getElementById('fs').textContent);

   const uni_m_matrix = gl.getUniformLocation(program, 'm_matrix');
   gl.uniformMatrix4fv(uni_m_matrix, false, m_matrix);

   const uni_v_matrix = gl.getUniformLocation(program, 'v_matrix');
   gl.uniformMatrix4fv(uni_v_matrix, false, v_matrix);

   const uni_p_matrix = gl.getUniformLocation(program, 'p_matrix');
   gl.uniformMatrix4fv(uni_p_matrix, false, p_matrix);

   const uni_mv_matrix = gl.getUniformLocation(program, 'mv_matrix');
   gl.uniformMatrix4fv(uni_mv_matrix, false, mv_matrix);

   const uni_mvp_matrix = gl.getUniformLocation(program, 'mvp_matrix');
   gl.uniformMatrix4fv(uni_mvp_matrix, false, mvp_matrix);

   const uni_time = gl.getUniformLocation(program, 'time');
   gl.uniform1f(uni_time, time);

   const attr_position = gl.getAttribLocation(program, 'position');
   const vertex_buffer = gl.createBuffer();
   gl.enableVertexAttribArray(attr_position);
   gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
   gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
   gl.vertexAttribPointer(attr_position, 3, gl.FLOAT, false, 0, 0);

   const render = () => {
   time ++;
      gl.clear(gl.COLOR_BUFFER_BIT);
      gl.uniform1f(uni_time, time);
      gl.drawArrays(gl.TRIANGLES, 0, vertices.length / 3);
   };
   const renderLoop = () => {
      render();
      requestAnimationFrame(renderLoop);
   };
   renderLoop();
};
init();

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.3.1/gl-matrix-min.js"></script>

style.css

body {
   margin: 0;
   padding: 0;
   overflow: hidden;
}

WebGL Simplex Noise - Sphere.markdown

WebGL Simplex Noise - Sphere

A Pen by yoichi kobayashi on CodePen.

License.