TL;DR

  • OpenAI 2026년 논문의 선도 스케일 법칙을 적용한 브라우저 시각화가 나비에–스토크스(Navier–Stokes) 소용돌이의 제안된 폭발 구성을 보여주며, 수치적 증명 재현이 아닌 일러스트레이션임.
  • 반지름은 τ^(1/2), 높이는 τ^(1/2−h)로 축소되며, h = 0.005, τ = 1−t/T*를 사용해 반지름이 더 빠르게 줄어드는 구조임.
  • WebGL 1, GLSL ES 1.0, 포인터 이벤트, requestAnimationFrame, matchMedia를 이용해 궤도 회전·재생·스크러빙·코어 추적을 제공함.
  • 시각화는 960개 시드와 입자당 24개 샘플로 구성되며, 고정된 저불일치 시드와 해석적 히스토리 재생성으로 탐색 상태와 프레임 속도에 독립적인 트레일을 구성함.
  • WebGL을 사용할 수 없거나 컨텍스트가 손실되면 안내 메시지를 표시하고, prefers-reduced-motion 환경에서는 첫 정지 화면을 유지함.

홈

  • 항목이 28. Scientific visualization · 2026으로 분류됨.

스파게티 소용돌이

  • 브라우저에서 소용돌이 구조를 확인하는 인터랙티브 시각화임.
  • Reset, Fullscreen 기능으로 장면을 초기화하거나 전체 화면으로 전환함.
  • 드래그로 시점을 궤도 회전시키며, 첫 드래그 이후 자동 회전이 중단됨.
  • 재생·일시 정지·접근 과정 스크러빙·코어 추적 기능을 제공함.

색상과 조절 항목

  • 색상과 조절값 변경은 실행 중인 파일에 즉시 반영됨.
  • Copy HTML을 사용하면 현재 설정값이 반영된 HTML을 복사함.
  • 조절 항목은 다음과 같음.
  • Outer: #6ee7b7
  • Core: #f2b45c
  • Trail: 0.35
  • Playback: 1
  • Random
  • Defaults
  • 색상은 정규화된 반지름을 나타내며, 코어 색상에서 외곽 색상으로 이어지는 그레이디언트를 사용함.

설명

  • 2026년 OpenAI 논문의 선도 법칙에 맞춰 크기를 조정한 매개변수형 나선(parametric helix)임.
  • 반지름은 τ^(1/2), 높이는 τ^(1/2−h)를 따르며, h = 0.005, τ = 1−t/T*를 예시값으로 사용함.
  • 두 값 모두 축소되지만 반지름이 더 빠르게 축소됨.
  • 시점을 드래그해 회전하거나 T* 방향으로 스크러빙할 수 있으며, 라벨이 붙은 균일 확대를 사용해 코어를 따라갈 수 있음.
  • 진동성 보정항(oscillatory correction)은 생략됨.
  • 제안된 폭발 구성(blowup construction)을 설명하는 일러스트레이션이며, 증명의 수치적 재현은 아님.

브라우저 API

  • WebGL 1
  • GLSL ES 1.0
  • Pointer Events
  • requestAnimationFrame
  • matchMedia
  • WebGL이 없으면 빈 프레임 대신 캔버스에 안내 메시지를 그림.
  • prefers-reduced-motion이 활성화되면 첫 정지 화면을 유지함.

소스

  • HTML·CSS·JS·GLSL 소스별 복사 기능을 제공함.
  • 시각화의 핵심 파라미터는 외곽 색상 #6ee7b7, 코어 색상 #f2b45c, 트레일 불투명도 0.35, 재생 속도 1임.
  • h = 0.005, 최대 접근 단계 12, 입자 수 960, 입자당 샘플 수 24를 사용함.
  • 접근 변수 s에서 τ = 10^(-s)를 계산하고, 다음 스케일을 적용함.
  • 방사 방향 스케일: τ^0.5
  • 축 방향 스케일: τ^(0.5−h)
  • 속도 스케일: τ^(-0.5−h)
  • 각 입자는 고정된 저불일치 시드로 초기화되며, 위상·각도·축 방향을 난수 상태 없이 결정함.
  • 입자 위치는 안쪽으로 감기는 나선과 두 개의 축 방향 출구를 도식적으로 구성함.
  • 재활용(recycling)은 시드 생성을 위한 도식적 장치임.
  • 재활용 경계를 가로지르는 이력 구간은 생략됨.
  • 각 위치 데이터에는 3차원 좌표, 정규화 반지름, 재활용 주기 식별자가 포함됨.
  • 고정된 샘플 간격으로 제한된 월드 공간 히스토리 링을 구성하고, 스크러빙 때마다 위치를 해석적으로 재생성함.
  • 히스토리는 재생 프레임 속도와 무관하게 유지되며, 재활용 경계가 다른 선분은 트레일에서 제외됨.
  • 트레일 선분은 나이에 따라 투명도가 낮아지고, 현재 코어 지점은 더 높은 불투명도로 표시됨.
  • 정점 셰이더는 모델·뷰·투영 행렬, 확대율, 점 크기를 적용함.
  • 프래그먼트 셰이더는 코어와 외곽 색상을 정규화 반지름에 따라 보간하고 깊이와 트레일 값으로 알파를 조정함.
  • 카메라는 원근 투영과 피치·요 회전을 사용하며, 고정 시점 또는 코어 추적 모드에서 렌더링함.
  • 기준 축과 격자를 함께 그리며, 격자 간격과 1−t/T* 값을 화면 라벨로 표시함.
  • 재생 중에는 접근 단계가 시간에 따라 증가하고 최대 단계에 도달하면 재생이 멈춤.
  • 성능이 일정 시간 동안 낮으면 입자 수를 960개에서 480개로 줄이며, 기존 시드 값은 변경하지 않음.
  • Play 버튼은 종료 지점에서 다시 시작할 수 있고, 슬라이더 입력은 재생을 멈춘 뒤 접근 단계를 직접 설정함.
  • Reset은 접근 단계·카메라·입자 수·자동 회전·코어 추적 설정을 초기 상태로 되돌림.
  • 포인터 이벤트는 드래그 중 요와 피치를 조정하고 자동 회전을 중지함.
  • 화면 가시성이 바뀌면 애니메이션 프레임을 취소하거나 다시 요청하며, ResizeObserver로 장면 크기 변화에 대응함.
  • WebGL 초기화·셰이더 컴파일·프로그램 연결에 실패하면 컨트롤을 비활성화하고 오류 메시지를 표시함.
  • WebGL 컨텍스트가 손실되면 렌더링을 중단하고 복구를 기다리며, 컨텍스트가 복원되면 프로그램과 버퍼를 다시 설정함.