diff --git a/docs/src/components/ExamplePage.astro b/docs/src/components/ExamplePage.astro index 0ba90f9..df40e90 100644 --- a/docs/src/components/ExamplePage.astro +++ b/docs/src/components/ExamplePage.astro @@ -50,10 +50,6 @@ const sidebar = [ --sl-sidebar-width: 12.5rem; } - footer { - display: none !important; - } - .content-panel { border: none !important; diff --git a/docs/src/pages/examples/post-processing/single-pass/_main.ts b/docs/src/pages/examples/post-processing/single-pass/_main.ts new file mode 100644 index 0000000..73f0dd0 --- /dev/null +++ b/docs/src/pages/examples/post-processing/single-pass/_main.ts @@ -0,0 +1,43 @@ +import { useEffectPass, useWebGLCanvas, loadTexture } from "usegl"; +import "./styles.css"; + +(async () => { + const sepiaEffect = useEffectPass({ + fragment: /* glsl */ ` + uniform sampler2D uTexture; // output of the render pass + in vec2 vUv; + out vec4 fragColor; + + #define SEPIA_COLOR vec3(1.2, 1.0, 0.7) + #define STRENGTH .75 + + vec3 sepia(vec3 color) { + float grayScale = dot(color, vec3(0.299, 0.587, 0.114)); + return grayScale * SEPIA_COLOR; + } + + void main() { + vec3 color = texture(uTexture, vUv).rgb; + color = mix(color, sepia(color), STRENGTH); + fragColor = vec4(color, 1.); + } + `, + }); + + useWebGLCanvas({ + canvas: "#glCanvas", + fragment: /* glsl */ ` + in vec2 vUv; + uniform sampler2D uPicture; + out vec4 fragColor; + + void main() { + fragColor = texture(uPicture, vUv); + } + `, + uniforms: { + uPicture: await loadTexture("https://picsum.photos/id/323/600/400"), + }, + postEffects: [sepiaEffect], + }); +})(); diff --git a/docs/src/pages/examples/post-processing/single-pass/_styles.css b/docs/src/pages/examples/post-processing/single-pass/_styles.css new file mode 100644 index 0000000..840c26f --- /dev/null +++ b/docs/src/pages/examples/post-processing/single-pass/_styles.css @@ -0,0 +1,14 @@ +body { + margin: 0; + height: 100svh; + display: grid; + place-items: center; + background: black; +} + +canvas { + max-width: 100svw; + max-height: 100svh; + aspect-ratio: 600 / 400; + display: block; +} diff --git a/docs/src/pages/examples/post-processing/single-pass/index.mdx b/docs/src/pages/examples/post-processing/single-pass/index.mdx new file mode 100644 index 0000000..d42c862 --- /dev/null +++ b/docs/src/pages/examples/post-processing/single-pass/index.mdx @@ -0,0 +1,18 @@ +--- +title: "Single pass (sepia)" +--- + +import ExamplePage from "../../../../components/ExamplePage.astro"; +import ExampleEditor from "../../../../components/ExampleEditor/ExampleEditor.astro"; +import ts from "./_main.ts?raw"; +import styles from "./_styles.css?raw"; + + + + diff --git a/docs/src/styles/custom.scss b/docs/src/styles/custom.scss index a1c947c..99e3f9e 100644 --- a/docs/src/styles/custom.scss +++ b/docs/src/styles/custom.scss @@ -4,6 +4,10 @@ } } +footer { + display: none !important; +} + .page > header > .header { grid-template-columns: auto 1fr auto; } diff --git a/eslint.config.mjs b/eslint.config.mjs index 2b0bba7..a7415f9 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -6,5 +6,6 @@ export default unjs({ "unicorn/no-null": "off", "@typescript-eslint/consistent-type-imports": "error", "@typescript-eslint/triple-slash-reference": "off", + "unicorn/prefer-top-level-await": "off", }, });