Responsive Visuals for Marketing Pages

10/30/2024

This post details the technical implementation of the BFCM 2023 Globe visualization, focusing on performance optimizations and new visual features. Key contributions include: 1. **Arc Rendering Optimization:** Transitioned from individual meshes per arc to GPU instancing using Three.js and React-three-fiber. This involves deforming geometry in the vertex shader using Bezier curves and instanced buffer attributes, enabling the rendering of tens of thousands of arcs in a single draw call. 2. **City Dot Rendering:** Utilized instanced particles with `gl.POINTS` for city dots, choosing billboarded points over surface-aligned quads for a better glow effect. 3. **Firework Visualization:** Implemented fireworks using instanced meshes with geometry deformed in the vertex shader to simulate gravity and dissipation. Post-processing effects like bloom were added for visual enhancement. 4. **Camera Animation:** Developed a camera animation system using spherical interpolation and a `lookAt` function, with a fix for the 'world flip' issue by dynamically updating the camera's `up` property based on spherical coordinates. 5. **Animated Pins:** Used `react-spring` for polished entrance animations of city pins. 6. **Airplane Animation:** Implemented instanced airplane animations in the GPU by replicating orbital motion in the shader using trigonometry and instanced transformation matrices, allowing for a single draw call.

12/4/2020

This post details the technical implementation of the 2020 BFCM Globe and Live View, focusing on realism, performance, and the impact of merchant orders. Key technical contributions include: - **Layered Architecture:** Utilizing a layer-based architecture in three.js for code reuse and flexibility. - **Physically Based Rendering:** Employing `MeshPhysicalMaterial` or `MeshStandardMaterial` with 32bit EXR Environment Maps for realistic lighting and smooth image-based lighting. - **Custom Materials and Shaders:** Developing custom materials extending `MeshStandardMaterial` with custom vertex and fragment shaders (e.g., `ShieldMaterial.ts`, `shield.frag`) to achieve effects like bubble transparency by manipulating pixel brightness and alpha. - **Particle-based Order Visualization:** Implementing a particle system using `three.js` `Points` and `BufferGeometry` with custom attributes to render thousands of orders efficiently. This includes using geo interpolation for surface paths, parabola equations for curved height, and converting to `gl_Position` for 3D appearance. - **Performance Optimization:** Utilizing `BufferAttribute`'s `_updateRange_` to update only necessary attributes per frame, enabling the rendering of up to 150,000 particles at 60fps without performance degradation.

10/7/2020

Introduced a JavaScript utility, `ScaleContentAsImage`, to dynamically resize and scale visual content within marketing pages. This utility calculates available space, resizes content using CSS transforms, and preserves document flow by adding placeholder elements and absolute positioning. The solution addresses the limitations of static images and SVGs for localized and evolving product representations, enabling dynamic text localization and responsive scaling.

2/11/2015

This post details the use of SVG with d3.js for animated charts, `stroke-dashoffset` for path animations, and techniques for making SVGs responsive using the `viewBox` attribute and CSS positioning. It also covers generating SVG text with offset strokes and patterned fills using Rails helpers and the `<pattern>` element.