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.
Related
I'm getting started with three.js, and I don't want to use WebGLRenderer (renderer = new THREE.WebGLRenderer();) at all. Instead I want to use renderer = new THREE.CanvasRenderer();.
I don't want to use WebGLRenderer due to lack of support.
How can I have a camera orbit without using WebGLRenderer, and use canvas only in three.js?
The three.js site has a small but effective set of Canvas samples as well. Just take a look at the source of https://threejs.org/examples/#canvas_camera_orthographic: it has an orbiting camera. It is orthographic, which you might not want, but the source should be self-explanatory on how to change it to a perspective camera.
I’m using three.js inside an experimental augmented-reality web browser. (The browser is called Argon. Essentially, Argon uses Qualcomm’s Vuforia AR SDK to track images and objects in the phone camera. Argon sends the tracking information into Javascript, where it uses transparent web pages with three.js to create 3D graphics on top of the phone video feed.) My question is about three.js, however.
The data Argon sends into the web page allows me to align the 3D camera with the physical phone camera and draw 3D graphics such that they appear to align with the real world as expected. I would also like to have some of the things in the physical world occlude the 3D graphics (I have 3D models of the physical objects, because I’ve set the scene up or because they are prepared objects like boxes that are being tracked by Vuforia).
I’m wondering if folks have suggestions on the best way to accomplish this occlusion with three.js. Thanks.
EDIT: it appears that the next version of three.js (R71) will have a simpler way to do this, so if you can use the dev branch (or just wait), you can do this much more easily. See this post: three.js transparent object occlusion
MY ORIGINAL ANSWER (without using the new features in R71):
I think the best way to do this is (to avoid extra work by creating new rendering passes for example) to modify the WebGL renderer (src/renderers/WebGLRenderer.js) and add support for a new kind of object, perhaps call them “occlusionObjects”.
If you look in the renderer, you will see two current object lists, opaqueObjects and transparentObjects. The renderer sorts the renderable objects into these two lists, so that it can render the opaque objects first, and then the transparent objects after them. What you need to do is store all of your new objects into the occlusionObjects list rather than those two. You will see that the opaque and transparent objects are sorted based on their material properties. I think here, you may want to add a property to an object you want to be an occluder (“myObject.occluder = true”, perhaps), and just pull those objects out.
Once you have the three lists, look what the render() function does with these object lists. You’ll see a couple of places with rendering calls like this:
renderObjects( opaqueObjects, camera, lights, fog, true, material );
Add something like this before that line, to turn off writing into the color buffers, render the occlusion objects into the depth buffer only, and then turn color buffer writes back on before you render the remaining objects.
context.colorMask( false, false, false, false);
renderObjects( occluderObjects, camera, lights, fog, true, material );
context.colorMask(true, true, true, true);
You’ll need to do this in a couple of places, but it should work.
Now you can just mark any objects in your scene as “occluder = true” and they will only render into the depth buffer, allowing the video to show through and occluding any opaque or transparent objects rendered behind them.
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.
I want to generate the top and perspective view of an object.
Input: A 3d object, maybe .obj or .dae file.
Output: the image files presenting the top and front view of the loaded object.
Here is some expected output:
The perspective view of a chair
The top view of a chair:
Can anyone give me some suggestions to solve this problem? Demo may be preferred
You could create a small three.js scene with your obj or collada-file loaded using the appropriate loaders. (see examples of the specific loaders). Then create the necessary cameras you want to have in the scene. See examples for orthographic and perspective cameras that come with three.js, too.
To produce the images you want, you could use the toDataURL function, see this thread here and use google
Three.js and HTML5 Canvas toDataURL
in essence, after the objects are loaded, you could do something like:
renderer.render(scene, topViewCamera);
dataurl = canvas.toDataURL();
renderer.render(scene, perspectiveCamera);
dataurl2 = canvas.toDataURL();
I think you could also use 2 renderTargets and then use those for output, too, but maybe if you are new to three.js, start with the toDataURL() method from HTML5.
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?