Honigstein Samuel Samsy

Trigonometry

const float PI = 3.1415926535897932384626433832795;
const float PI_2 = 1.57079632679489661923;
const float PI_4 = 0.785398163397448309616;

float PHI = (1.0+sqrtf(5.0))/2.0;

OS X Screencast to animated GIF

This gist shows how to create a GIF screencast using only free OS X tools: QuickTime, ffmpeg, and gifsicle.

Instructions

To capture the video (filesize: 19MB), using the free "QuickTime Player" application:

I added a few methods to three-orbit-controls to be able to manually define phi or theta and be able to rotate to a given point.

// rotation in Y
controls.setAzimuthalAngle(theta);

// rotation in X
controls.setPolarAngle(phi);

	// 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

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

	const skinnedMeshes = {};

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

	attribute vec3 position;
	uniform mat4 modelViewMatrix;
	uniform mat4 modelMatrix;
	uniform mat4 projectionMatrix;

	uniform float scale;
	uniform float size;
	uniform float aspect;
	varying vec2 vUv;

	// Kudos to armadilly

	fbo.begin();
	///pre-multiply background color of the fbo for correct blending!
	ofClear(ofColor(fboBgColor * (fboBgColor.a / 255.) , fboBgColor.a));
	//Set this blending mode for anything you draw INSIDE the fbo
	glBlendFuncSeparate(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA, GL_ONE, GL_ONE_MINUS_SRC_ALPHA);
	//your draw code here!
	fbo.end();