mattdesl

procedural mesh generation

Generates an algorithmic 3D OBJ file with ThreeJS and Node.js.

# print to stdout
node generate-mesh.js > test.obj

# write to file
node generate-mesh.js test.obj

cdata

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

  const skinnedMeshes = {};

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

TimvanScherpenzeel

Implementing audio and video autoplay unlocking

Due to recent changes in the autoplay policy of Chrome 66 developers of interactive experiences on the web are facing new challenges regarding audio and video autoplay. The new policy has unfortunately broken many of the older experiences that rely on autoplaying audio and video.

So how to move forward?

Previous solutions

Previously developers used to face this issue on iOS mobile devices where the audio context was locked. Most developers fixed this by using the initial touch event of a user to unlock the audio.

bvaughn

const createLogger = (backgroundColor, color) => {
  const logger = (message, ...args) => {
    if (logger.enabled === false) {
      return;
    }

    console.groupCollapsed(
      `%c${message}`,
      `background-color: ${backgroundColor}; color: ${color}; padding: 2px 4px;`,
      ...args

m4n1ok

export const isAutoplaySupported = () => {
  // Detect if user can autoplay inline video
  // Works when user is on low-battery mode on IOS
  // Return promise from video.play
  const video = document.createElement('video')
  video.src = 'data:video/mp4;base64,AAAAIGZ0eXBtcDQyAAAAAG1wNDJtcDQxaXNvbWF2YzEAAATKbW9vdgAAAGxtdmhkAAAAANLEP5XSxD+VAAB1MAAAdU4AAQAAAQAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAACFpb2RzAAAAABCAgIAQAE////9//w6AgIAEAAAAAQAABDV0cmFrAAAAXHRraGQAAAAH0sQ/ldLEP5UAAAABAAAAAAAAdU4AAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAABAAAAAAoAAAAFoAAAAAAAkZWR0cwAAABxlbHN0AAAAAAAAAAEAAHVOAAAH0gABAAAAAAOtbWRpYQAAACBtZGhkAAAAANLEP5XSxD+VAAB1MAAAdU5VxAAAAAAANmhkbHIAAAAAAAAAAHZpZGUAAAAAAAAAAAAAAABMLVNNQVNIIFZpZGVvIEhhbmRsZXIAAAADT21pbmYAAAAUdm1oZAAAAAEAAAAAAAAAAAAAACRkaW5mAAAAHGRyZWYAAAAAAAAAAQAAAAx1cmwgAAAAAQAAAw9zdGJsAAAAwXN0c2QAAAAAAAAAAQAAALFhdmMxAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAoABaABIAAAASAAAAAAAAAABCkFWQyBDb2RpbmcAAAAAAAAAAAAAAAA

Bleuje

// by Etienne JACOB
// uses a formula inspired by @ozachou_g (on twitter)

//click on canvas to generate a new one
//press key to save

float x,y,z,t;

float[] A = new float[12];
float[] f = new float[12];

mattdesl

high res tiled rendering with canvas-sketch

Copy these files in the gist to a new folder. Generate a package.json:

cd folder-with-code
npm init -y

Then install deps:

donmccurdy

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

donmccurdy

These are the build tools I prefer to use when starting a new JavaScript or TypeScript library. Most libraries I write run both in the browser and in node.js. Each project needs to be lightweight, and to minimize maintenance. And I need build chains for those libraries to pretty much "just work". That last part has become more important over time, as I've maintained more libraries and generally had less time to deal with dependencies and build system issues. For web applications, as opposed to libraries consumed in other projects, these choices may or may not make sense. These are opinionated choices, and will probably change over time.

Almost always:

• microbundle: Zero-config Rollup bundler, with optional TypeScript support
• tape: Test runner
• tap-spec: Clean test output

Occasionally:

luruke

/**
 * Try to fix iOS lock on audio.
 *
 * By default, audio on iOS is locked until a sound is played within a user interaction,
 * and then it plays normally the rest of the page session.
 */

// Inspired from https://github.com/goldfire/howler.js/blob/2.0/src/howler.core.js#L212

export default class IosUnlock {