WebGL Three.js 片段着色器代码实验 - 微观世界的纹路

Fragment shader for micro wave, 可用来模拟水滴浸染，微生物细胞等场景。

webgl, shader, fragment

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

//Create var for the contenair, the webGL 3D scene, uniforms to bind into shader and timer
var stats = new Stats();
stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
document.body.appendChild(stats.domElement);

var main;
var content;
var container;
var camera, scene, renderer;
var uniforms;
var startTime;

var canvasWidth;
var canvasHeight;
var resPoster = 1;
var minWidth = 450;
var minHeight = minWidth * resPoster;
var margin = 10;

var cols = 1.0;
var rows;

init(); //init scene
animate(); //updateScene

function init() {
    //get contenaire
    main = document.getElementById('main');
    content = document.getElementById('content');
    container = document.getElementById('container');

//Create THREE.JS scene and timer
    startTime = Date.now();
    camera = new THREE.Camera();
    camera.position.z = 1;
    scene = new THREE.Scene();

//create a simple plance
    var geometry = new THREE.PlaneBufferGeometry(16, 9);

//create uniform table which provide all our GLSL binding
    uniforms = {
        time: {
            type: "f",
            value: 1.0
        },
        resolution: {
            type: "v2",
            value: new THREE.Vector2()
        },
        colsrows: {
            type: "v2",
            value: new THREE.Vector2()
        }
    };

//create THREE.JS material
    var material = new THREE.ShaderMaterial({
        //set shaders and uniforms into material
        uniforms: uniforms,
        vertexShader: document.getElementById('vertexShader').textContent,
        fragmentShader: document.getElementById('fragmentShader').textContent
    });

//create mesh, add it to the scene
    var mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

//create renderer and add it to the DOM
    renderer = new THREE.WebGLRenderer();
    container.appendChild(renderer.domElement);

//check window for resize This will give us the proper resolution values to bind
    onWindowResize();
    window.addEventListener('resize', onWindowResize, false);

}

function onWindowResize(event) {
    var mainHeight = window.innerHeight - margin * 2.0;
    var mainWidth = mainHeight / resPoster;
    var contentHeight = content.offsetHeight;
    var contentMargin = margin * 0.25;
    var containerHeight = mainHeight - (contentHeight + contentMargin);
    var containerMinHeight = minHeight - (contentHeight + contentMargin);

main.style.height = mainHeight + "px";
    main.style.width = mainWidth + "px";
    main.style.minHeight = minHeight + "px";
    main.style.minWidth = minWidth + "px";
    main.style.padding = margin * 0.5 + "px";
    content.style.margin = "0 0 " + contentMargin + "px 0";
    container.style.height = containerHeight + "px";
    container.style.minHeight = containerMinHeight + "px";

canvasWidth = container.offsetWidth;
    canvasHeight = container.offsetHeight;
    //send new size value to the shader and resize the window
    uniforms.resolution.value.x = canvasWidth;
    uniforms.resolution.value.y = canvasHeight;

var res = canvasWidth / cols;
    rows = canvasHeight / res;
    uniforms.colsrows.value.x = cols;
    uniforms.colsrows.value.y = rows;

renderer.setSize(canvasWidth, canvasHeight);
}

function animate() {
    stats.begin();
    render();
    stats.end();
    requestAnimationFrame(animate);
}

function render() {
    var currentTime = Date.now();
    var elaspedSeconds = (currentTime - startTime) / 1000.0;
    var maxTime = 4.0;
    var normTime = (elaspedSeconds % maxTime) / maxTime;
    uniforms.time.value = elaspedSeconds;

renderer.render(scene, camera);
}

编译

CSS

@import url('https://fonts.googleapis.com/css?family=Inconsolata');
@import url('https://fonts.googleapis.com/css?family=Roboto:700');
html,
body {
    margin: 0;
    height: 100%;
    background: #1a1a1a;
}
a,
a:active {
    background-color: transparent;
    color: white;
    font-weight: normal -webkit-transition: color 0.5s, background-color 0.5s;
    /* Safari 3.1 to 6.0 */
    
    transition: color 0.5s, background-color 0.5s;
    transition-timing-function: ease-in-out;
}
a:hover {
    background-color: white;
    color: black;
}
canvas {
    display: block;
}
#main {
    background: black;
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
#container,
#content {
    background: black;
    position: relative;
    color: white;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
#content {
    overflow: hidden;
    border: solid;
    border-width: 1px 0 1px 0;
    border-color: #d1d1d1;
    height: auto;
    display: flex;
}
#title {
    padding: 10px 0 10px 0;
    width: 50%;
    font-size: 42px;
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif;
    letter-spacing: -0.75px;
    font-kerning: auto;
    word-break: break-all;
}
#header {
    text-align: left;
    width: 70%;
    font-family: 'Inconsolata', monospace;
    letter-spacing: 1.15px;
    padding: 5px 0 10px 10px;
    border: solid;
    border-width: 0 0 0 1px;
    border-color: #d1d1d1;
}
#date {
    margin: 5px 0;
    font-size: 0.95em;
}
#header h1 {
    margin: 5px 0;
    font-size: 2.0em;
    text-transform: uppercase;
}
#description {
    margin: 10px 0;
}
#baseline {
    width: 100%;
    font-size: 0.85em;
    line-height: 1.75em;
}
#author {
    width: 100%;
    font-size: 0.75em;
    line-height: 1.75em;
    padding: 10px 0 0 0;
}

