I´m using React Three Fiber with "Drei" and want to use the the billboards. But I could only figure out how to change the color of the billboard, but not how to add a texture.
I tried it like that, but can't find any documentation on billboards and don`t know what arguments i can pass.
<Billboard map={textureBillboard}/>
Here you see how to change color, but not how to add a texture:
https://drei.react-spring.io/?path=/story/abstractions-billboard--billboard-st
Hope someone can help me.
thanks
you can add texture as a meshBasicMaterial:
<Billboard
position={[0,7,1]}
args = {[44,30]}>
<meshBasicMaterial attach="material" map = {billboardTexture}/>
</Billboard>
Related
To clarify I am using React-Three-Fiber
I would like to create a bunch of points on the canvas, beforehand I was using buffered arrays of colors and positions to plot the points. Here is my attempt at getting it work with buffered positions and using shaderMaterial along with a fragmentShader
<points>
<bufferGeometry attach="geometry">
<bufferAttribute
attach="attributes-position"
count={positions.length / 3}
array={positions}
itemSize={3}
usage={THREE.DynamicDrawUsage}
/>
</bufferGeometry>
<shaderMaterial fragmentShader={fragmentShader}/>
</points>
I am able to use the shader with other geometries so I know the mistake is in the way I am trying to use points. Using pointsMaterial or meshStandardMaterial worked fine, could anyone help me understand how to go about using shaders with points in R3F?
I've been trying to make a small horizontal scroll with react three fiber so I can later add some WebGL Distorsion on the elements and even though i succeeded in the most basic way, there are still some things that need improvement :
(here is the codesandbox corresponding :https://codesandbox.io/s/horizontal-scroll-with-react-three-fiber-c0okfu?file=/src/Scene.js)
first and foremost I want a smooth scroll and can't seem to be able to make it, I used the lerp function to make it but the result doesn't work very well :
let scroll = 0;
scroll = (scroll - scrollTargetMapped) * 0.03;
// any other frame, groupRef.current is undefined, don't really know why
// but because of it, i must put my logic inside an if loop
if (groupRef.current) {
groupRef.current.position.x = THREE.MathUtils.lerp(
scroll,
-scrollTarget,
0.01
);
}
secondly, the elements on my scene are placed kind of in a random way and the scene is not at all responsive. I would love to mimic the html logic and put my first element like 50px away from the left side of the screen but not sure if it's really possible with react threejs :)
If someone has any answer to one of those question, I take it 🙂
Thanks in advance !
For those interested, I managed to find a solution, using one of drei components : ScrollControl, it works perfectly !
https://codesandbox.io/s/horizontal-scroll-with-react-three-fiber-c0okfu?file=/src/Scene.js
For more info on the said component, check out the doc : https://docs.pmnd.rs/drei/controls/scroll-controls
const texture = useLoader(THREE.TextureLoader, 'assets/texture.png')
return (
<mesh position={[-0.00008, -0.00008, -1.26303]}>
{/*Alioth*/}
<sphereBufferGeometry
attach="geometry"
args={[1.26068]}
>
<meshStandardMaterial map={texture} attach="material"/>
</sphereBufferGeometry>
</mesh>
)
I have the above code, the sphere does get rendered but the texture is not applied, when I look at my network tab I can see this texture is found and loaded correctly.
As far as I can tell this is what I am supposed to do per the documentation.
I have also tried to use #react-three/drei helper classes but I cannot get this texture to be loaded.
What am I missing?
It turns out this code works fine, I had just set the size of the sphere geometry too small, I had to do this to scale to a level where it would not cause a massive performance issue but have found a solution to this.
I'm a new for OpenGL ES with GLKit, I want to create two FBO for my program. but I don't know how to bind the default FBO, anyone who can help me ?
Any help or advice would be much appreciated.
this problem is basic, you just need add one line like this:
[((GLKView *) self.view) bindDrawable];
this method can reset to GLKit default FBO
I am now working on an eye tracking project. In this project I am tracking eyes in a webcam video (resolution if 640X480).
I can locate and track the eye in every frame, but I need to locate the pupil. I read a lot of papers and most of them refer to Alan Yuille's deformable template method to extract and track the eye features. Can anyone help me with the code of this method in any languages (matlab/OpenCV)?
I have tried with different thresholds, but due to the low resolution in the eye regions, it does not work very well. I will really appreciate any kind of help regarding finding pupil or even iris in the video.
What you need to do is to convert your webcam to a Near-Infrared Cam. There are plenty of tutorials online for that. Try this.
A Image taken from an NIR cam will look something like this -
You can use OpenCV then to threshold.
Then use the Erode function.
After this fill the image with some color takeing a corner as the seed point.
Eliminate the holes and invert the image.
Use the distance transform to the nearest non-zero value.
Find the max-value's coordinate and draw a circle.
If you're still working on this, check out my OptimEyes project: https://github.com/LukeAllen/optimeyes
It uses Python with OpenCV, and works fairly well with images from a 640x480 webcam. You can check out the "Theory Paper" and demo video on that page also. (It was a class project at Stanford earlier this year; it's not very polished but we made some attempts to comment the code.)
Depending on the application for tracking the pupil I would find a bounding box for the eyes and then find the darkest pixel within that box.
Some psuedocode:
box left_location = findlefteye()
box right_location = findrighteye()
image_matrix left = image[left_location]
image_matrix right = image[right_location]
image_matrix average = left + right
pixel min = min(average)
pixel left_pupil = left_location.corner + min
pixel right_pupil = right_location.corner + min
In the first answer suggested by Anirudth...
Just apply the HoughCirles function after thresholding function (2nd step).
Then you can directly draw the circles around the pupil and using radius(r) and center of eye(x,y) you can easily find out the Center of Eye..