GPU 함수 그래프

컴파일과 렌더링 분리

.shade.ts 콜백은 빌드 환경에서 컴파일합니다. 브라우저에는 직렬화된 프로그램과 런타임을 전달합니다. 브라우저 진입점에는 컴파일러와 TypeScript가 포함되지 않습니다. 일반 JavaScript 콜백의 표본 데이터도 미리 컴파일한 TypeShade 데이터 렌더러로 그립니다.

Vite 설정

플러그인은 ?plot 가져오기를 컴파일하고 셰이더 의존성 변경을 감시합니다. 매개변수 기본값은 콜백의 추가 스칼라 인수와 맞춰야 합니다. 콜백은 이름 있는 실제 셰이더 파일에 작성하십시오.

import { defineConfig } from "vite";
import { typeplot } from "typeplot/vite";

export default defineConfig({
  plugins: [typeplot({
    configure: file => file.endsWith("curve.shade.ts")
      ? { parameters: { exponent: 2 } }
      : {},
  })],
});

스칼라 함수 표시

첫 스칼라 인수는 x입니다. 추가 인수는 갱신 가능한 매개변수입니다. 수학적 정의역을 콜백 안에서 처리하십시오. 크기가 1e18 이상인 반환값은 해당 점을 생략합니다. 위 설정처럼 curve.shade.ts의 매개변수 기본값을 지정합니다.

// curve.shade.ts — compiled by the TypePlot Vite plugin
"use typeshade";
export function sample(x: f32, exponent: f32): f32 {
  if (x < 0) return 1e20;
  return pow(x, exponent);
}

// main.ts — browser runtime
import { createPlot } from "typeplot";
import curve from "./curve.shade.ts?plot";
const plot = await createPlot(canvas, curve, {
  bounds: { x: [0, 1], y: [0, 1] },
  parameters: { exponent: 2 },
});
// Call plot.destroy() when the view unmounts.

공간 곡선 표시

매개변수 곡선 콜백은 vec3를 반환합니다. 첫 인수는 곡선의 매개변수입니다. x 범위는 매개변수 구간을 정하며, x/y 범위는 카메라 정규화에 사용합니다. 공간 곡선은 콜백의 유한한 구간을 프래그먼트 셰이더에서 거리장으로 평가하며 곡선 메시를 업로드하지 않습니다. Perspective 투영의 3D로 시작합니다. 3D에서는 Orthographic으로 전환할 수 있습니다. 2D는 항상 Orthographic을 사용합니다.

// helix.shade.ts
"use typeshade";
export function sample(t: f32): vec3 {
  return vec3(cos(t) * 2, sin(t), t * 0.4);
}

// main.ts
import { createPlot } from "typeplot";
import helix from "./helix.shade.ts?plot=3d";
const plot = await createPlot(canvas, helix, {
  bounds: { x: [-6.28, 6.28], y: [-1.25, 1.25] },
});

셰이더 스타일과 탐색

축과 눈금의 기본 굵기는 1 CSS px입니다. style과 setStyle에서 axisWidth, gridWidth, curveWidth, labelSize, grid, tickLabels, axisLabels를 설정합니다. 굵기는 줌과 화면 배율에 영향을 받지 않습니다. 3D에서는 왼쪽 드래그로 회전하고 오른쪽 드래그로 이동하며, 2D에서는 양쪽 버튼으로 이동합니다. 공간 축과 바닥 격자는 곡선과 같은 카메라를 사용하는 암시적 거리장입니다.

plot.setStyle({ axisWidth: 1, gridWidth: 0.5, curveWidth: 2, labelSize: 12, tickLabels: true });

앱 연결과 리소스

앱에서 GPU canvas와 CSS 크기를 관리합니다. TypePlot은 화면 배율에 맞춰 그리기 버퍼를 조정합니다. createPlot을 기다리고, 백엔드 오류를 처리하고, 뷰가 사라질 때 destroy를 호출하십시오.

• auto는 WebGPU를 시도한 뒤 WebGL2로 대체합니다. 백엔드를 명시하면 해당 경로의 오류를 보고합니다.
• 호스트 선언에 typeplot/client를 추가하고 tsconfig에서 **/*.shade.ts를 제외합니다.
• 점을 생략하는 것만으로 모든 불연속을 처리하지는 않습니다. 필요하면 discontinuous: true로 컴파일합니다.
• Figure의 PNG 저장 기능은 현재 데이터 그래프에 적용되며 GPU canvas에는 적용되지 않습니다.

const plot = await createPlot(canvas, program, { backend: "auto" });
plot.setParameters({ exponent: 3 });
plot.setMode("3d");
plot.reset();
plot.destroy();