使用单纯形噪音算法模拟星球耀斑动画

自然界的很多现象可以使用简单噪音算法来进行模拟（结合WebGL可以3D形态展示在网页端）。

webgl, noise

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2393
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

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

var getPolar = function 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];
};
var loadProgram = function loadProgram(gl, vs_src, fs_src) {
    var program = gl.createProgram();
    var vs = loadShader(gl.VERTEX_SHADER, gl, vs_src);
    var fs = loadShader(gl.FRAGMENT_SHADER, gl, fs_src);

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

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

var vertices = [];
var colors = [];

var init = function 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++) {
        var v = getPolar(Math.PI / 180 * (Math.random() * 150 + 15), Math.PI / 180 * (Math.random() * 360), 450);
        vertices.push(v[0], v[1], v[2]);
    }

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

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

var time = 0;

var m_matrix = mat4.identity(mat4.create());
    var v_matrix = mat4.identity(mat4.create());
    var p_matrix = mat4.identity(mat4.create());
    var mv_matrix = mat4.identity(mat4.create());
    var 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);

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

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

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

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

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

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

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

var attr_position = gl.getAttribLocation(program, 'position');
    var 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);

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

编译

CSS

HTML

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>

自然界的很多现象可以使用简单噪音算法来进行模拟（结合WebGL可以3D形态展示在网页端）。

webgl, noise

编辑器支持Emmet

快捷键

自然界的很多现象可以使用简单噪音算法来进行模拟（结合WebGL可以3D形态展示在网页端）。

webgl, noise

使用Three.js和单纯形噪音算法实现的3D波动平面

WebGL Three.js使用噪音算法实现的3D空间乱流动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：