Patrick HENG patrickheng

shader-reload with budo

Say you want to use shader-reload on your current budo/ThreeJS application, but you don't want to use the glsl-server since you have some specific transforms or options you need.

You can write a new dev.js script (see below) and include any additional transforms you may want (babel, brfs, etc).

Now you can replace the budo command with node dev.js, and pass all other flags as usual.

Note: The utility handles live reloading for you (JS, HTML, CSS, GLSL), so you don't need to pass the --live or -l flags.

Common Blender shortcuts

Camera

Shift + F - FPS mode

Outliner

Ctrl + Left Click - Select parent and its children
Shift + Left Click - Hide parent and its children

	// bezier curve with 2 control points
	// A is the starting point, B, C are the control points, D is the destination
	// t from 0 ~ 1
	vec3 bezier(vec3 A, vec3 B, vec3 C, vec3 D, float t) {
	vec3 E = mix(A, B, t);
	vec3 F = mix(B, C, t);
	vec3 G = mix(C, D, t);

	vec3 H = mix(E, F, t);
	vec3 I = mix(F, G, t);

	import request from 'request'

	const api_endpoint = 'https://api.figma.com/v1'
	const personal_access_token = 'FIGMA_ACCESS_TOKEN_HERE' // https://www.figma.com/developers/docs#auth-dev-token

	function downloadSvgFromAWS(url) {
	return new Promise((resolve, reject) => {
	request.get(
	url,
	{

	// https://discourse.threejs.org/t/functions-to-calculate-the-visible-width-height-at-a-given-z-depth-from-a-perspective-camera/269

	function visibleHeightAtDepth(depth, camera) {
	// compensate for cameras not positioned at z=0
	const cameraOffset = camera.position.z;
	if ( depth < cameraOffset ) depth -= cameraOffset;
	else depth += cameraOffset;
	// vertical fov in radians
	const vFOV = camera.fov * Math.PI / 180;
	// Math.abs to ensure the result is always positive

	vec2 rotateUV(vec2 uv, float rotation)
	{
	float mid = 0.5;
	return vec2(
	cos(rotation) * (uv.x - mid) + sin(rotation) * (uv.y - mid) + mid,
	cos(rotation) * (uv.y - mid) - sin(rotation) * (uv.x - mid) + mid
	);
	}

	vec2 rotateUV(vec2 uv, float rotation, vec2 mid)

	const cloneGltf = (gltf) => {
	const clone = {
	animations: gltf.animations,
	scene: gltf.scene.clone(true)
	};

	const skinnedMeshes = {};

	gltf.scene.traverse(node => {
	if (node.isSkinnedMesh) {

	function loop(val, min, max) {
	return ((val - min) % (max - min + 1) + (max - min + 1)) % (max - min + 1) + min;
	}

	/**
	* Combine indexed and non-indexed BufferGeometry into a new indexed BufferGeometry. All missing uniforms are set to 0.
	* @param {array} geometries Array of THREE.BufferGeometry instances
	* @returns {BufferGeometry}
	*/
	function mergeBufferGeometries (geometries) {
	var indexLength = 0,
	verticesLength = 0,
	attributesInfos = {},
	geometriesInfos = [],

	var cameraZ = camera.position.z;
	var planeZ = 5;
	var distance = cameraZ - planeZ;
	var aspect = viewWidth / viewHeight;
	var vFov = camera.fov * Math.PI / 180;
	var planeHeightAtDistance = 2 * Math.tan(vFov / 2) * distance;
	var planeWidthAtDistance = planeHeightAtDistance * aspect;

	// or