Comments (13)
I don't see anything wrong there, i guess it's something else. Could you set up a codesandbox?
But either way, you can either pierce into the uniform (given that you have created it previously):
<animated.material uniforms-dispFactor-value={animatedValue} />
or sometimes the shader has variables, here's a demo where i bind the scrolloffset to a glitch shader:
https://codesandbox.io/embed/y3j31r13zz
from react-three-fiber.
now it works: https://codesandbox.io/s/x37p4kk6p4
but that's still weird. it should be able to pierce into the value, but for some reason it only works when i write the object around it, for which it needs to interpolate.
i'll fix this tomorrow, then you will be able to just do: uniforms-xxxxx-value={animatedProp}
from react-three-fiber.
@marceloavf this is what worked for me in some code from many months ago, maybe you can try writing your code in a similar way and see if it works? Here it is:
import { animated } from "@react-spring/three"
import { shaderMaterial } from "@react-three/drei"
import { extend } from "@react-three/fiber"
import glsl from "glslify"
import * as THREE from "three"
import fragmentShader from "./fragment.glsl"
import vertexShader from "./vertex.glsl"
const CanvasImageMaterial = shaderMaterial(
{
u_mode: 0,
u_texture: new THREE.Texture(),
u_border_color: new THREE.Color(),
u_border_thickness: new THREE.Vector2(0, 0),
u_inset: new THREE.Vector4(0, 0, 0, 0),
u_handle_length: 0.5,
u_scale: 1,
},
glsl(vertexShader),
glsl(fragmentShader)
)
export type CanvasImageMaterialImpl = {
u_mode?: { value: number }
u_texture?: { value: THREE.Texture }
u_border_color?: { value: THREE.Color }
u_border_thickness?: { value: THREE.Vector2 }
u_inset?: { value: THREE.Vector4 }
u_handle_length?: { value: number }
u_scale?: { value: number }
} & JSX.IntrinsicElements["shaderMaterial"]
extend({ CanvasImageMaterial })
declare global {
namespace JSX {
interface IntrinsicElements {
canvasImageMaterial: CanvasImageMaterialImpl
}
}
}
export const AnimatedCanvasImageMaterial = animated(
(props: CanvasImageMaterialImpl) => <canvasImageMaterial {...props} />
)
There's also a blog post I wrote around the same time (hopefully not too out of date) on this topic https://bearjam.dev/blog/react-three-fiber-shaders-setup
from react-three-fiber.
Sure, at the moment it's very much inspired by your own sandbox.
https://codesandbox.io/s/w5902o607
I'm pretty sure there's something wrong with value: progress
since replacing it with a proper value between 0...1 shows the images.
from react-three-fiber.
yes, you're putting a animatedValue into the uniforms. progress is not a value, it's a class. but either way, somegthing's wrong, will have to look into it.
from react-three-fiber.
Thanks! I think I understand a lot more how this works now, thanks again.
from react-three-fiber.
i fixed the problem, here's the updated sandbox: https://codesandbox.io/s/x37p4kk6p4 it's released under @1.3.7
from react-three-fiber.
PS. that the sprites are upside down has to do with a bug in current three, i've opened an issue and they've already fixed it, will go in their next patch. You can avoid it by resizing the images, must be divisible by 2 or something like that.
from react-three-fiber.
Thanks! I don't know if you've noticed since they're rather abstract the images are upside down for some reason, from the source code I'm looking at, you might want to try:
const { gl } = useThree()
const [texture1, texture2, dispTexture] = useMemo(
() => {
const loader = new THREE.TextureLoader()
const texture1 = loader.load(url1)
const texture2 = loader.load(url2)
const dispTexture = loader.load(disp)
dispTexture.wrapS = dispTexture.wrapT = THREE.RepeatWrapping
texture1.magFilter = texture2.magFilter = THREE.LinearFilter
texture1.minFilter = texture2.minFilter = THREE.LinearFilter
texture1.anisotropy = gl.capabilities.getMaxAnisotropy()
texture2.anisotropy = gl.capabilities.getMaxAnisotropy()
return [texture1, texture2, dispTexture]
},
[url1, url2, disp]
)
(Anisotropy isn't needed but it's in the code, I'm not sure what it does even after reading the docs).
EDIT: sorry hadn't seen your PS, but magFilter
apparently solves it.
from react-three-fiber.
The issue was this one: mrdoob/three.js#15896
from react-three-fiber.
Hey, sorry to bump this but I'm trying something very similar.
i'll fix this tomorrow, then you will be able to just do: uniforms-xxxxx-value={animatedProp}
This is what I'm after! But in the linked sandbox https://codesandbox.io/s/x37p4kk6p4 this isn't the approach that's actually used. In the sandbox you extend THREE.ShaderMaterial
, write getters and setters, and then in App there's useFrame
and ref mutations.
This is my code for piercing with animated values: https://codesandbox.io/s/github/mysterybear/r3f-image-crop/tree/spring-animated-shader-material?file=/src/App.js
It doesn't import animated
and use it because every time I try to do that I run into some problem (edit: with no meaningful error; best case scenario is blank canvas, similar to OP). I've tried importing from @react-spring/three
as well as /core
, /web
. Piercing with a regular array works, anything I try with animated
I can't get working.
Cheers!
from react-three-fiber.
Ah my woes here are because of pmndrs/react-spring#1430 (comment) so can disregard my previous comment... Couple things I needed to do:
-
wrap the result of drei's
shaderMaterial
inanimated
-
pierce each element of a vector, e.g.
uniforms-u_foo-value-x={to(...)}
rather thanuniforms-u_foo-value={to(...)}
Hopefully 2 will be fixed in react-spring soon tho!
from react-three-fiber.
@mysterybear How can I extend shaderMaterial with animated?
...
const WaveShaderMaterial = shaderMaterial(
...
)
extend({ WaveShaderMaterial })
const NoiseSphere = ({ theme }) => {
...
return (
<animated.mesh ref={refMesh}>
<animated.planeGeometry attach="geometry" args={[2, 2]} />
<waveShaderMaterial ref={ref} attach="material" />
</animated.mesh>
)
}
...
Tried many ways but all returns errors to me, so I can't modify uniforms with spring, only lerp or direct input works
from react-three-fiber.
Related Issues (20)
- Canvas eventHandler: onWebGLContextLost, onWebGLContextRestored HOT 2
- Cannot catch error HOT 1
- Is it possible to use react-three-fiber with React-Native CLI application? HOT 1
- help: using the onPointerDown event of a` <group/>` and the event.handlers of `useThree()` together HOT 1
- Types: Removed classes from three.js are still available at R3F HOT 3
- Rendering `<Context.Consumer.Provider>` is not supported HOT 1
- R3F & StereoCamera
- Breaking changes in React experimental branch HOT 1
- Cannot read properties of undefined (reading 'boundingSphere') HOT 1
- Forced landscape HOT 1
- load gltb file show error `Uncaught Invalid typed array length: 64548` HOT 1
- Updating from 8.15.19 to 8.16.1 causes 'demand' frameloop issues with @react-spring/three HOT 1
- Rendering issue HOT 1
- How to draw 2D views in 3D Canvas with ReactNative? HOT 1
- R3F raycast hits wrong object HOT 1
- It's not possible to preventDefault on onPointerDown HOT 1
- Both example of the "drei" sampler are not working, (cant load hdr file) HOT 1
- Something wrong happens with texture that passed to JSX attribute "map" of material
- createPortal()'s state merging uses stale data HOT 1
- React Native: THREE.GLTFLoader: Couldn\'t load texture in react native
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-three-fiber.