-
Notifications
You must be signed in to change notification settings - Fork 24
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
51 changed files
with
1,790 additions
and
1,490 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,87 +1,104 @@ | ||
| <script lang="ts"> | ||
| import _ from 'lodash' | ||
| import Regl from 'regl' | ||
| <script lang="ts" setup> | ||
| import {isEqual, mapValues} from 'lodash' | ||
| import Regl, {DrawConfig} from 'regl' | ||
| import REGL from 'regl' | ||
| import { | ||
| computed, | ||
| defineComponent, | ||
| onMounted, | ||
| onUnmounted, | ||
| PropType, | ||
| ref, | ||
| watch, | ||
| } from 'vue' | ||
| import {REGL_QUAD_DEFAULT} from './util' | ||
| interface UniformsProp { | ||
| [name: string]: number[] | string | ||
| } | ||
| import {computed, onMounted, onUnmounted, ref, watch} from 'vue' | ||
| export default defineComponent({ | ||
| name: 'GlslCnavas', | ||
| props: { | ||
| fragmentString: { | ||
| type: String, | ||
| default: ` | ||
| precision mediump float; | ||
| varying vec2 uv; | ||
| void main() { gl_FragColor = vec4(uv, 0, 1); }`, | ||
| }, | ||
| uniforms: { | ||
| type: Object as PropType<UniformsProp>, | ||
| default: () => ({}), | ||
| }, | ||
| const REGL_QUAD_DEFAULT: DrawConfig = { | ||
| vert: ` | ||
| precision mediump float; | ||
| attribute vec2 position; | ||
| varying vec2 uv; | ||
| void main() { | ||
| uv = position / 2.0 + 0.5; | ||
| gl_Position = vec4(position, 0, 1); | ||
| }`, | ||
| attributes: { | ||
| position: [-1, -1, 1, -1, -1, 1, 1, 1], | ||
| }, | ||
| depth: { | ||
| enable: false, | ||
| }, | ||
| setup(props) { | ||
| const canvas = ref<null | HTMLCanvasElement>(null) | ||
| count: 4, | ||
| primitive: 'triangle strip', | ||
| } | ||
| interface Props { | ||
| fragmentString: string | ||
| uniforms: Record< | ||
| string, | ||
| number | number[] | readonly [number, number, number, number] | ||
| > | ||
| } | ||
| const regl = ref<null | REGL.Regl>(null) | ||
| const props = withDefaults(defineProps<Props>(), { | ||
| fragmentString: ` | ||
| precision mediump float; | ||
| varying vec2 uv; | ||
| void main() { gl_FragColor = vec4(uv, 0, 1); }`, | ||
| uniforms: () => ({}), | ||
| }) | ||
| onMounted(() => { | ||
| if (!canvas.value) { | ||
| return | ||
| } | ||
| const $canvas = ref<null | HTMLCanvasElement>(null) | ||
| regl.value = Regl({ | ||
| attributes: { | ||
| depth: false, | ||
| premultipliedAlpha: false, | ||
| }, | ||
| canvas: canvas.value, | ||
| }) | ||
| }) | ||
| const regl = ref<null | REGL.Regl>(null) | ||
| onUnmounted(() => regl.value?.destroy()) | ||
| onMounted(() => { | ||
| if (!$canvas.value) return | ||
| const uniformKeys = ref(_.keys(props.uniforms)) | ||
| regl.value = Regl({ | ||
| attributes: { | ||
| depth: false, | ||
| premultipliedAlpha: false, | ||
| }, | ||
| canvas: $canvas.value, | ||
| }) | ||
| }) | ||
| const drawCommand = computed(() => { | ||
| if (!regl.value) return null | ||
| onUnmounted(() => regl.value?.destroy()) | ||
| const prop = regl.value.prop as any | ||
| const reglUniforms = ref<Record<string, any>>({}) | ||
| const uniforms = _.fromPairs(uniformKeys.value.map(k => [k, prop(k)])) | ||
| watch( | ||
| () => [props.uniforms, regl.value] as const, | ||
| ([uniforms, regl]) => { | ||
| const keys = Object.keys(uniforms) | ||
| const oldKeys = Object.keys(reglUniforms.value) | ||
| return regl.value({ | ||
| ...REGL_QUAD_DEFAULT, | ||
| frag: props.fragmentString, | ||
| uniforms, | ||
| }) | ||
| }) | ||
| if (isEqual(keys, oldKeys)) return | ||
| if (!regl) return | ||
| watch( | ||
| () => [regl.value, drawCommand.value, props.uniforms], | ||
| () => { | ||
| drawCommand.value && drawCommand.value(props.uniforms) | ||
| } | ||
| ) | ||
| const prop = regl.prop as any | ||
| return {canvas} | ||
| reglUniforms.value = mapValues(props.uniforms, (_, key) => prop(key)) | ||
| }, | ||
| {immediate: true} | ||
| ) | ||
| const drawCommand = computed(() => { | ||
| if (!regl.value) return null | ||
| return regl.value({ | ||
| ...REGL_QUAD_DEFAULT, | ||
| frag: props.fragmentString, | ||
| uniforms: reglUniforms.value, | ||
| }) | ||
| }) | ||
| watch( | ||
| () => [drawCommand.value, props.uniforms] as const, | ||
| ([draw, uniforms]) => { | ||
| // TODO: Fix this | ||
| try { | ||
| draw && draw(uniforms) | ||
| } catch { | ||
| return | ||
| } | ||
| }, | ||
| {immediate: true} | ||
| ) | ||
| </script> | ||
|
|
||
| <template> | ||
| <canvas ref="canvas" /> | ||
| <canvas ref="$canvas" /> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.