GLSL创建富丽堂皇的花纹图案

GLSL Festival patterns with three.js, webgl万花筒

webgl, shader, pattern

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var container;
var camera, scene, renderer;
var uniforms;

init();
animate();

function init() {
    container = document.getElementById('container');

camera = new THREE.Camera();
    camera.position.z = 1;

scene = new THREE.Scene();

var geometry = new THREE.PlaneBufferGeometry(2, 2);

uniforms = {
        u_time: {
            type: "f",
            value: 1.0
        },
        u_resolution: {
            type: "v2",
            value: new THREE.Vector2()
        },
        u_mouse: {
            type: "v2",
            value: new THREE.Vector2()
        }
    };

var material = new THREE.ShaderMaterial({
        uniforms: uniforms,
        vertexShader: document.getElementById('vertexShader').textContent,
        fragmentShader: document.getElementById('fragmentShader').textContent
    });

var mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio(window.devicePixelRatio);

container.appendChild(renderer.domElement);

onWindowResize();
    window.addEventListener('resize', onWindowResize, false);

document.onmousemove = function(e) {
        uniforms.u_mouse.value.x = e.pageX
        uniforms.u_mouse.value.y = e.pageY
    }
}

function onWindowResize(event) {
    renderer.setSize(window.innerWidth, window.innerHeight);
    uniforms.u_resolution.value.x = renderer.domElement.width;
    uniforms.u_resolution.value.y = renderer.domElement.height;
}

function animate() {
    requestAnimationFrame(animate);
    render();
}

function render() {
    uniforms.u_time.value += 0.05;
    renderer.render(scene, camera);
}

编译

CSS

HTML

<div id="container"></div>
<script id="vertexShader" type="x-shader/x-vertex">
  void main() {
    gl_Position = vec4( position, 1.0 );
  }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
  uniform vec2 u_resolution;
  uniform float u_time;
  
  //	Simplex 3D Noise 
//	by Ian McEwan, Ashima Arts
//
vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);}
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);

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

// Other corners
  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 );

//  x0 = x0 - 0. + 0.0 * C 
  vec3 x1 = x0 - i1 + 1.0 * C.xxx;
  vec3 x2 = x0 - i2 + 2.0 * C.xxx;
  vec3 x3 = x0 - 1. + 3.0 * C.xxx;

// Permutations
  i = mod(i, 289.0 ); 
  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 ));

// Gradients
// ( N*N points uniformly over a square, mapped onto an octahedron.)
  float n_ = 1.0/7.0; // N=7
  vec3  ns = n_ * D.wyz - D.xzx;

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

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);

//Normalise gradients
  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;

// Mix final noise value
  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) ) );
}

float sections = 14.;

void main()
{
	vec2 uv = gl_FragCoord.xy / u_resolution.xy;
    vec2 uv2 = uv;
    
    uv.x = (uv.x - .5)*u_resolution.x/u_resolution.y + .5;
    //uv2.x = iResolution.x/iResolution.y;
    
    float a = atan(uv.y - .5, uv.x - .5);
    a /= 3.141592;
    a *= sections;
    a = abs(mod(a, 2.) - 1.);
    a /= sections*3.141592;
    
    float d = length(uv - vec2(.5));
    
    a += 3.1415*.42/10.;
    
    vec2 cv = vec2(cos(a*10.)*d, sin(a*10.)*d);
    
    //vec2 cv = vec2(a/6.2, d*2.);
    
    float scale = .1;
    float rate = 80.0;
    
    float t = u_time/rate;
    
    float result = 0.0;
    
    //octaves
    for (float i = 0.0; i < 3.0; i++){
    	result += snoise(vec3((cv.x*1.0)/scale, (cv.y - t*2.)/scale, t*2.0))/pow(2.0, i);
        scale /= 2.0;
    }
    result = (result + 2.0)/4.0;
    
    vec3 col = vec3(0.);
    
    float n = result;
    
    n = n*n;
    n = floor(n*15.);

if (mod(n, 2.) == 0.){
        col.r = 1.;
        if (mod(n, 4.) == 0.) col.g = 1.;
        if (mod(n, 8.) == 0.) col.b = 1.;
    }
    
    //powers for steeper curves
    //float p1 = pow(d, 1.7);
    //float p2 = 8.0*(1.0 - p1);
    //result = pow(result, 8.0 - p2);
    
    //power for coloring
    //float g = pow(result, 6.0);
    //fragColor = vec4(result, g, 0, 1.0);
    gl_FragColor = vec4(col, 1.0);
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.min.js"></script>

GLSL Festival patterns with three.js, webgl万花筒

webgl, shader, pattern

编辑器支持Emmet

快捷键

GLSL Festival patterns with three.js, webgl万花筒

webgl, shader, pattern

使用圆形线形构建的SVG葵花子背景图案

HTML5 WebGL构建的神秘鸿沟图案

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：