建筑师II

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

"use strict";
console.clear();
	
const webGL = (transforms, setup) => {
	const canvas = document.querySelector("canvas");
	const gl = canvas.getContext("webgl", { alpha: false });
	if (!gl) return false;
	gl.enable(gl.DEPTH_TEST);
	gl.enable(gl.CULL_FACE);

const resize = () => {
		canvas.width = canvas.offsetWidth;
		canvas.height = canvas.offsetHeight;
		gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
		camera.projection(fov);
	};

window.addEventListener("resize", () => {
		mustResize = true;
	});

const clearScreen = () => {
		if (mustResize) resize();
		gl.clearColor(0.2, 0.225, 0.25, 1);
		gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
	};

const u3 = (program, name) => {
		const loc = gl.getUniformLocation(program, name);
		return {
			set (v) {
				gl.uniform3f(loc, v[0], v[1], v[2]);
			}
		}
	};

const createShader = (source, type) => {
		const shader = gl.createShader(type);
		gl.shaderSource(shader, source);
		gl.compileShader(shader);
		if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
			throw new Error(gl.getShaderInfoLog(shader));
		}
		return shader;
	}

const compileShaders = (vertex, fragment) => {
		const vertexShader = createShader(vertex, gl.VERTEX_SHADER);
		const fragmentShader = createShader(fragment, gl.FRAGMENT_SHADER);
		const program = gl.createProgram();
		gl.attachShader(program, vertexShader);
		gl.attachShader(program, fragmentShader);
		gl.linkProgram(program);
		gl.useProgram(program);
		return program;
	};

// ---- shaders -----

const vertex = `
		precision highp float;
		uniform mat4 camProj, camView;
		attribute vec3 aPosition, aNormal;
		attribute float aBrillance;
		varying vec4 vPosition;
		varying vec3 vNormal, vColor;
		varying vec3 v_surfaceToLight, v_surfaceToView;
		void main() {
			vPosition = camView * vec4(aPosition, 1.0);
			gl_Position = camProj * vPosition;
			vNormal = normalize(vec3(camView * vec4(aNormal, 0.0)));
			vColor = vec3(aBrillance, aBrillance, aBrillance);
		  v_surfaceToLight = vec3(0.0,0.0, 3.0) - gl_Position.xyz;
  		v_surfaceToView =  vec3(0.0,0.0, 0.0) - gl_Position.xyz;
		}`;

const fragment = `
		precision highp float;
		varying vec4 vPosition;
		varying vec3 vNormal, vColor;
		varying vec3 v_surfaceToLight, v_surfaceToView;
		uniform vec3 uLightPosition, uAmbientColor;
		uniform vec3 uSpecularColor, uDiffuseColor;
		const float density = 0.2; // fog density
		void main() {

vec3 normal = normalize(vNormal);
			vec3 surfaceToLightDirection = normalize(v_surfaceToLight);
			vec3 surfaceToViewDirection = normalize(v_surfaceToView);
			float dotFromDirection = dot(surfaceToLightDirection, -vec3(0.0,-0.2,-1.0));
			float inLight = smoothstep(0.988, 0.99, dotFromDirection);
			float light = inLight * dot(normal, surfaceToLightDirection);
		
			float z = gl_FragCoord.z / gl_FragCoord.w;
			float fogFactor = clamp(exp2( - density * density * pow(z, 3.0)), 0.0, 1.0);
			vec3 lightDirection = normalize(uLightPosition - vPosition.xyz);
			vec3 eyeDirection = normalize(-vPosition.xyz);
			vec3 reflectionDirection = reflect(-lightDirection, vNormal);
			float specularLightWeighting = pow(max(dot(reflectionDirection, eyeDirection), 0.0), 6.0); // shininess
			float diffuseLightWeighting = max(dot(vNormal, lightDirection), 0.0);
			vec3 lightWeighting = uAmbientColor
			+ uSpecularColor * specularLightWeighting
			+ uDiffuseColor * diffuseLightWeighting
			+ 5.0 * light * specularLightWeighting + light * uSpecularColor * 0.2;
			vec3 color = vColor * lightWeighting;
			gl_FragColor = mix(vec4(0.2, 0.225, 0.25, 1.0), vec4(color, 1.0), fogFactor);
		}`;

const program = compileShaders(vertex, fragment);
	const aPosition = buffer(program, "aPosition", 3, gl.STATIC_DRAW);
	const aNormal = buffer(program, "aNormal", 3, gl.STATIC_DRAW);
	const aBrillance = buffer(program, "aBrillance", 1, gl.STATIC_DRAW);

u3(program, "uLightPosition").set(setup.lightPosition);
	u3(program, "uAmbientColor").set(setup.ambientColor);
	u3(program, "uSpecularColor").set(setup.specularColor);
	u3(program, "uDiffuseColor").set(setup.diffuseColor);

const fov = setup.fov;
	let ry = 0;
	let nVertices = 0;
	let mustResize = true;
	const camera = Camera();

