I am trying to achieve a slanted divider effect with WebGL. The desired outcome is something like a view with 1 interactive divider (slanted) at the middle that allows the user to drag and view a mountain terrain with different colours.
The effect should look like this: slanted draggable divider
I have experimented based on a few examples I found online, but both methods used THREE.WebGLRenderer.setScissor() for the effect, and the results are rectangles.
May I know what are the alternatives to achieve the effect? Stencil buffer and masking? Better THREE.Camera setup? glViewport?
I have tried using react-three/drei's View and changing the CSS clip-path property, but it seems to stay rectangular.
Examples:
https://threejs.org/examples/webgl_multiple_scenes_comparison
https://codepen.io/sunnysideup8888/pen/poVvyvR
SetScissor implementation in the examples:
renderer.setScissor(0, 0, splitPos, sizes.height);
renderer.render(sceneL, camera);
renderer.setScissor(splitPos, 0, sizes.width, sizes.height);
renderer.render(sceneR, camera);
Related
I am attempting to create a view for Android whose background appears to blur the view's content for which it is on top. This is nothing new and has been done before. I based my implementation on what was done here: Dimezis/BlurView.
The approach uses the pre-draw event from the view tree observed to draw a view to an internal canvas. The canvas is backed by a bitmap. A blur is applied to the bitmap before it is drawn to the canvas passed to BlurView's draw method. This approach works well for all standard views/controls and is a common method used to achieve the blur view effect.
However, it does not handle Skia-based drawings that may be on the view that is blurred.
Skia, via SKCanvasView, is used heavily for controls within the App so this is kind of a deal breaker if I cannot find a solution. The issue is very odd. Anything that is drawn on the canvas view appears to be scaled and translated when drawn to the internal canvas.
Screen-Shot - blur label v. blur SKCanvasView
The screen-shot show the difference in results from blurring a label with text v. blurring a red circle drawn on an SKCanvasView.
For reference, I've posted a sample project on GitHub. It can be found here: jaredballen/BlurView
I'd really appreciate any input that can be shared.
When you invoke _rootView?.Draw(_internalCanvas); the circle SKCanvasView is internally rendering itsself using _internalCanvas size (same as _blurView size) resulting in demonstrated behavour. My guess this could be solved by making _internalCanvas of the same size as the _rootView, rendering root view as blurred, then clipping and translating the result inside the smaller _blurView.
Just trying to up the stroke width a little on the country polygons for three-globe.
There doesn't appear to be a helper function for this material or any settings beyond color.
I had the bright idea of looping through all the children of the globe object, very crude but:
for (let i in Globe.children[0].children[4].children){
const child = Globe.children[0].children[4].children[i];
child.children[1].material.linewidth = 3;
child.children[1].material.color = new THREE.Color('rgba(255,255,255,1)');
}
This appears to have no effect on the line width. It does, however, successfully change the color, so I think I'm close, though I really hope there's a better way than this.
I'm sorry to inform you that the .linewidth property is very poorly supported due to OpenGL limitations. You can see an explanation in the LineBasicMaterial.linewidth documentation
Due to limitations of the OpenGL Core Profile with the WebGL renderer on most platforms linewidth will always be 1 regardless of the set value.
You'll run into this issue if you're using THREE.Line or THREE.LineSegments. However, there is an alternative you could use with THREE.Line2, which circumvents the limitation by drawing lots of instanced gl.TRIANGLES instead of gl.LINE. You can see it in action in this example. In fact, there are 3 demos of fat lines, each one with a slightly different implementation. You would then have to substitute the outlines of the country with your own fat lines.
I have a need. I need to make a window. The glass on the window is transparent. I have found some examples:
https://threejs.org/examples/#webgl_materials_shaders_fresnel
https://threejs.org/examples/#webgl_materials_cubemap_refraction
The background of these examples is static pictures.
My background is dynamic. How can I do it?
Maybe you can use THREE.Refractor like shown in this example. It allows you to create a refractive see-through surface. You might have to adjust the respective shader program in order to achieve your intended visual result (the default shader of THREE.Refractor does not perform any distortions).
i am trying to use the combined camera (found it under "Examples").
the problem is when i use it in Orthographic mode i still see the arrow and the box helper like in perspective view.
for example, when i am trying to zoom in with the mouse scroll, i can see the plane in the same size (as it supposed to be in orthographic view) but the arrows and the small box between the arrows is getting smaller or bigger.
when i tried to debug it at the renderer function i saw the camera is still in orthograpic mode when it render the arrows.
any idea how can i make all the object to be in orthograpic view but still use the combined camera?
edit:
i am not sure which part of the code i should post so i add a picture to describe my problem.
you can see that i am in an orthographic camera and i'm trying to zoom in and i can see the axis arrow getting bigger or smaller.
the difference between the plane when zooming
Found a possible answer which worked for me:
under TransformControls.js
change the update function to:
scale = (camera.inOrthographicMode == true)? 100 : worldPosition.distanceTo(camPosition ) / 6 * scope.size;
I'd like to create some mechanism that provides a text overlay on top of my 3D scene at certain times (such as when clicking a mouse button for instance.)
I'm going over the tutorials on github and notice things like the THREE.TextGeometry class. Using it I can put 3D text in the scene, but it may be a bit more than I need-- what I'm really after is a way to put some text on, say, a black background, overlay it on the scene, then move it out of the way when done. Does anyone know of good ways to do this in three.js? (If the THREE.TextGeometry class is a good way to do this that's fine, I'm just not sure how to do the overlay bit.)
Use HTML. It's super easy and powerful especially if you just need an overlay. With CSS, you can also achieve things like semi-transparent background. If you want to have it "blend" to scene, i.e. have perspective etc. you can use THREE.CSS3DRenderer which will transform divs based on camera you supply.