HTML

<div id="main">
	<div id="content">
		<div id="title">微观</div>
		<div id="header">	  	
			<div id="baseline">
				<p id="date">2018/XX/XX</p>
           <p id="description">GLSL fragment experiment</p>
		</div>
	</div>  
	<div id="container"></div>	
</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">
		#define PI 3.14159265359
		#define TWO_PI 6.28318530718

uniform vec2 resolution;
		uniform float time;
		uniform vec2 colsrows;
		
		float random(float value){
			return fract(sin(value) * 43758.5453123);
		}
		
		float random(vec2 tex){
			return fract(sin(dot(tex.xy, vec2(12.9898, 78.233))) * 43758.5453123);
		}
		
		vec2 random2D(vec2 uv){
			uv = vec2(dot(uv, vec2(127.1, 311.7)), dot(uv, vec2(269.5, 183.3)));
			//return -1.0 + 2.0 * fract(sin(uv) * 43758.5453123);
			return fract(sin(uv) * 43758.5453123); //return without offset on x, y
		}

vec3 random3D(vec3 uv){
			uv = vec3(dot(uv, vec3(127.1, 311.7, 120.9898)), dot(uv, vec3(269.5, 183.3, 150.457)), dot(uv, vec3(380.5, 182.3, 170.457)));
			return -1.0 + 2.0 * fract(sin(uv) * 43758.5453123);
		}

vec3 cubicCurve(vec3 value){
			return value * value * (3.0 - 2.0 * value); // custom cubic curve
		}

float noise(vec3 uv){
			vec3 iuv = floor(uv);
			vec3 fuv = fract(uv);
			vec3 suv = cubicCurve(fuv);

float dotAA_ = dot(random3D(iuv + vec3(0.0)), fuv - vec3(0.0));
			float dotBB_ = dot(random3D(iuv + vec3(1.0, 0.0, 0.0)), fuv - vec3(1.0, 0.0, 0.0));
			float dotCC_ = dot(random3D(iuv + vec3(0.0, 1.0, 0.0)), fuv - vec3(0.0, 1.0, 0.0));
			float dotDD_ = dot(random3D(iuv + vec3(1.0, 1.0, 0.0)), fuv - vec3(1.0, 1.0, 0.0));

float dotEE_ = dot(random3D(iuv + vec3(0.0, 0.0, 1.0)), fuv - vec3(0.0, 0.0, 1.0));
			float dotFF_ = dot(random3D(iuv + vec3(1.0, 0.0, 1.0)), fuv - vec3(1.0, 0.0, 1.0));
			float dotGG_ = dot(random3D(iuv + vec3(0.0, 1.0, 1.0)), fuv - vec3(0.0, 1.0, 1.0));
			float dotHH_ = dot(random3D(iuv + vec3(1.0, 1.0, 1.0)), fuv - vec3(1.0, 1.0, 1.0));

float passH0 = mix(
				mix(dotAA_, dotBB_,	suv.x),
				mix(dotCC_, dotDD_, suv.x),
				suv.y);

float passH1 = mix(
				mix(dotEE_, dotFF_,	suv.x),
				mix(dotGG_, dotHH_, suv.x),
				suv.y);

return mix(passH0, passH1, suv.z);
		}
		
		vec2 remapToSquareUV(vec2 uv, float res){
			uv.y /= res;
			uv.y -= res * 0.5;

return uv;
		}
	
		mat2 rotate2d(float _angle){
			return mat2(cos(_angle),-sin(_angle),
						sin(_angle),cos(_angle));
		}

vec2 rotateFrom(vec2 uv, vec2 center, float angle){
			vec2 uv_ = uv - center;
			uv_ =  rotate2d(angle) * uv_;
			uv_ = uv_ + center;

return uv_;
		}
		
		vec4 addGrain(vec2 uv, float time, float grainIntensity){
    		float grain = random(fract(uv * time)) * grainIntensity;
    		return vec4(vec3(grain), 1.0);
		}
		
		#define OCTAVES 8
		float turbulence(vec3 uv, float freq, float lacunarity){
			float value = 0.0;
			for(int i=0; i<OCTAVES; i++){
				value += abs(noise(uv * freq) / freq);
				freq *= lacunarity;
			}
			
			return value;
		}
	
		#define CONTRAST 3
		float marble(float x){
			//get sin
			float sinx = sin(x);
			float nx = 0.5 * (sinx + 1.0);
			
			for(int i=0; i<CONTRAST; i++){
				nx = sqrt(nx);
			}
			
			float c = nx;
			
			return c;
		}
	
		vec2 scaleUV(vec2 uv, float scale){
			vec2 center = vec2(0.5, 0.5);
			return (uv - center) * scale + center;
		}