const loadVertices = (vertices, brillance, rx, cz,) => {
		const normals = computeNormals(vertices);
		nVertices = vertices.length / 3;
		aPosition.load(vertices);
		aNormal.load(normals);
		aBrillance.load(brillance);
		camera.rx = rx;
		camera.cz = cz;
	};

const anim = () => {
		requestAnimationFrame(anim);
		clearScreen();
		camera.move(camera.rx, ry, camera.dist + camera.cz);
		ry -= 0.1;
		gl.drawArrays(gl.TRIANGLES, 0, nVertices);
	};

return {
		gl: gl,
		loadVertices: loadVertices,
		resize: resize,
		anim: anim
	};
};

///////////////////////////////////////////////////////

const structure = (setup, rules) => {

const shapes = [];
	const stack = [];
	const vertices = [];
	const brillance = [];
	let seed = 0;

const genCube = (x, y, z) => {
		return [
			[-x, -y, -z], [-x,  y, -z], [ x,  y, -z], [ x, -y, -z], [-x, -y, -z], [ x,  y, -z],
			[ x,  y,  z], [-x,  y,  z], [-x, -y,  z], [ x,  y,  z], [-x, -y,  z], [ x, -y,  z],
			[-x,  y, -z], [-x,  y,  z], [ x,  y,  z], [ x,  y, -z], [-x,  y, -z], [ x,  y,  z],
			[ x, -y,  z], [-x, -y,  z], [-x, -y, -z], [ x, -y,  z], [-x, -y, -z], [ x, -y, -z],
			[-x, -y, -z], [-x, -y,  z], [-x,  y,  z], [-x,  y, -z], [-x, -y, -z], [-x,  y,  z],
			[ x,  y,  z], [ x, -y,  z], [ x, -y, -z], [ x,  y,  z], [ x, -y, -z], [ x,  y, -z]
		];
	};

const vCube = genCube(0.5, 0.5, 0.5);

const webgl = webGL(transforms, setup);

const pushVertices = (v, m) => {
		const x = v[0];
		const y = v[1];
		const z = v[2];
		const w = m[3] * x + m[7] * y + m[11] * z + m[15];
		vertices.push(
			(m[0] * x + m[4] * y + m[8] * z + m[12]) / w,
			(m[1] * x + m[5] * y + m[9] * z + m[13]) / w,
			(m[2] * x + m[6] * y + m[10] * z + m[14]) / w
		);
		brillance.push(m[16]);
	};

const random = (_) => {
		seed = (seed * 16807) % 2147483647;
		return (seed - 1) / 2147483646;
	};

const copy = (s) => {
		return [
			// 4 x 4 transform matrix
			s[0], s[1], s[2], s[3], 
			s[4], s[5], s[6], s[7], 
			s[8], s[9], s[10], s[11], 
			s[12], s[13], s[14], s[15], 
			s[16], // brillance
			s[17], // not used
			s[18], // recurcivity depth
			s[19]  // function index
		];
	};

const newStructure = () => {
		console.log("seed:", seed);
		vertices.length = 0;
		brillance.length = 0;
		runshapes(setup.start, setup.transform || {});
		webgl.loadVertices(vertices, brillance, 20, 0);
	};

const singlerule = (i) => {
		return (s, t) => {
			s = transform(s, t);
			if (s[17] === -1) return;
			s[19] = i;
			stack.push(s);
		};
	};

// ---- init ----
	window.rule = {};
	window.CUBE = cube;
	window.SIZE = size;
	if (setup.seed) seed = setup.seed;
	else seed = Math.round(Math.random() * 1000);
	const minSize = setup.minSize || 0;
	const maxDepth = minSize === 0 ? setup.maxDepth || 100 : 1000000;
	const minComplexity = setup.minComplexity || 0;
	shapes.length = 0;
	for (const namerule in rules) {
		const r = rules[namerule];
		if (Array.isArray(r)) {
			let totalWeight = 0;
			const weight = [];
			const index = [];
			for (let i = 0; i < r.length; i += 2) {
				totalWeight += r[i];
				shapes.push(r[i + 1]);
				weight.push(r[i]);
				index.push(shapes.length - 1);
			}
			rule[namerule] = randomrule(totalWeight, weight, index, index.length);
		} else {
			shapes.push(r);
			rule[namerule] = singlerule(shapes.length - 1);
		}
	}

newStructure();
	webgl.resize();
	webgl.anim();
	
	window.addEventListener("pointerdown", (e) => newStructure(), false);

};

////////////////////////////////////////////////////////

const setup = {
	start: "start",
	transform: { y: 0, s: 0.1 },
	maxDepth: 20,
	fov: 60,
	camDist: 3,
	lightPosition: [0, 0.2, -3],
	ambientColor: [0.0, 0.0, 0.0],
	specularColor: [1.5*0.2, 1.5*0.4, 1.5*0.6],
	diffuseColor: [1.5*0.7, 1.5*0.35, 0]
};

structure(setup, rules);

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg