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: Release v4.2 #563

Open
wants to merge 23 commits into
base: main
Choose a base branch
from
Open
Changes from 1 commit
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
0506506
Merge pull request #18 from Tresjs/feature/17-reactive-3dtext-with-ne…
alvarosabu May 2, 2023
6ed4922
Merge branch 'main' into next
alvarosabu Dec 13, 2024
12e9748
docs: un-comment back the new features
alvarosabu Dec 13, 2024
63535a2
feat(Helper): add component, demo, docs (#543)
andretchen0 Dec 13, 2024
4528f64
feat(PointMaterial): add component, demo, docs (#545)
andretchen0 Dec 14, 2024
34a3db5
feat(ScreenQuad): add component, playground, docs (#530)
andretchen0 Dec 14, 2024
2ebc1e6
feat(MarchingCubes): add component, demo, docs (#553)
andretchen0 Dec 17, 2024
99c3a60
feat(CubicBezierLine): add component, demo, docs (#546)
andretchen0 Jan 2, 2025
4a9f006
feat(QuadraticBezierLine): add component, demo, docs (#548)
andretchen0 Jan 2, 2025
7e6b8d0
feat(AccumulativeShadows): add component, demo, docs (#558)
andretchen0 Jan 2, 2025
592ec68
feat(Bounds): add component, demo, docs (#408) (#568)
andretchen0 Jan 2, 2025
789110e
refactor(Align): change callback to emit, improve naming (#571)
andretchen0 Jan 2, 2025
32562b8
Merge branch 'main' into next
alvarosabu Jan 2, 2025
c0c1bcc
feat(CircleShadow): add component, demo, docs (#549)
andretchen0 Jan 2, 2025
9db8c78
feat(Stage): add component, demo, docs (#572)
andretchen0 Jan 3, 2025
000858f
chore(Outline): type material
andretchen0 Jan 3, 2025
ef6438c
feat(LOD): add component, playground, docs (#524)
andretchen0 Jan 4, 2025
d34411a
Merge branch 'main' into next
alvarosabu Jan 5, 2025
59e1888
refactor(Bounds): replace clamp import with MathUtils.clamp for consi…
alvarosabu Jan 5, 2025
b0ba621
feat(useIntersect): add function, demo, docs (#550)
andretchen0 Jan 6, 2025
4da0c42
chore: update dependencies in package.json and pnpm-lock.yaml
alvarosabu Jan 6, 2025
bc54a1d
fix: fixes to next components and docs (#586)
andretchen0 Jan 17, 2025
78d6745
Merge branch 'main' into next
alvarosabu Jan 17, 2025
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
Prev Previous commit
Next Next commit
feat(ScreenQuad): add component, playground, docs (#530)
andretchen0 authored Dec 14, 2024
commit 34a3db5162d084f9fc3db82885a271a1a8c31424
1 change: 1 addition & 0 deletions docs/.vitepress/config.ts
Original file line number Diff line number Diff line change
@@ -140,6 +140,7 @@ export default defineConfig({
{ text: 'Plane', link: '/guide/shapes/plane' },
{ text: 'Ring', link: '/guide/shapes/ring' },
{ text: 'RoundedBox', link: '/guide/shapes/rounded-box' },
{ text: 'ScreenQuad', link: '/guide/shapes/screen-quad' },
{ text: 'Sphere', link: '/guide/shapes/sphere' },
{ text: 'Superformula', link: '/guide/shapes/superformula' },
{ text: 'Tetrahedron', link: '/guide/shapes/tetrahedron' },
13 changes: 13 additions & 0 deletions docs/.vitepress/theme/components/ScreenQuadDemo.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<script setup>
import { TresCanvas } from '@tresjs/core'
import { ScreenQuad } from '@tresjs/cientos'
</script>

<template>
<TresCanvas>
<TresOrthographicCamera :args="[-1, 1, 1, -1, 0, 1000]" :position="[0, 0, 1]" :manual="true" />
<ScreenQuad>
<TresMeshBasicMaterial color="red" />
</ScreenQuad>
</TresCanvas>
</template>
1 change: 1 addition & 0 deletions docs/component-list/components.ts
Original file line number Diff line number Diff line change
@@ -90,6 +90,7 @@ export default [
{ text: 'Plane', link: '/guide/shapes/plane' },
{ text: 'Ring', link: '/guide/shapes/ring' },
{ text: 'RoundedBox', link: '/guide/shapes/rounded-box' },
{ text: 'ScreenQuad', link: '/guide/shapes/screen-quad' },
{ text: 'Sphere', link: '/guide/shapes/sphere' },
{ text: 'Superformula', link: '/guide/shapes/superformula' },
{ text: 'Tetrahedron', link: '/guide/shapes/tetrahedron' },
12 changes: 12 additions & 0 deletions docs/guide/shapes/screen-quad.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
# ScreenQuad

A triangle that fills the screen when using a THREE.OrthographicCamera. Useful for full-screen fragment shader work.

## Usage

<<< @/.vitepress/theme/components/ScreenQuadDemo.vue

## References

* [Why a triangle?](https://www.cginternals.com/en/blog/2018-01-10-screen-aligned-quads-and-triangles.html)
* [Simple postprocessing in THREE.js](https://luruke.medium.com/simple-postprocessing-in-three-js-91936ecadfb7)
87 changes: 87 additions & 0 deletions playground/vue/src/pages/shapes/ScreenQuadDemo.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
<script setup lang="ts">
import { TresCanvas } from '@tresjs/core'
import { ScreenQuad } from '@tresjs/cientos'
import { RawShaderMaterial, RGBFormat, Vector2, WebGLRenderTarget } from 'three'
import OverlayInfo from '../../components/OverlayInfo.vue'

const vertexShader = `precision highp float;
attribute vec2 position;
void main() {
// Look ma! no projection matrix multiplication,
// because we pass the values directly in clip space coordinates.
gl_Position = vec4(position, 1.0, 1.0);
}`

const fragmentShader = `precision highp float;
uniform sampler2D uScene;
uniform vec2 uResolution;
void main() {
vec2 uv = gl_FragCoord.xy / uResolution.xy;
// Do your cool postprocessing here
gl_FragColor = vec4(step(0.5, uv.x), step(0.5, uv.y), 0.0, 1.0);
}`

const resolution = new Vector2(100, 100)

const target = new WebGLRenderTarget(resolution.x, resolution.y, {
format: RGBFormat,
stencilBuffer: false,
depthBuffer: true,
})

const mat = new RawShaderMaterial({
fragmentShader,
vertexShader,
uniforms: {
uScene: { value: target.texture },
uResolution: { value: resolution },
},
})

let r: WebGLRenderer
function onReady({ renderer }) {
r = renderer.value
renderer.value.getDrawingBufferSize(resolution)
target.setSize(resolution.x, resolution.y)
mat.uniforms.uResolution.value = resolution
}

const imgData = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAABN0lEQVR4Xu3buw2EMAAFQbsNQvpvijYu4JcTzkkOlgJW9vBSz+0c11j4O+bCh/s42gzU/rBArecINFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtVIM+vaXfKf12fOM/595nVYFC5EAh5psKNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtNFAsgHMtFIPeNY3T4VOOUisAAAAASUVORK5CYII='

let intervalId: ReturnType<typeof setInterval>
onMounted(() => {
intervalId = setInterval(() => {
if (r) {
// NOTE: Update material resolution to make it
// follow screen size changes.
r.getDrawingBufferSize(mat.uniforms.uResolution.value)
}
}, 1000 / 30)
})

onUnmounted(() => {
clearInterval(intervalId)
mat.dispose()
target.dispose()
})
</script>

<template>
<OverlayInfo>
<h1>ScreenQuad</h1>
<p>This component is intended for creating (slightly faster) custom, full-screen post-processing.</p>
<h2>Setup</h2>
<p>In this scene, there is a <code>ScreenQuad</code>. The <code>ScreenQuad</code> has a custom material. The material's vertex shader places it "in front of the camera".</p>
<h2>Preview</h2>
<img :src="imgData" />
</OverlayInfo>
<TresCanvas
window-size
clear-color="#111"
@ready="onReady"
>
<ScreenQuad>
<primitive :object="mat" />
</ScreenQuad>
</TresCanvas>
</template>
5 changes: 5 additions & 0 deletions playground/vue/src/router/routes/shapes.ts
Original file line number Diff line number Diff line change
@@ -24,6 +24,11 @@ export const shapesRoutes = [
name: 'RoundedBox',
component: () => import('../../pages/shapes/RoundedBoxDemo.vue'),
},
{
path: '/shapes/screenQuad',
name: 'ScreenQuad',
component: () => import('../../pages/shapes/ScreenQuadDemo.vue'),
},
{
path: '/shapes/on-demand-shapes',
name: 'on-demand Shapes',
23 changes: 23 additions & 0 deletions src/core/shapes/ScreenQuad.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<script setup lang="ts">
// NOTE:
// Based on https://github.com/pmndrs/drei/blob/master/src/core/ScreenQuad.tsx
// reference https://medium.com/@luruke/simple-postprocessing-in-three-js-91936ecadfb7
// and @gsimone ;)
import * as THREE from 'three'
import { shallowRef } from 'vue'

const geometry = new THREE.BufferGeometry()
const vertices = new Float32Array([-1, -1, 3, -1, -1, 3])
geometry.boundingSphere = new THREE.Sphere()
geometry.boundingSphere.set(new THREE.Vector3(), Infinity)
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 2))

const meshRef = shallowRef()
defineExpose({ instance: meshRef })
</script>

<template>
<TresMesh ref="meshRef" :geometry="geometry" :frustum-culled="false">
<slot></slot>
</TresMesh>
</template>
2 changes: 2 additions & 0 deletions src/core/shapes/index.ts
Original file line number Diff line number Diff line change
@@ -10,6 +10,7 @@ import Octahedron from './Octahedron.vue'
import Plane from './Plane.vue'
import Ring from './Ring.vue'
import RoundedBox from './RoundedBox.vue'
import ScreenQuad from './ScreenQuad.vue'
import Sphere from './Sphere.vue'
import Superformula from './Superformula.vue'
import Tetrahedron from './Tetrahedron.vue'
@@ -30,6 +31,7 @@ export {
Plane,
Ring,
RoundedBox,
ScreenQuad,
Sphere,
Superformula,
Tetrahedron,