feat(useTexture)!: refactor to be a real composable with a state by alvarosabu · Pull Request #949 · Tresjs/tres

alvarosabu · 2025-02-28T16:47:12Z

BREAKING CHANGE: useTexture no longer returns the plain texture, it now returns and object with reactive data (texture|s), isLoading, error) and a load method, can be used both sync and async (suspense)

Completely rewrite useTexture composable with more robust loading mechanism
Add comprehensive type support for single and multiple texture loading
Implement reactive loading states (isLoading, error)
Update component and tests to match new composable implementation
Remove deprecated texture loading patterns (PBR is going to have its own composable)
Enhance error handling and async loading behavior

BREAKING CHANGE: useTexture no longer returns the plain texture, it now returns and object with reactive data (texture|s), isLoading, error) and a load method, can be used both sync and async (suspense) - Completely rewrite `useTexture` composable with more robust loading mechanism - Add comprehensive type support for single and multiple texture loading - Implement reactive loading states (isLoading, error) - Update component and tests to match new composable implementation - Remove deprecated texture loading patterns - Enhance error handling and async loading behavior

- Update `useTexture` to return a Promise-like object - Enhance type definitions to support async/await usage - Maintain existing reactive state and loading mechanism - Improve type safety and composable flexibility

pkg-pr-new · 2025-02-28T18:24:16Z

Open in StackBlitz

npm i https://pkg.pr.new/@tresjs/core@949

commit: 4e52f43

…osable - Create detailed documentation for `useTexture` composable - Add extensive code examples covering various use cases - Include API reference and feature highlights - Provide insights into loading textures with Tres.js - Enhance documentation with practical examples and best practices

- Implement `usePBRTexture` composable for simplified PBR texture management - Support concurrent texture loading with async/await and reactive states - Add comprehensive documentation with usage examples and API reference - Create playground examples demonstrating sync and async texture loading - Implement robust error handling and loading state tracking - Enhance type safety with detailed TypeScript interfaces

- Remove unnecessary `nextTick` import from Vue - Simplify test file dependencies - Maintain clean and focused test imports

- Remove the unused `error` variable from the `useTexture` composable - Simplify the component by eliminating unnecessary error tracking - Maintain clean and focused code structure

- Implement `UsePBRTexture` component for declarative PBR texture loading - Add new component to `src/composables/usePBRTexture/component.vue` - Update documentation with component usage example - Enhance playground with new PBR texture component example - Expose component in composables index for easy importing - Support scoped slot for flexible texture rendering

Tinoooo · 2025-03-29T10:27:56Z

