` 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 ",[3019,3022],{"name":3020,"color":3021},"feature","c2e0c6",{"name":3023,"color":3024},"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":3034,"labels":3035,"number":3039,"owner":3026,"repository":3040,"state":3028,"title":3041,"updated_at":3042,"url":3043,"score":3044},"**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",[3036],{"name":3037,"color":3038},"enhancement","a2eeef",88,"leches","Compact view","2023-12-13T18:42:25Z","https://github.com/Tresjs/leches/issues/88",0.77202183,{"description":3046,"labels":3047,"number":3051,"owner":3026,"repository":3027,"state":3028,"title":3052,"updated_at":3053,"url":3054,"score":3055},"### 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.",[3048],{"name":3049,"color":3050},"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":3057,"labels":3058,"number":3065,"owner":3026,"repository":3027,"state":3028,"title":3066,"updated_at":3067,"url":3068,"score":3069},"### 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.",[3059,3062],{"name":3060,"color":3061},"help wanted","008672",{"name":3063,"color":3064},"investigation","D03599",272,"Support for Custom Renderers","2024-12-17T08:08:20Z","https://github.com/Tresjs/tres/issues/272",0.7810029,{"description":3071,"labels":3072,"number":30,"owner":3026,"repository":3073,"state":3074,"title":3075,"updated_at":3076,"url":3077,"score":3078},"**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",[],"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":3080,"labels":3081,"number":3085,"owner":3026,"repository":3073,"state":3074,"title":3086,"updated_at":3087,"url":3088,"score":3089},"**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",[3082],{"name":3083,"color":3084},"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":3091,"labels":3092,"number":3094,"owner":3026,"repository":3027,"state":3074,"title":3095,"updated_at":3096,"url":3097,"score":3098},"Package to support `EffectComposer` https://github.com/pmndrs/react-postprocessing",[3093],{"name":3020,"color":3021},8,"Postprocessing package","2023-04-19T10:52:44Z","https://github.com/Tresjs/tres/issues/8",0.7231668,{"description":3100,"labels":3101,"number":3102,"owner":3026,"repository":3103,"state":3074,"title":3104,"updated_at":3105,"url":3106,"score":3107},"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":3109,"labels":3110,"number":3111,"owner":3026,"repository":3027,"state":3074,"title":3112,"updated_at":3113,"url":3114,"score":3115},"### 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":3117,"labels":3118,"number":3120,"owner":3026,"repository":3073,"state":3074,"title":3121,"updated_at":3122,"url":3123,"score":3124},"**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",[3119],{"name":3037,"color":3038},23,"Refactor Effects to .vue files","2023-06-23T16:06:50Z","https://github.com/Tresjs/post-processing/issues/23",0.75065595,["Reactive",3126],{},["Set"],["ShallowReactive",3129],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fajkh2Fgn-0P0CMMNeqA9zpPH_61CKvqZbqy3q2wDG4Q":-1},"/Tresjs/post-processing/45"]