This post has been moved to my blog, under Color Management in three.js.
ffmpeg -i input.mp4 -vcodec libx264 -pix_fmt yuv420p -profile:v baseline -level 3 -an -vf "scale=-1:1440, reverse" -preset veryslow -g 2 output.mp4 | |
// -vcodec libx264 -pix_fmt yuv420p -profile:v baseline -level 3 | |
// Encode for web with a good balance of browser compatibility and compression ratio | |
// -an | |
// Strip audio tracks | |
// -vf "scale=-1:1440, reverse" | |
// Scale video to 1440px wide, maintaining aspect ratio |
This optimizes a GLTF file that was exported by blender (or similar) by de-duplicating buffer views (i.e. chunks of bytes) that are equal and removing redundant accessors.
For example, 100 cubes of different scales/materials/rotations/etc should all end up using a single BufferGeometry in ThreeJS, which isn't the case with current GLTF exporters in Blender and parsers for ThreeJS.
In scenes with a lot of instancing, it can dramatically reduce total file size as well as render performance. In one test scene:
Before: 4.8MB file size, 832 THREE.Geometry
instances across 832 THREE.Mesh
objects
After: 661KB file size, 13 THREE.Geometry
instances across 832 THREE.Mesh
objects
-
https://www.python.org/dev/peps/pep-0553/ Proposal to add a
breakpoint
function similar to javascript's debugger statement. Aim to simplify the use of a debugger and also to make it more pluggable (same syntax for all the debuggers). -
http://www.b-list.org/weblog/2017/sep/05/how-python-does-unicode/ Interesting read on how Python handles unicode plus
vec2 backgroundUV (vec2 uv, vec2 resolution, vec2 texResolution) { | |
float tAspect = texResolution.x / texResolution.y; | |
float pAspect = resolution.x / resolution.y; | |
float pwidth = resolution.x; | |
float pheight = resolution.y; | |
float width = 0.0; | |
float height = 0.0; | |
if (tAspect > pAspect) { | |
height = pheight; |
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 |
// An implementation of CSS `background-size: cover` | |
// using http://stackoverflow.com/a/6565988 and my own crappy math | |
vec2 s = uScreenSize; // Screen | |
vec2 i = uBGSize; // Image | |
float rs = s.x / s.y; | |
float ri = i.x / i.y; | |
vec2 new = rs < ri ? vec2(i.x * s.y / i.y, s.y) : vec2(s.x, i.y * s.x / i.x); | |
vec2 offset = (rs < ri ? vec2((new.x - s.x) / 2.0, 0.0) : vec2(0.0, (new.y - s.y) / 2.0)) / new; | |
vec2 uv = vTexCoord * s / new + offset; | |
gl_FragColor = texture2D(uBGTex, uv); |
vec2 rotate(vec2 v, float a) { | |
float s = sin(a); | |
float c = cos(a); | |
mat2 m = mat2(c, s, -s, c); | |
return m * v; | |
} |