I'm developing an app with blazor client-side and I need to render a 3D scene.
I have an issue and I guess it is material-related.
I have a composition of parallelepipeds where one of them is fully opaque and the others are transparent.
Depending on the camera angle, the transparent ones completely disappear:
Example where everything is visible:
Example with 2 missing:
Example with all missing:
Code for transparent parallelepipeds
var geometry = new THREE.CubeGeometry(item.xDimension * _scene.normalizer, item.yDimension * _scene.normalizer, item.zDimension * _scene.normalizer);
var material = new THREE.MeshBasicMaterial();
var box = new THREE.Mesh(geometry, material);
box.material.color = new THREE.Color("gray");
box.material.opacity = 0.8;
box.material.transparent = true;
Code for the camera:
var camera = new THREE.PerspectiveCamera(60, width / height, 0.1, 100);
camera.position.set(1.3, 1.3, 1.3);
camera.lookAt(0, 0, 0);
I'm using OrbitControls and every object size is between 0 an 1 (_scene.normalizer is for that purpose)
Do you know why this is happening?
Edit:
I found it being a material depth function issue. Do you know which should I use?
Thanks,
Transparency is tricky with WebGL because a transparent object writes to the depthmap, and then the renderer assumes that subsequent objects behind it are occluded so it skips drawing them. You could avoid this by playing with the material's .depthTest and .depthWrite attributes (see the docs):
box.material.color = new THREE.Color("gray");
box.material.opacity = 0.8;
box.material.transparent = true;
box.material.depthWrite = false;
Related
While drawing a line on canvas, it creates multiple dots within the line. I am using easelJS for canvas drawing. Please refer the attached screenshot.
Code for line draw is as below.
Line with multiple dots
scope.init = function(){
stage = new createjs.Stage(element[0].id);
stage.enableDOMEvents(true);
createjs.Touch.enable(stage);
shellWrapper = new createjs.Container();
shellWrapper.id = mainContainerId;
shellWrapper.hitArea = new createjs.Shape(new createjs.Graphics().f('#000').dr(0,0,cacheWidth,cacheHeight));
shellWrapper.cache(0,0,cacheWidth,cacheHeight); // Cache it.
stage.addChild(shellWrapper);
drawing = new createjs.Shape();
shellWrapper.addChild(drawing);
stage.update();
}
scope.mouseDown = function(event) {
oldX = event.stageX;
oldY = event.stageY;
shellWrapper.addEventListener('pressmove', function(evt){
drawing.graphics.beginStroke(color)
.setStrokeStyle(size, 'round')
.moveTo(oldX, oldY)
.lineTo(evt.stageX, evt.stageY);
oldX = evt.stageX;
oldY = evt.stageY;
shellWrapper.updateCache(erase?'destination-out':'source-over');
drawing.graphics.clear();
stage.update();
});
};
This happens because a single line has its limits rounded, so it actually look like this:
The rounded edge goes a little bit (depending on stroke width) out of the line boundary so it gets over the past line drawn. This line overlay causes your drawing to look like it has small circles, but it does not, and thats because you're using a semi transparent color on the stroke.
To solve the issue, make the stroke color opaque and add transparency to the whole drawing by using myDisplayObj.alpha = 0.5;
This way individual lines will be fully opaque in relation to each other but they will be semi transparent relative to other display objects in the scene.
How does one crop a RenderTargetBitmap? The equivalent of:
RenderTargetBitmap bmp = new RenderTargetBitmap();
await bmp.RenderAsync(element , cropRect );
This question seems simple enough, yet there seems to be no real way of doing it. The above semantically sums up my usage case. I want to render part of a Xaml tree. It's a perfectly legit use case.
Saving to a file, which seems to be the most common way of cropping, is really not a good answer. Sure, maybe one day I will save a cropped image into my media library, but not today.
There are BitmapTransform and BitmapDecoder classes, which among other functions allow you to crop images. But I failed to make them work with RenderTargetBitmap, each time bumping on HRESULT: 0x88982F50 exception when trying to pass pixel data from one source to another.
As for different approach, I can think of bringing big guns and implementing it with Win2D. It might not be the most convenient solution, but it does work:
var renderTargetBitmap = new RenderTargetBitmap();
await renderTargetBitmap.RenderAsync(element, width, height);
var pixels = await renderTargetBitmap.GetPixelsAsync();
var currentDpi = DisplayInformation.GetForCurrentView().LogicalDpi;
var device = CanvasDevice.GetSharedDevice();
var imageSource = new CanvasImageSource(device, width, height, currentDpi);
using (var drawingSession = imageSource.CreateDrawingSession(Colors.Transparent))
using (var bitmap = CanvasBitmap.CreateFromBytes(
drawingSession, pixels.ToArray(), width, height,
DirectXPixelFormat.B8G8R8A8UIntNormalized, drawingSession.Dpi))
{
var cropEffect = new CropEffect
{
Source = bitmap,
SourceRectangle = cropRect,
};
drawingSession.DrawImage(cropEffect);
}
ResultImage.Source = imageSource;
Note that I'm not Win2D expret and someone more knowledgeable might want to make corrections to this code.
I have a scene with 2 renderers sized exactly the same and put on top of each other sharing the same Perspective Camera like this:
var renderer = new THREE.WebGLRenderer();
renderer.antialias = true;
renderer.setClearColor(0xFFFFFF, 1);
renderer.setSize(Params.win.w, Params.win.h);
renderer.domElement.style.position = 'absolute';
renderer.domElement.style.top = '0px';
renderer.domElement.style.left = '0px';
renderer.domElement.style.zIndex = '-9999';
document.body.appendChild(renderer.domElement);
var scene = new THREE.Scene();
var cssRenderer = new THREE.CSS3DRenderer();
cssRenderer.setSize(Params.win.w, Params.win.h);
cssRenderer.domElement.style.position = 'absolute';
cssRenderer.domElement.style.top = '0px';
cssRenderer.domElement.style.left = '0px';
cssRenderer.domElement.style.zIndex = '-9998';
document.body.appendChild(cssRenderer.domElement);
var cssScene = new THREE.Scene();
//animate loop
renderer.render(scene, camera);
cssRenderer.render(cssScene, camera);
CSS Objects can be placed directly over objects in the WebGL Scene simply by referencing their positions and setting the position of the CSS Objects.
However when I add this effect:
var effectFXAA = new THREE.ShaderPass(THREE.FXAAShader);
effectFXAA.uniforms['resolution'].value.set(1 / (Params.win.w), 1 / (Params.win.h));
effectFXAA.renderToScreen = true;
var composer = new THREE.EffectComposer(renderer);
composer.setSize(Params.win.w, Params.win.h);
composer.addPass(new THREE.RenderPass(scene, camera));
composer.addPass(effectFXAA);
And call the composer to render instead like this composer.render();
My CSS Objects are no longer placed correctly.
The perspective is off since zooming will slide the CSS Objects around while the WebGL Objects retain their positions.
Any idea why the extra shader passes might be changing the perspective in the WebGL rendering resulting in the CSS Objects not staying aligned properly and sliding around?
So I figured out that despite the fact that only the composer is calling render, the original renderer also needs to have it's size reset in whatever resize method you have.
The composer is based on the original renderer, and I had commented out the resizing of this object and only resized the composer.
This is something I must have overlooked, hope this helps others!
camera.aspect = Params.win.w / Params.win.h;
camera.updateProjectionMatrix();
//MUST ALSO UPDATE RENDERER SIZE
renderer.setSize(Params.win.w, Params.win.h);
cssRenderer.setSize(Params.win.w, Params.win.h);
//composer
effectFXAA.uniforms['resolution'].value.set(1 / Params.win.w, 1 / Params.win.h);
composer.setSize(Params.win.w, Params.win.h);
Is there any way to change the sc-waveform container background from #efefef without having to load the waveform.js library? I have enough libraries loading already and the conainer bg conflicts with our site background color
I am experiencing the same issue and have had this problem before ( Overlay visible areas of transparent black silhouette PNG with pattern using CSS3 or JS ).
Here is an example with your waveform: http://jsfiddle.net/eLmmA/3/
$(function() {
var canvas = document.createElement('canvas');
canvas.width = 1800; // must match
canvas.height = 280; // must match
var canvas_context = canvas.getContext("2d");
var img = new Image();
img.onload = function(){
var msk = new Image();
msk.onload = function(){
canvas_context.drawImage(img, 0, 0);
canvas_context.globalCompositeOperation = "destination-in";
canvas_context.drawImage(msk, 0, 0);
canvas_context.globalCompositeOperation = "source-over";
};
msk.src = 'WAVEFORM_IMAGE.EXT';
}
img.src = 'OVERLAY_IMAGE.EXT';
document.body.appendChild(canvas);
});
I think I understand what you mean. You want to change the color of the waveform background, the gray stuff around the waveform:
The problem here is that waveforms you get from SoundCloud API are represented as partly transparent PNG images, where waveform itself is transparent and the chrome around it is gray (#efefef) color.
So, unless the library you want to use for waveform customisation is using HTML5 canvas, you won't be able to use change the color of that chrome (so no, not possible with either HTML5 Widget API or Custom Player API). And you have to use waveform.js or the likes (or modify the waveform image on canvas yourself).
You could try to experiment with newest CSS filters (webkit only for now) and SVG filters, and possibly some MS IE filters for older IE versions, but I am not sure you'd manage to just change the color.
given a PDF that is rendered in the browser using pdfjs, are there functions to do the following basic view operations:
rotate
flip
zoom
If not, what are the best strategies I can use to do the operations above?
You can set rotation when you getting viewport form PdfPage object:
var viewport = pdfPage.getViewport(scale, rotation);
If you want to immediately set all the parameters, you can clone viewport, created with scale = 1:
var defaultViewport = pdfPage.getViewport(1);
var neededViewport = defaultViewport.clone({scale: needScale, rotation: needRotation, dontFlip: true});