PixelsCommander

Rasterization API

Abstract

Rasterization API defines interface for making snapshots from HTML elements.

Introduction

yiwenl

vec2 rotate(vec2 v, float a) {
	float s = sin(a);
	float c = cos(a);
	mat2 m = mat2(c, s, -s, c);
	return m * v;
}

statico

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

ayamflow

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

mattdesl

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;

patrick91

Python

• 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

mattdesl

optimize GLTF file

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

jeffpamer

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

donmccurdy

This post has been moved to my blog, under Color Management in three.js.