void main(){
			vec2 uv = gl_FragCoord.xy / resolution.xy;
			float res = resolution.x / resolution.y;
			vec2 ouv = uv;
			
			uv = scaleUV(uv, 0.65);
			uv = rotateFrom(uv, vec2(0.5), time * 0.001 * TWO_PI);
			
			//uv.y = fract(uv.y + time);
			vec2 nuv = fract(colsrows * uv);
			
			float amplitude = 25.0;
			nuv.x += amplitude * turbulence(vec3(uv, uv.x * uv.y +  time * 0.005), 1.5, 2.07);
			float marblex= 1.0 - marble(nuv.x);
			float marbleStep = smoothstep(0., 0.65, marblex);
			
			vec3 white = vec3(0.35);
			//vec3 gold = vec3(212.0 / 255.0, 175.0 / 255.0, 55.0 / 255.0);
			white *= marbleStep;
			
			float amplitudey= 25.0;
			nuv.y += amplitudey * turbulence(vec3(uv.yx, uv.x * uv.y +  time * 0.005), 1.5, 2.07);
			float marbley = 1.0 - marble(nuv.y);
			float marbleStepy = smoothstep(0., 0.5, marbley);
			vec3 whitey = vec3(0.2);
			whitey *= marbleStepy;
			
			//uv += (noise(vec3(uv + time, time)) * 2.0 - 1.0) * 0.01;
			vec2 cuv = nuv * (colsrows * 1.0) + nuv;
			vec2 iuv = floor(cuv);
			vec2 fuv = fract(cuv);
			
			//draw dist
			vec3 cellColor = vec3(0.0);
			
			//voronoi
			float minDist = 1.0;
			vec2 minPoint = vec2(0.0);
			
			//iterate through cell neighbors
			for(int i = -1; i <= 1; i++){
				for(int j = -1; j <= 1; j++){
					vec2 cellNei = vec2(i, j);
					vec2 point = random2D(iuv + cellNei);
					
					//animated with time;
					float noiseAngle = noise(vec3(uv, time)) * 2.0 - 1.0;
					point += noiseAngle * sin( + time + TWO_PI * point) * 0.05;
					
					vec2 diff = cellNei + point - fuv;
					float dist = length(diff);
					if(dist < minDist){
						minDist = dist;
						minPoint = point;
					}
				}
			}
			float grey = (minPoint.r + minPoint.g);
			cellColor += pow(minDist, 3.25);
			cellColor += dot(minPoint, vec2(0.5, 0.5)) * .5;
			cellColor = clamp(cellColor, vec3(0.15), vec3(1.0));
			
			//shape
			float noiseEdge = noise(vec3(nuv, time * 0.1)) * 0.025;
			float speed = -0.025;
			vec2 centerAnimated = vec2(0.5, -0.5 + fract(time * speed) * 2.0);
			vec2 shadowAnimated = vec2(0.5, -0.5 + fract(time * speed) * 2.0);
			shadowAnimated += vec2(0.01 + noiseEdge, -0.01 + noiseEdge);
			
			float shapelen = length(ouv - centerAnimated);
			float shapeShadowlen = length(ouv - shadowAnimated);
			float circle = 1.0 - smoothstep(0.25, 0.255, shapelen);
			float circleShadowAnimated = 1.0 - smoothstep(0.25, 0.35, shapeShadowlen);
			
			
			vec3 marbleBlack = (whitey + white + cellColor * 0.25) * circle;
			marbleBlack *= marbleBlack * 1.25;
			
			
			vec3 marbleWhite = (1.0 - (whitey + white + cellColor * 0.25)) * (1.0 - (circleShadowAnimated + circle));
			vec3 marbleShadow = (1.0 - (whitey + white + cellColor * 0.25)) * (circleShadowAnimated - circle);
			marbleShadow *= 0.4;
			//marbleShadow -= circle;
			marbleShadow = clamp(marbleShadow, vec3(0.0), vec3(1.0));
			marbleWhite = clamp(marbleWhite, vec3(0.0), vec3(1.0));
			
			vec4 grain = addGrain(uv, time, 0.075);
			
			gl_FragColor = vec4(marbleWhite + marbleShadow + marbleBlack, 1.0) + grain;
		}
</script>

Fragment shader for micro wave, 可用来模拟水滴浸染，微生物细胞等场景。

webgl, shader, fragment

编辑器支持Emmet

快捷键

Fragment shader for micro wave, 可用来模拟水滴浸染，微生物细胞等场景。

webgl, shader, fragment

使用WebGL Three.js着色器代码实现的非规则球体变形背景动画

WebGL Three.js超酷的3D蟒蛇皮肤纹理特效着色器代码

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：