@@ -0,0 +1,233 @@
+# usePBRTexture
+
+![PBR Maps explained](https://learnopengl.com/img/pbr/textures.png)


question: Are we allowed to use their pictures like so?

Their website do not mention any restriction on their image, but the downloadable versions of the Learn OpenGL book are licensed under the Creative Commons Attribution-NonCommercial 3.0 Unported License, which allows for sharing and adapting the material for non-commercial purposes, provided appropriate credit>

But I think I will create one myself

Tinoooo · 2025-03-29T11:20:07Z

+  emissiveMap: Texture | null
+}
+
+export interface PBRTextureResult {


suggestion: Imo all the async results in the library should have the same structure. Therefore I suggest using a generic type instead.

Tinoooo · 2025-03-29T11:29:24Z

+const textureData = reactive<PBRTextureResult>(usePBRTexture(props.paths, props.manager))
+
+// Handle loading state
+textureData.promise
+  .then(() => emit('loaded'))
+  .catch(err => emit('error', err))
+</script>
+
+<template>
+  <slot
+    :data="textureData.data"
+    :is-loading="textureData.isLoading"
+    :error="textureData.error"
+  ></slot>


suggestion: I suggest omitting the reactive.

Suggested change

const textureData = reactive<PBRTextureResult>(usePBRTexture(props.paths, props.manager))

// Handle loading state

textureData.promise

.then(() => emit('loaded'))

.catch(err => emit('error', err))

</script>

<template>

<slot

:data="textureData.data"

:is-loading="textureData.isLoading"

:error="textureData.error"

></slot>

const { isLoading, error, data, promise } = usePBRTexture(props.paths, props.manager)

// Handle loading state

promise

.then(() => emit('loaded'))

.catch(err => emit('error', err))

</script>

<template>

<slot

:data="data"

:is-loading="isLoading"

:error="error"

></slot>

Tinoooo · 2025-03-29T12:22:32Z

-const data = await reactive(useTexture(props))
+// Type guard to handle the union type
+const textureData = Array.isArray(props.path)
+  ? reactive<UseTextureReturn<Texture[]>>(useTexture(props.path, props.manager))


suggestion: The reactive should not be responsible for typing what useTexture returns. The return type should be solely defined by useTexture itself. Therefore useTexture should have a generic return type.

I provided a poc here.

Tinoooo · 2025-03-29T12:26:58Z

 <template>
-  <slot :textures="data"></slot>
+  <slot
+    :data="textureData.data"


suggestion: The type of data is Texture | Texture[] | null right now. This is not desirable as the type is directly dependent to the type of the prop path. I suggest making this component a generic component so the return type is well defined.

I refactored the component as a poc here.

Co-authored-by: Tino Koch <17991193+Tinoooo@users.noreply.github.com>

- Deleted the `usePBRTexture` composable and its associated files, including documentation and example components, to streamline the codebase. - Updated the VitePress configuration to remove references to the now-removed composable. - This change simplifies the composables directory and reduces maintenance overhead.

- Added a `disposeTexture` function to safely dispose of textures when they are no longer needed, preventing memory leaks. - Updated the `useTexture` composable to call `disposeTexture` before loading new textures and during component unmounting. - Removed the immediate option from the texture watcher in `SimpleTexture.vue` for cleaner logic.

alvarosabu · 2025-04-03T15:03:05Z

+ * @param {(error: ErrorEvent) => void} options.onError - Optional error callback
+ * @returns {Texture} The loaded texture
+ */
+export function loadTextureSync(


@Tinoooo should we export this? I'm hesitant. I prefer people to use useTexture

I think it is not worth it. There is not much the function does.

alvarosabu · 2025-04-12T06:35:35Z

We decided to simplify and move this functionality to cientos #1156

alvarosabu marked this pull request as draft February 28, 2025 16:49

alvarosabu added p3-significant High-priority enhancement (priority) breaking-change v5 labels Feb 28, 2025

alvarosabu added this to Team Board Feb 28, 2025

alvarosabu added this to the v5 milestone Feb 28, 2025

alvarosabu added 2 commits February 28, 2025 20:11

alvarosabu marked this pull request as ready for review March 1, 2025 12:24

alvarosabu added 3 commits March 1, 2025 13:26

test(useTexture): remove unused Vue import in test file

829f499

- Remove unnecessary `nextTick` import from Vue - Simplify test file dependencies - Maintain clean and focused test imports

refactor(useTexture): remove unused error variable in example

69f6f68

- Remove the unused `error` variable from the `useTexture` composable - Simplify the component by eliminating unnecessary error tracking - Maintain clean and focused code structure

alvarosabu requested a review from Tinoooo March 14, 2025 18:58

alvarosabu linked an issue Mar 18, 2025 that may be closed by this pull request

Several composables are not truly composables. #922

Closed

4 tasks

alvarosabu mentioned this pull request Mar 18, 2025

v5 #921

Closed

Tinoooo requested changes Mar 29, 2025

View reviewed changes

alvarosabu and others added 3 commits March 31, 2025 11:12

Update docs/composables/use-pbr-texture.md

83ca77e

Co-authored-by: Tino Koch <17991193+Tinoooo@users.noreply.github.com>

feat: refactor to leverage useAsyncState under the hood

d5a56ce

Merge branch 'next' into feature/922-use-texture

3968578

alvarosabu requested a review from Tinoooo April 2, 2025 16:48

alvarosabu added 2 commits April 3, 2025 08:53

alvarosabu commented Apr 3, 2025

View reviewed changes

alvarosabu mentioned this pull request Apr 4, 2025

V5 Tresjs/cientos#606

Closed

17 tasks

alvarosabu mentioned this pull request Oct 6, 2025

Move core's useTexture to cientos #1156

Closed

4 tasks

alvarosabu closed this Apr 12, 2025

github-project-automation Bot moved this to Done in Team Board Apr 12, 2025

alvarosabu deleted the feature/922-use-texture branch February 27, 2026 16:21

		@@ -0,0 +1,233 @@
		# usePBRTexture

		![PBR Maps explained](https://learnopengl.com/img/pbr/textures.png)

Uh oh!

Uh oh!

Conversation

alvarosabu commented Feb 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pkg-pr-new Bot commented Feb 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

alvarosabu Apr 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

alvarosabu commented Apr 12, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

alvarosabu commented Feb 28, 2025 •

edited

Loading

pkg-pr-new Bot commented Feb 28, 2025 •

edited

Loading

alvarosabu Apr 3, 2025 •

edited

Loading