I've generated a generated a GLB file using khronos's SharpGLTF libraries and have got the model loading in cesium, the model appears correctly. The problem is the material for the model does not show. I have tested the generated GLB in other viewers and the material does show.
I'm using the following code in cesium:
var entity = viewer.entities.add({
name : 'url_here',
position : center,
orientation : orientation,
model : {
uri : 'url_here',
minimumPixelSize : 128,
maximumScale : 20000,
}
});
also tried
var model = scene.primitives.add(Cesium.Model.fromGltf({
id: 'here',
url: 'url here'
modelMatrix : modelMatrix,
scale : 1.0,
}));
I've tried using the color modifiers for cesium and the only option that responds is "color" which doesn't help as it doesn't apply any lighting to the color.
Below is a picture of what cesium is outputting. However there should be more effects to the material than just red. It seems to respect only KnownChannel.BaseColor and that's it.
Any ideas?
Related
I am using open layers 6 lib for map rendering and events.
my application needed same like this example http://viglino.github.io/ol-ext/examples/layer/map.geoimage.html i.e. Example have ol.source.GeoImage..
I have tried
I am displaying raster images on map using this sample code is
const url = imagurl;
const extent = [0, 0, imageData.width, imageData.height];
const projection = new Projection({
code: 'xkcd-image',
units: 'pixels',
extent,
});
const imageLayer = new ImageLayer({
source: new Static({
url,
projection,
imageExtent: extent,
}),
});
and i am using affine transformation lib and returns scaling, rotation and transformation..
its giving the values
scaling : 327.805670381418,327.805670381418
rotation : -0.1310210334156003
transformation : 7179251.8557908312,6022627.228704552
i need to add this code into ol-6 static image source
source: new ol.source.GeoImage(
{ image,
imageCenter: transformation,
imageScale: scaling,
imageRotate: rotation,
//projection: pixelProjectio
})
suggest or help on this.. thanks in advance.. and save my days..
I am trying to draw a Markups in forge Viewer but it's working when loading extension
var extensionOptions = {
hideIssuesButton: false,
hideFieldIssuesButton: true,
};
// Use the `viewer` reference to call `loadExtension` with the extension name and the extension options:
viewer["3d"].loadExtension('Autodesk.BIM360.Extension.PushPin', extensionOptions).then(function (extension)
{
PushPinExtensionHandle = extension;
});
but draw Thickness and Font Size is very small.How to increases the size?
Please find the attachment for reference.
here are some properties which u can adjust to set the size and width of your Text
var textgeometry = new Three.TextGeometry(text,
Object.assign({}, {
font: fonts,
bevelEnabled: false,
curveSegments: 2,
bevelThickness: 0,
color: 0xFFA500,
bevelSize: 0.21,
height: 3,
size: 1
}));
here is the link for reference how u can add Text Geometry
TextGeometry
It looks to me the post is about how to set font size and freehand thickness of Markup in Forge Viewer. I am not sure why the code snippet is about loading Pushpin Extension.
anyway, let me try to answer the question of font size and freehand thickness.
Markup Core extension provides the parameter to set font style when you create text. The parameter is a json, in which font-size is one key. So to set font size, the code is like below:
markupExt.enterEditMode();
var text1= new Autodesk.Viewing.Extensions.Markups.Core.CreateText(markupExt,2333,
{x:10,y:10}, {x:100,y:100},'My Test String Small', {"font-size":5})
text1.execute();
var text2= new Autodesk.Viewing.Extensions.Markups.Core.CreateText(markupExt,2333,
{x:30,y:30}, {x:130,y:130},'My Test String Big', {"font-size":20})
text2.execute();
As to thickness, the other post tells now to set stroke width.
Autodesk Forge Viewer Markup Style Object
I am trying to create a special material for a Cesium Polygon, which has to incorporate a hatched area with an outline.
Now, from the base materials I can use "Stripe", so i can create my graphic like this:
var viewer = new Cesium.Viewer('cesiumContainer');
var degrees_array = [
92.1470732697006,
21.954465553476467,
99.08781126987297,
32.557089696031916,
68.66765785924682,
24.272023818381587
];
var polygon = viewer.entities.add({
name : 'polygon',
polygon : {
hierarchy : Cesium.Cartesian3.fromDegreesArray(degrees_array),
extrudedHeight: 0,
material : new Cesium.StripeMaterialProperty(
{
evenColor:Cesium.Color.GRAY,
oddColor:Cesium.Color.WHITE,
orientation: Cesium.StripeOrientation.HORIZONTAL,
repeat:100,
offset:0
}
),
//outline is ignored by WebGL
//outline: true,
//outlineColor:Cesium.Color.BLACK,
//outlineWidth:1
}
});
//since designing an outline is not possible with polygon we create a custom polylineGraphics:
var outline_array = degrees_array;
// since loop is not available for polylineGraphics we add the first point positions
outline_array.push(outline_array[0],outline_array[1]);
var outline = viewer.entities.add({
polyline : {
positions : Cesium.Cartesian3.fromDegreesArray(outline_array),
width : 5,
material : Cesium.Color.GRAY,
clampToGround:true,
zIndex:0
}
});
viewer.zoomTo(polygon)
see sandcastle link
My questions:
- is there a way to rotate the stripes, so that they appear as diagonally hatched
- can zoom be omitted for the Stripe material, so that it is always displayed with the same line width?
Thanks a lot!
If you are still wondering. You can rotate the stripes by using stRotation
polygon: {
hierarchy: <posititons>
stRotation: Cesium.Math.toRadians(45),
material: stripeMaterial,
}
I think my Cesium globe is too dark. Here is two images: one from Cesium and other from OpenLayers, both from same location and same geoserver layer.
Already set viewer.scene.globe.enableLighting = true; as you can see in image below:
My setup:
viewer = new Cesium.Viewer('cesiumContainer',{
timeline: false,
animation: false,
baseLayerPicker: false,
geocoder : false,
infoBox : false,
selectionIndicator : true,
navigationHelpButton : false,
});
viewer.scene.globe.enableLighting = true;
var scene = viewer.scene;
var imageryLayers = scene.imageryLayers;
baseLayer = imageryLayers.get(0);
imageryLayers.remove( baseLayer );
var baseProvider = new Cesium.WebMapServiceImageryProvider({
url : myUrl,
layers : 'osm:OSMMapa',
parameters : {
transparent : true,
format : 'image/png',
tiled : true,
}
});
imageryLayers.addImageryProvider( baseProvider );
how can I set my view to be brighter like OpenLayers and show the image as it realy is?
A couple of things you can try here:
First, enableLighting can be false, if you don't care about time or don't want the "night side" of the globe to be dark. It's counter-intuitive that turning off lighting would make things brighter, but really this flag is about turning off the lighting calculations, replacing them with full brightness always.
But the more effective thing, at least in the short term, may be to turn off HDR:
viewer.scene.highDynamicRange = false;
"High Dynamic Range" applies to fancy 3D models and their reflections, and in current versions of Cesium it also involves a color processing technique called tone-mapping. But if you're not using any of that, then this is all irrelevant to you, and is actually hurting the contrast of the images.
The behavior of this may change in a future release to be a little smarter about when and how tone-mapping is applied. But for now, the workaround is to turn off HDR.
I have this code, which adds polyline primitive to scene.
function createPolyline(startPosition, endPosition) {
Cesium.SimplePolylineGeometry({
positions : [startPosition, endPosition]
});
var geometry = Cesium.SimplePolylineGeometry.createGeometry(polyline);
return scene.primitives.add(new Cesium.Primitive({
geometryInstances : new Cesium.GeometryInstance({
geometry : geometry,
attributes : {
color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.SPRINGGREEN)
}
}),
appearance : new Cesium.PerInstanceColorAppearance()
}));
}
How do I set width of this polyline?
The recommended way to add a polyline is with the Entity API, like this
var greenLine = viewer.entities.add({
polyline : {
positions : [startPosition, endPosition],
width : 5,
material : Cesium.Color.SPRINGGREEN
}
});
But, if you want to skip the Entity layer and use the Primitive Graphics layer directly, you can do that too. Your sample code above has some issues. First, you're calling the Cesium.SimplePolylineGeometry constructor without the new keyword, and without saving the result, and this is not the correct use pattern for this kind of code. Second, the SimplePolylineGeometry class itself does not support line widths greater than what the WebGL implementation supports, which on Windows machines running ANGLE, is only 1 pixel wide. To get around this limitation, use the normal (non-simple) polylines, like this:
var polylines = scene.primitives.add(new Cesium.PolylineCollection());
var polyline = polylines.add({
positions : Cesium.PolylinePipeline.generateCartesianArc({
positions : [startPosition, endPosition]
}),
material : Cesium.Material.fromType('Color', {
color : Cesium.Color.SPRINGGREEN
}),
width: 5
});
SimplePolylineGeometry does not support line width. You need to use PolylineGeometry instead and pass the "width" options to the constructor. Also, you should be using PolylineColorAppearance as your appearance, not PerInstanceColorAppearance.