I am using CanvasRenderer to render numerous Sprite objects. I am mapping a texture (PNG image) to the Sprites. I'd like to be able to change the color of the texture programmatically.
With the WebGLRenderer, I can use ParticleSystem and ParticleSystemMaterial to achieve this. Here's a live demo of setting color to this texture (http://wxalert.info/private/dv/ball.png) with that technique: http://wxalert.info/private/dv/demo.html
But since CanvasRenderer does not support ParticleSystem, I am using Sprites instead with a SpriteBasicMaterial. Here's a live demo of this: http://wxalert.info/private/dv/demo2.html
I'd like to be able to set the color with CanvasRenderer just like with WebGLRenderer, but I'm not sure if this is possible.
One thought was perhaps to load the image to an HTML5 canvas element, apply the color there, and then load the canvas context from the material. But any other suggestions would be greatly appreciated.
UPDATE: Here's an example of kind of what I was thinking of doing if using the HTML5 canvas: http://wxalert.info/private/dv/html5canvas.html. Basically, I would do the color manipulation there and then just load the canvas from the material. But wasn't sure if there was a simpler or better way.
Related
I am trying to load svg and use it as a texture for some parts of my 3d scene in react-three-fiber. The issue I am trying to fix is that somet of the textures are quite blurry even though I have big raster images.
I can load an svg using react-three-drei's component, and it looks super crisp.
Is there a way I can load svg as a texture for a mesh? Or should I go about it as I somehow link the component to the mesh and mimic its size and movement during animations?
Not sure how I can do this.
I've tried adding the svg files directly in my gltf file as texture with mimetype image/svg+xml but react three-fiber gives an error about enconding.
Also I've tried using useTexture() with the svg source which does work, however blurry as the raster textures.
I want to know if it is possible for me to achieve this somehow. Or if there is an alternative to making my scene render crisper.
Hi sadly textures are raster images only…
There is technique called SDF 2d but this would also involve converting svg to image…
You can check it here https://github.com/dy/svg-path-sdf
The way it works, it coverts svg to raster under the hood, for you, maybe there is some options for it, however I would recommend process your svg to png or jpg manually…
I am not sue of this is even possible but instead of setting a texture to a jpg like THREE.TextureLoader().load('./texture1.jpg')
I want to set the texture to an INLINE SVG (I want to animate with javascript GSAP).
Is this possible? Probably not :(
Sorry, it's not. You can't use a SVG file as a texture. However, you can load SVG files in three.js via THREE.SVGLoader and then create shape meshes from the resulting path data.
But keep in mind this is a one-time operation. If you animate the SVG, you won't see any effect after the loading process.
I have a particleSystem which contains hundreds of thousands of particles and I can render it with webglrenderer in Three.js, But it seems that mobile devices don't support webgl and I may use css3drender.
I've tried to change webglrender to css3drender and it turns out that the css3drender can't render my particleSystem, I've searched on goole and can't get any examples using css3drender to render particlesystem ,either.
What I want to know is whether I can use css3drender to render my particleSystem, thanks.
In Monotouch, I need to create a basic animation of an image moving along a path while animating it's image content with a sprite sheet or replacing the content CGImage, everything i try i can't combine both animations. I tried subclassing the CALayer and animate custom properties or combine animations in group nothing seems to work. What's the best way to produce this kind of animation?
To get a smooth animation, you want to think of what CAlayers represent: they are a handle to a texture that live in the GPU space. To get smooth animation you can control a few of their properties, but arbitrary changes like rendering the data again wont work fine.
What you should do is put all of your images in the sprite sheet, and then animate the ContentsRect property of the CALayer.
In Three.js r47, I used CanvasRenderer to draw some objects with image texture. Then I upgrade Three.js to r49 and all these objects dont show up anymore. The change log of r49 reads that "Removed Lamber Texture support in CanvasRenderer". So I think this is the reason.
My question is does Three.js support an alternative to draw texture objects by CanvasRenderer?
Thanks.
Try using MeshBasicMaterial instead?