I need to blur render but not whole, only fragments. Frozen "glass" shapes will flowed over (SVG animated transparent shapes over WebGl animation). The problem is local frozen effect. Whether is some effect composer or context.readPixels + FastBlur.js makes sense or maybe css + masks ? Thank you for help.
I did it:
WebGl shader blur (Three.js render passes) + mask texture (image = additional invisible canvas element where shapes are drawn). SVG is an independent element, but gives information about kind of shapes and positions for mask texture and displays shapes of course. A bit crazy but works and very fast.
Related
Hello i am new to ThreeJS and texture mapping,
Let's say I have a 3D-Plane with the size of (1000x1000x1). When I apply a texture to it, it will be repeated or it will be scaled, to atleast filling the full plane.
What I try to achieve is, to change the scaling of the picture on the plane at runtime. I want the Image to get smaller and stop fitting the full plane.
I know there is a way to map each face to a part of a picture, but is it also possible to map it to a negative number in the picture, so it will be transparent?
My question is:
I UV-Mapped a Model in Blender and imported it with the UV-Coords into my ThreeJS-Code. Now i need to scale the texture down, like described before. Do I have to remap the UV-Cords or do i have to manipulate the image and add an transparent edge?
Further, will I be able on the same way to move the image on the picture?
I already achieved this kind of usage in java3d by manipulating bufferedImages and drawing them onto transparent ones. I am not sure this will be possible using javascript, so i want to know if it is possible by texture-mapping.
Thank you for your time and your suggestions!
This can be done using mapping the 3d -plane to a canvas ,where the image is drawn (fabric.js can be used for canvas drawings).Inshort set the canvas as texture for the 3d model
yourmodel.material.map = document.getElementById("yourCanvas");
Hope it helps :)
Yes. In THREE, there are some controls on the texture object..
texture.repeat, and texture.offset .. they are both Vector2()s.
To repeat the texture twice you can do texture.repeat.set(2,2);
Now if you just want to scale but NOT repeat, there is also the "wrapping mode" for the texture.
texture.wrapS (U axis) and texture.wrapT (V axis) and these can be set to:
texture.wrapS = texture.wrapT = THREE.ClampToEdgeWrapping;
This will make the edge pixels of the texture extend off to infinity when sampling, so you can position a single small texture, anywhere on the surface of your uv mapped object.
https://threejs.org/docs/#api/textures/Texture
Between those two options (including texture.rotation) you can position/repeat a texture pretty flexibly.
If you need something even more complex.. like warping the texture or changing it's colors, you may want to change the UV's in your modeller, or draw your texture image into a canvas, modify the canvas, and use the canvas as your texture image, as described in ArUns answer. Then you can modify it at runtime as well.
Can you please explain the difference between texture and sprite? When we zoom in a sprite, it appears blurry because it's basically an image. Is it the same for a texture?
I read this comment on the image below online:
The background layers are textures and not sprites.
Can someone explain?
Sprites and Textures are both images.
A Sprite is an image that can be used as a 2d object, which have coordinates (x, y) and which you can move, destroy or create during the game.
A Texture is also an image, but that will be used to change the appearence of an object. E.g. you can set a texture for the faces of a cube, a layer (like the background) or even a sprite. But as texture are not objects, you can't move them during the game.
Sprite is the image that is moving related to static images (for example background). Sprites are usually planes (rectangles) with texture on it. Sprites are used in 3D graphics for tricks such as Billboard or Impostor. In 2D games sprites are used instead of moving objects and also as backgrounds.
Texture is an raster image that is to be projected on polygonal object. It worth using textures each time when using polygons is expensive for given objects details (for example bullet dots)
If I render a big texture 1024x1024 but almost the texture is transparent, only about 40% of the texture have data (not transparent). Does it more slower than render a texture with less transparent part?
I have this question because when render a animation, it is more easy to set the pivot of sprite in the image itself, so when I render i only need to draw each sprite at the center of my object's position.
It is more performant, because your image will be smaller. But I doubt it will make a noticeable difference. So, the way you are doing it right now is good, thats how I do it.
I have started learning CANVAS. After i started drawing some basic shapes, i wanted to make some modifications to them. For example, I am confused of how to modify length and width of rectangle. Should i have to clear the canvas and redraw or can i capture the object of that rectangle like the objects in java script.
The canvas is a raster graphics surface. modifying length and width of a rectangle is a vector action. It is possible to scale a raster, but losses in quality can/will occur. You can use vector graphics in the form of SVG. But if it is only a rectangle, use a div with a border overlay-ed on your canvas.
WebGl doesn't support line thickness. So when I need to highlight some line, I just draw rectangle around it. But when I zoom scene it looks pretty scary.
There are two ways I see now:
1) Recalculate rectangle width according to canvas.width into model coordinates.
2) Place all zoom-invariant objects under separate matrix (I use scenejs) and recalculate their positions after each mousewheel
I don't like both of this solution. So I wonder: is there good workaround to make items zoom invariant?
Another way around that (not the most efficient one though) might be to use shaders. In our WebGL app, we render highlighted primitives into a texture and then blur it back on screen to add a "selection glow effect".