` currently only accepts 1 string flag from the user. Using only flags means the system relies solely on us predicting users' needs and implementing a \"mode\" for them.\r\nAccepting only a single flag means we can't have a compound policy, e.g., \"rerender if advance or invalidate were called or the window resized. Afaik, this currently leads to cases where manual is the mode – the canvas will be blank if the window is resized, until invalidate is called.\r\n\r\n\r\n\r\n### Suggested solution\r\n\r\nEncapsulate the logic for \"Should the next tick update/render?\" in a module – maybe `src/core/renderPolicy.ts`?\r\nLet the render policy be specified via functions/objects as follows:\r\n\r\n```ts\r\nimport { createRenderPolicy, manual } from '...'\r\nconst policy = createRenderPolicy(manual)\r\nconst { invalidate } = policy\r\n...\r\n\u003CTresCanvas :render-policy=\"policy\" />\r\n```\r\n\r\nAbove, \r\n\r\n- manual is \"rule\" function that contains its own state, tracking if invalidate() was called since the last update.\r\n- policy is an object that relays calls to invalidate and advance to its rules, then asks the rules if the next tick should update/render or not.\r\n\r\nIn this way, we could have compound policies. E.g.,\r\n\r\n```ts\r\n// NOTE: This policy will approve the next tick of jobs if ...\r\n// - `invalidate()` was called\r\n// - the window was resized\r\n// but cancel if ...\r\n// - the canvas is off-screen\r\nconst { shouldUpdate, invalidate } = createRenderPolicy([manual, windowResize, cancelIfOffScreen])\r\nshouldUpdate() // false\r\ninvalidate()\r\nshouldUpdate() // true\r\n```\r\n\r\nRules would be evaluated in FILO order, with the result of lower ranking rules being passed to higher ranking rules, so this ...\r\n\r\n```\r\ncreateRenderPolicy([manual, cancelIfOffScreen, windowResize])\r\n```\r\n\r\n... cancels true from windowResize if the canvas is offscreen. But if the canvas is off-screen, manual's advance(n) will still take precedence.\r\n\r\nWhereas here ...\r\n\r\n```\r\ncreateRenderPolicy([cancelIfOffScreen, manual, windowResize])\r\n```\r\n\r\n... `cancelIfOffScreen` takes precedence over the other 2 rules and cancels both if the canvas is off-screen. \r\n----\r\n\r\nRules are relatively simple to write and users could supply their own rules, if we surface that in the API. Here's a \"complicated\" rule – `windowResize` – in its current form:\r\n\r\n```ts\r\nexport const windowResize: CreateUpdateRule = () => {\r\n let invalidated = true\r\n const invalidate = () => { invalidated = true }\r\n window.addEventListener('resize', invalidate)\r\n return {\r\n shouldUpdate: (lowRankResult: boolean) => {\r\n const result = invalidated\r\n invalidated = false\r\n return result || lowRankResult\r\n },\r\n dispose: () => {\r\n window.removeEventListener('resize', invalidate)\r\n }\r\n }\r\n}\r\n```\r\nHere's manual:\r\n\r\n```ts\r\nexport const manual: CreateUpdateRule = () => {\r\n let numFramesToAdvance = 0\r\n return {\r\n advance: (numFrames = 1) => {\r\n numFramesToAdvance = Math.max(numFramesToAdvance, numFrames)\r\n },\r\n shouldUpdate: (lowRankResult: boolean) => {\r\n const result = numFramesToAdvance > 0\r\n numFramesToAdvance = Math.max(0, numFramesToAdvance - 1)\r\n return result || lowRankResult\r\n }\r\n }\r\n}\r\n```\r\n\r\n### Alternative\r\n\r\n_No response_\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Validations\r\n\r\n- [X] I agree to follow this project's [Code of Conduct](https://github.com/Tresjs/tres/blob/main/CODE_OF_CONDUCT.md)\r\n- [X] Read the [Contributing Guidelines](https://github.com/Tresjs/tres/blob/main/CONTRIBUTING.md).\r\n- [X] Read the [docs](https://tresjs.org/guide).\r\n- [X] Check that there isn't [already an issue](https://github.com/tresjs/tres/issues) that reports the same bug to avoid creating a duplicate.\r\n\r\nEdit (andretchen0): fixed formatting ",[2867,2870],{"name":2868,"color":2869},"feature","c2e0c6",{"name":2871,"color":2872},"pending-triage","97A4FE",689,"Tresjs","tres","open","Render mode policies","2024-05-24T14:21:03Z","https://github.com/Tresjs/tres/issues/689",0.76170224,{"description":2882,"labels":2883,"number":2887,"owner":2874,"repository":2888,"state":2876,"title":2889,"updated_at":2890,"url":2891,"score":2892},"**Is your feature request related to a problem? Please describe.**\r\nFor the same controls, Tweakpane is roughly half the height of Leches. I often find myself tweaking/removing controls to get Leches to fit in a window. That's a design tradeoff, but since I'm mostly working on docs/playground examples aimed at other devs, I'd trade whitespace/larger controls/larger type for having more controls \"above the fold\".\r\n",[2884],{"name":2885,"color":2886},"enhancement","a2eeef",88,"leches","Compact view","2023-12-13T18:42:25Z","https://github.com/Tresjs/leches/issues/88",0.7720218,{"description":2894,"labels":2895,"number":2899,"owner":2874,"repository":2875,"state":2876,"title":2900,"updated_at":2901,"url":2902,"score":2903},"### Describe the bug\n\nusing three-viewport-gizmo (https://www.npmjs.com/package/three-viewport-gizmo) after 'const gizmo = new ViewportGizmo(camera, renderer);', a white screen is triggered and the canvas is cleared\n\n### Reproduction\n\nno\n\n### Steps to reproduce\n\n_No response_\n\n### System Info\n\n_No response_\n\n### Used Package Manager\n\npnpm\n\n### Code of Conduct\n\n- [X] I agree to follow this project's [Code of Conduct](https://github.com/Tresjs/tres/blob/main/CODE_OF_CONDUCT.md)\n- [X] Read the [Contributing Guidelines](https://github.com/Tresjs/tres/blob/main/CONTRIBUTING.md).\n- [X] Read the [docs](https://tresjs.org/guide).\n- [X] Check that there isn't [already an issue](https://github.com/tresjs/tres/issues) that reports the same bug to avoid creating a duplicate.\n- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.",[2896],{"name":2897,"color":2898},"needs reproduction","511ECF",879,"using three-viewport-gizmo will clear the canvas","2024-12-06T04:38:37Z","https://github.com/Tresjs/tres/issues/879",0.7720391,{"description":2905,"labels":2906,"number":2913,"owner":2874,"repository":2875,"state":2876,"title":2914,"updated_at":2915,"url":2916,"score":2917},"### Description\r\n\r\nAs of now, https://github.com/Tresjs/tres/blob/main/src/composables/useRenderer/index.ts#L209 supports the default WebGL 2 renderer.\r\n\r\nThe idea would be to adapt `useRenderer` so a custom renderer like https://github.com/mrdoob/three.js/blob/dev/examples/jsm/renderers/webgpu/WebGPURenderer.js can be used.\r\n\r\n### Suggested solution\r\n\r\nCheck out R3F and NGT support \r\n\r\nhttps://github.com/pmndrs/react-three-fiber/blob/master/packages/fiber/src/core/index.tsx#L108\r\n\r\n\u003Cimg width=\"1363\" alt=\"image\" src=\"https://github.com/Tresjs/tres/assets/4699008/3e13a42d-1e1f-4837-8d47-8887fc5dabef\">\r\n\r\n\r\n### Alternative\r\n\r\n_No response_\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Validations\r\n\r\n- [X] I agree to follow this project's [Code of Conduct](https://github.com/Tresjs/tres/blob/main/CODE_OF_CONDUCT.md)\r\n- [X] Read the [Contributing Guidelines](https://github.com/Tresjs/tres/blob/main/CONTRIBUTING.md).\r\n- [X] Read the [docs](https://tresjs.org/guide).\r\n- [X] Check that there isn't [already an issue](https://github.com/tresjs/tres/issues) that reports the same bug to avoid creating a duplicate.",[2907,2910],{"name":2908,"color":2909},"help wanted","008672",{"name":2911,"color":2912},"investigation","D03599",272,"Support for Custom Renderers","2024-12-17T08:08:20Z","https://github.com/Tresjs/tres/issues/272",0.7810029,{"description":2919,"labels":2920,"number":2921,"owner":2874,"repository":2922,"state":2923,"title":2924,"updated_at":2925,"url":2926,"score":2927},"**Describe the bug**\r\nEffectComposer in Nuxt3 ,canvas is no color.\r\n\r\n**Reproduction**\r\nhttps://stackblitz.com/edit/github-fbtfij?file=app.vue\r\n\r\n\r\n**Expected behavior**\r\n\r\n\r\n**Screenshots**\r\n\r\n\r\n\r\n**System Info**\r\nnuxt:3.12.4\r\n\r\n",[],118,"post-processing","closed","EffectComposer in Nuxt3 ,canvas is no color","2024-10-13T16:21:50Z","https://github.com/Tresjs/post-processing/issues/118",0.7109585,{"description":2929,"labels":2930,"number":2934,"owner":2874,"repository":2922,"state":2923,"title":2935,"updated_at":2936,"url":2937,"score":2938},"**Describe the bug**\r\nA clear and concise description of what the bug is. If you intend to submit a PR for this issue, tell us in the description. Thanks!\r\n\r\nHi! Fist of all, What a great library! I'm playing with it, and so far... I LOVE IT! now... to the error, I am currently trying to use the post-processing package on a scene and I get the following error when I use it:\r\n\r\n\r\n\r\n**Reproduction**\r\nThis same happens whenever you check the examples:\r\nhttps://playground.tresjs.org/experiments/nuxt-stones\r\n\r\n\r\n\r\n\r\n**Steps**\r\nSteps to reproduce the behavior:\r\n1. Just adding the EffectComposer with a default bloom effect.\r\n\r\n**Expected behavior**\r\nFor the effect composer component to work\r\n\r\n**Screenshots**\r\nIf applicable, add screenshots to help explain your problem.\r\n\r\n**System Info**\r\nOutput of `npx envinfo --system --npmPackages '{vite,@tresjs/*, three, vue}' --binaries --browsers` \r\n```\r\nSystem:\r\n OS: macOS 13.4.1\r\n CPU: (8) arm64 Apple M1\r\n Memory: 323.22 MB / 16.00 GB\r\n Shell: 5.9 - /bin/zsh\r\n Binaries:\r\n Node: 18.15.0 - ~/.nvm/versions/node/v18.15.0/bin/node\r\n npm: 9.5.0 - ~/.nvm/versions/node/v18.15.0/bin/npm\r\n Browsers:\r\n Chrome: 116.0.5845.110\r\n Safari: 16.5.2\r\n npmPackages:\r\n @tresjs/cientos: ^3.1.0 => 3.1.0 \r\n @tresjs/core: ^3.1.0 => 3.1.0 \r\n @tresjs/post-processing: ^0.3.0 => 0.3.0 \r\n vite: ^2.8.0 => 2.9.16 \r\n```\r\n\r\n**Additional context**\r\nAdd any other context about the problem here.\r\n",[2931],{"name":2932,"color":2933},"bug","d73a4a",49,"Cannot read properties of undefined (reading 'canvas')","2023-10-19T15:07:15Z","https://github.com/Tresjs/post-processing/issues/49",0.71936923,{"description":2940,"labels":2941,"number":382,"owner":2874,"repository":2875,"state":2923,"title":2943,"updated_at":2944,"url":2945,"score":2946},"Package to support `EffectComposer` https://github.com/pmndrs/react-postprocessing",[2942],{"name":2868,"color":2869},"Postprocessing package","2023-04-19T10:52:44Z","https://github.com/Tresjs/tres/issues/8",0.7231668,{"description":2948,"labels":2949,"number":2950,"owner":2874,"repository":2951,"state":2923,"title":2952,"updated_at":2953,"url":2954,"score":2955},"The Manual Post Processing demo doesn't change when changing the various post-processing options.\r\n\r\n\u003Cimg width=\"1489\" alt=\"Screenshot 2023-09-20 at 01 10 01\" src=\"https://github.com/Tresjs/playground/assets/20469369/f9fb0fee-e6a7-45d8-afeb-4788da9b04b2\">\r\n\r\n----\r\n\r\n## Description\r\n\r\n* Expected: When changing the [post-processing dropdown here](https://deploy-preview-62--tresjs-playground.netlify.app/experiments/post-processing-manual), the content of the canvas should show the post-processing effect.\r\n* What happens: Nothing happens. The post-processing effect is not shown.\r\n\r\n----\r\n\r\n## Diagnosis\r\n\r\nThe demo watches a ref called `context`. It expects that the ref here `\u003CTresCanvas ref=\"content\">` will have a renderer in its value, when its updated:\r\n\r\n```\r\nwatchEffect(() => {\r\n if (context.value) {\r\n context.value.renderer.setSize(width.value, height.value)\r\n context.value.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))\r\n effectComposer = new EffectComposer(context.value.renderer)\r\n effectComposer.addPass(new RenderPass(context.value.scene, context.value.camera))\r\n\r\n onLoop(() => {\r\n effectComposer.render()\r\n })\r\n }\r\n})\r\n```\r\n\r\n[Source](https://github.com/Tresjs/playground/blob/215b94708fe765c80b073f75798fc441db913fd6/components/content/post-processing-manual/index.vue#L62)\r\n\r\n... but it doesn't. Here's the browser error message:\r\n\r\n```\r\nTypeError: a.value.renderer is undefined\r\n```\r\n\r\n----\r\n\r\nChecking the [Tres documentation for `Renderer`](https://tresjs.org/api/renderer.html), it doesn't appear that adding a ref on `\u003CTresCanvas />` is a documented way to access the renderer, so I didn't file an issue there.\r\n\r\n----\r\n\r\n## System Info\r\n\r\nMac M1\r\nMac OS 13.1\r\nFirefox 117.0.1 ",[],68,"lab","Manual Post Processing demo: canvas ref doesn't contain renderer","2023-09-23T14:22:58Z","https://github.com/Tresjs/lab/issues/68",0.72908574,{"description":2957,"labels":2958,"number":2959,"owner":2874,"repository":2875,"state":2923,"title":2960,"updated_at":2961,"url":2962,"score":2963},"### Describe the bug\r\n\r\n\r\n\r\nWhen i have a simple canvas with Vue Router and a add an empty canvas it keeps expanding forever downwards.\r\n\r\nI created a git repo where you can reproduce the bug.\r\n\r\nIt only happs in portait (smartphone) size of the window.\r\n\r\n\r\nQuick Workarounds:\r\n- Wrap the Canvas into a div to stop the problem\r\n\r\n\r\n\r\n\r\n### Reproduction\r\n\r\nhttps://github.com/baumi951/problem1\r\n\r\n### Steps to reproduce\r\n\r\n- Open the git repo (in github codespace)\r\n- npm run dev\r\n- move window to smartphone size\r\n- press the link \"ThreeView\"\r\n- You can see the size keeps expanding\r\n\r\n### System Info\r\n\r\n```shell\r\nChrome Browser\r\n```\r\n\r\n\r\n### Used Package Manager\r\n\r\nnpm\r\n\r\n### Code of Conduct\r\n\r\n- [X] I agree to follow this project's [Code of Conduct](https://github.com/Tresjs/tres/blob/main/CODE_OF_CONDUCT.md)\r\n- [X] Read the [Contributing Guidelines](https://github.com/Tresjs/tres/blob/main/CONTRIBUTING.md).\r\n- [X] Read the [docs](https://tresjs.org/guide).\r\n- [X] Check that there isn't [already an issue](https://github.com/tresjs/tres/issues) that reports the same bug to avoid creating a duplicate.\r\n- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.",[],493,"empty Canvas keeps expanding infinitely vertically in CSS","2024-01-27T11:58:34Z","https://github.com/Tresjs/tres/issues/493",0.74688524,{"description":2965,"labels":2966,"number":1660,"owner":2874,"repository":2922,"state":2923,"title":2968,"updated_at":2969,"url":2970,"score":2971},"**Is your feature request related to a problem? Please describe.**\r\nAs of now, effects are typescript `.ts` files with `defineComponent`.\r\n\r\n```ts\r\nexport const Glitch = defineComponent\u003CGlitchProps>({\r\n name: 'Glitch',\r\n props: [\r\n 'delay',\r\n 'duration',\r\n 'strength',\r\n 'mode',\r\n 'active',\r\n 'ratio',\r\n 'columns',\r\n 'chromaticAberrationOffset',\r\n 'peturbationMap',\r\n 'dtSize',\r\n ] as unknown as undefined,\r\n\r\n async setup(props, { expose }) {\r\n const { state } = useCore()\r\n const composer = inject\u003Cany>('effectComposer')\r\n const pass = ref\u003CEffectPass | null>(null)\r\n\r\n expose({ getPass: () => pass.value })\r\n\r\n watchEffect(() => {\r\n if (state.camera && composer && composer.value) {\r\n pass.value = new EffectPass(unref(state.camera), new GlitchEffect(props))\r\n composer.value?.addPass(toRaw(pass.value))\r\n }\r\n })\r\n\r\n watch(\r\n () => props.active,\r\n value => {\r\n if (pass.value) {\r\n pass.value.enabled = value as boolean\r\n }\r\n },\r\n )\r\n\r\n return () => {\r\n pass\r\n }\r\n },\r\n})\r\n\r\n```\r\n\r\n**Describe the solution you'd like**\r\n\r\nUse a similar approach as cientos and use vue SFC components \r\n\r\n",[2967],{"name":2885,"color":2886},"Refactor Effects to .vue files","2023-06-23T16:06:50Z","https://github.com/Tresjs/post-processing/issues/23",0.75065595,["Reactive",2973],{},["Set"],["ShallowReactive",2976],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fajkh2Fgn-0P0CMMNeqA9zpPH_61CKvqZbqy3q2wDG4Q":-1},"/Tresjs/post-processing/45"]