Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: 423 enable on demand render mode usage #436

Merged
merged 42 commits into from
Jul 15, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
42 commits
Select commit Hold shift + click to select a range
d7eb9fe
chore(deps): update deps to latest
alvarosabu Jun 6, 2024
37e6948
chore: on demand invalidation composable with prop change detection
alvarosabu Jun 6, 2024
e9f23e1
feat: on-demand orbit-controls
alvarosabu Jun 6, 2024
c17a7ab
feat: on-demand camera controls
alvarosabu Jun 6, 2024
f7ce6ff
feat: invalidate also on autoRotate
alvarosabu Jun 6, 2024
ff4e850
feat: on-demand map controls and refactor
alvarosabu Jun 6, 2024
385c1a1
feat: on-demand transform controls
alvarosabu Jun 6, 2024
928db6b
feat: on-demand keyboard controls
alvarosabu Jun 6, 2024
2c02b8b
feat: on-demand keybaord controls
alvarosabu Jun 6, 2024
e4c817e
chore: added demo suffix to control pages to avoid confusions
alvarosabu Jun 6, 2024
e6125ac
feat: on-demand pointer lock controls
alvarosabu Jun 6, 2024
543a29a
feat: on-demand scroll controls
alvarosabu Jun 6, 2024
c159dc2
feat: on-demand levioso
alvarosabu Jun 6, 2024
83503c5
feat: correct orbit controls auto rotate invalidation
alvarosabu Jun 6, 2024
232b869
feat: on-demand text3d
alvarosabu Jun 15, 2024
4369e3c
feat: on-demand mouse-parallax
alvarosabu Jun 15, 2024
75d563a
feat: on-demand fbo and size watcher refactor
alvarosabu Jun 15, 2024
7ddfdc3
chore(playground): refactor to use useLoop and sub components
alvarosabu Jun 15, 2024
aef0bf4
chore: remove unused import for lint fix
alvarosabu Jun 15, 2024
3bb4625
chore(playground): refactor lensflare demo to use useLoop
alvarosabu Jun 15, 2024
19db54b
feat: on-demand sampler
alvarosabu Jun 15, 2024
eb8b3a4
feat: on-demand invaldiation on reflector prop change
alvarosabu Jun 15, 2024
593f4a0
chore: added render activity graph and try to make on-demand work on …
alvarosabu Jun 17, 2024
a3d7f47
chore: renamed positional audio demo
alvarosabu Jun 17, 2024
fb4bddb
chore: on-demand smoke
alvarosabu Jun 17, 2024
fb665eb
feat: on-demand precipitation
alvarosabu Jun 17, 2024
74ee39f
feat: on-dermand stars
alvarosabu Jun 17, 2024
adc0ea8
feat: on-demand Environment
alvarosabu Jun 17, 2024
5f0fe94
feat: on-demand sky
alvarosabu Jun 17, 2024
806587c
feat: on-demand Ocean component
alvarosabu Jun 17, 2024
ee5f40d
chore: testing on-demand on fit
alvarosabu Jun 17, 2024
14b3bc3
feat: on-demand Wobble Material
alvarosabu Jun 17, 2024
4b2ce7c
feat: on-demand invalidation holographic material
alvarosabu Jun 21, 2024
0895163
feat: on-demand reflection material
alvarosabu Jun 21, 2024
262e0aa
feat: on-demand custom shader material
alvarosabu Jun 21, 2024
008897c
chore: rename bakeshadows demo
alvarosabu Jun 21, 2024
775addb
Merge branch 'v4' into feature/423-enable-on-demand-render-mode-usage
alvarosabu Jun 21, 2024
605d5f9
chore: misc route
alvarosabu Jun 29, 2024
c4998d9
Merge branch 'v4' into feature/423-enable-on-demand-render-mode-usage
alvarosabu Jul 14, 2024
91289e5
Merge branch 'v4' into feature/423-enable-on-demand-render-mode-usage
alvarosabu Jul 14, 2024
5e441bc
chore: ci, update action setup
alvarosabu Jul 14, 2024
8e0b18f
Merge branch 'v4' into feature/423-enable-on-demand-render-mode-usage
alvarosabu Jul 14, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions .github/workflows/lint.yml
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,7 @@ jobs:
- name: Checkout
uses: actions/checkout@v4
- name: Setup Pnpm
uses: pnpm/action-setup@v2
with:
version: 8
uses: pnpm/action-setup@v4
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v4
with:
Expand Down
1 change: 1 addition & 0 deletions playground/components.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ declare module 'vue' {
AkuAku: typeof import('./src/components/AkuAku.vue')['default']
FboCube: typeof import('./src/components/FboCube.vue')['default']
Gltf: typeof import('./src/components/gltf/index.vue')['default']
GraphPane: typeof import('./src/components/GraphPane.vue')['default']
ModelsDemo: typeof import('./src/components/ModelsDemo.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
Expand Down
101 changes: 101 additions & 0 deletions playground/src/components/GraphPane.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
<script lang="ts" setup>
import { ref } from 'vue'
import { useRafFn } from '@vueuse/core'
import { useState } from '../composables/state'

const width = 160
const height = 40
const strokeWidth = 2
const updateInterval = 100 // Update interval in milliseconds
const topOffset = 0 // Offset from the top

const points = ref('')
const frameTimes = ref([])
const maxFrames = ref(width / strokeWidth)

let lastUpdateTime = performance.now()

const { renderingTimes } = useState()

useRafFn(({ timestamp }) => {
if (timestamp - lastUpdateTime >= updateInterval) {
lastUpdateTime = timestamp

frameTimes.value.push(renderingTimes?.value)
renderingTimes.value = 0

if (frameTimes.value.length > maxFrames.value) {
frameTimes.value.shift()
}

points.value = frameTimes.value
.map(
(value, index) =>
`${index * strokeWidth},${
height + topOffset - strokeWidth / 2 - (value * (height + topOffset - strokeWidth)) / 2
}`,
)
.join(' ')
}
})
</script>

<template>
<div
class="absolute
left-2
top-2
flex
px-4
py-1
justify-between
gap-4
items-center
mb-2
z-10
bg-white
dark:bg-dark
shadow-xl
rounded
border-4
border-solid
bg-primary
border-primary
pointer-events-none
overflow-hidden"
>
<label class="text-secondary text-xs w-1/3">Rendering Activity</label>

<div
class="
bg-gray-100
dark:bg-gray-600
relative
w-2/3
p-1
rounded
text-right
text-xs
focus:border-gray-200
outline-none
border-none
font-sans
"
>
<svg
:width="width"
:height="height"
xmlns="http://www.w3.org/2000/svg"
fill="none"
>
<polyline
:points="points"
stroke="lightgray"
:stroke-width="strokeWidth"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
</div>
</template>
11 changes: 11 additions & 0 deletions playground/src/composables/state.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { reactive, toRefs } from 'vue'

const state = reactive({
renderingTimes: 0,
})
export function useState() {
return {
...toRefs(state),

}
}
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { TresLeches, useControls } from '@tresjs/leches'
import '@tresjs/leches/styles'
import { degToRad } from 'three/src/math/MathUtils.js'
import type { Atlasish } from '../../../../src/core/abstractions/AnimatedSprite/Atlas'
import { useState } from '../../composables/state'

const ASSETS_URL = 'https://raw.githubusercontent.com/andretchen0/tresjs_assets/'
+ '462ad0f669f78d2c5ed7007b5134b419f646efad/textures/animated-sprite/'
Expand Down Expand Up @@ -119,16 +120,23 @@ const centerDemoImgData = (() => {
canvas.parentElement?.removeChild(canvas)
return imgData
})()

const { renderingTimes } = useState()

function onRender() {
renderingTimes.value = 1
}
</script>

<template>
<TresLeches />
<GraphPane />
<div style="position:absolute; top:0; z-index:1; font: 10px sans-serif; padding:10px;">
<p>@frame: {{ lastFrame }}</p>
<p>@end: {{ lastEnd }}</p>
<p>@loop: {{ lastLoop }}</p>
</div>
<TresCanvas v-bind="gl">
<TresCanvas v-bind="gl" render-mode="on-demand" @render="onRender">
<TresPerspectiveCamera :position="[11, 11, 11]" />
<OrbitControls />
<TresGroup :position="[0, 0, -4]">
Expand Down
102 changes: 0 additions & 102 deletions playground/src/pages/abstractions/FBODemo.vue

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<script setup lang="ts">
import { TresCanvas } from '@tresjs/core'
import { Box, OrbitControls, PositionalAudio } from '@tresjs/cientos'
import { useState } from '../../composables/state'

const gl = {
clearColor: '#82DBC5',
Expand Down Expand Up @@ -31,6 +32,12 @@ const handlerAudio = (action: string) => {
const onContinue = () => {
ready.value = true
}

const { renderingTimes } = useState()

function onRender() {
renderingTimes.value = 1
}
</script>

<template>
Expand Down Expand Up @@ -65,8 +72,8 @@ const onContinue = () => {
</button>
</div>
</div>

<TresCanvas v-bind="gl">
<GraphPane />
<TresCanvas v-bind="gl" render-mode="on-demand" @render="onRender">
<TresPerspectiveCamera :position="[0, 0.5, 5]" />
<OrbitControls />

Expand Down
2 changes: 1 addition & 1 deletion playground/src/pages/abstractions/Sampler.vue
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const { samples } = useControls({

<template>
<TresLeches />
<TresCanvas v-bind="gl">
<TresCanvas v-bind="gl" render-mode="on-demand">
<TresPerspectiveCamera :position="[0, 0.5, 5]" />
<OrbitControls />

Expand Down
Loading