I'm implementing 3D demo application using Babylonjs library for 3D Demo.I'm importing 3D model from S3 and adding texture image on top of material in Reactjs.
But when i add texture image on top of material, rest of area on 3D model gets black color and i want get rid of it. Code works fine in Babylon playground but fails in React app.
Here is the source code
var mat = new BABYLON.CustomMaterial("mat", scene);
mat.diffuseTexture = new BABYLON.Texture(textureImage, scene, false, false);
materialedMeshes.forEach(mesh => mesh.material = mat);
mat.emissiveColor = new BABYLON.Color3(1, 1, 1);
// mat.diffuseColor = new BABYLON.Color3(1, 0, 1);
// mat.specularColor = new BABYLON.Color3(0.5, 0.6, 0.87);
// mat.emissiveColor = new BABYLON.Color3(1, 1, 1);
// mat.ambientColor = new BABYLON.Color3(0.23, 0.98, 0.53);
mat.diffuseTexture.uOffset = -0.1000;
mat.diffuseTexture.vOffset = -1.1800;
mat.diffuseTexture.uScale = 1.2200;
mat.diffuseTexture.vScale = 2.2200;
mat.diffuseTexture.uAng = Math.PI;
mat.diffuseTexture.wrapU = BABYLON.Constants.TEXTURE_CLAMP_ADDRESSMODE;
mat.diffuseTexture.wrapV = BABYLON.Constants.TEXTURE_CLAMP_ADDRESSMODE;
mat.Fragment_Custom_Alpha(`
if (baseColor.r == 0. && baseColor.g == 0. && baseColor.b == 0.) {
baseColor.rgb = vec3(0.85, 0.85, 0.85);
}
baseColor.rgb = mix(vec3(0.85, 0.85, 0.85), baseColor.rgb, baseColor.a);
`)
Related
I'm try to study Scenekit and SCNPhysicsVehicle, I created a simple car as per picture below:
i wrote the following code that should load the physics to the model and place it to the scene.
func setupVeicles(nodePos: SCNVector3){
// load file usdz
let truck = loadAssetWithName(nameFile: "car", nameNode: "car", type: "usdz", scale: SCNVector3(1, 1, 1))
let chassie = truck.childNode(withName: "Chassie", recursively: true)!
// add chassie at position touch
chassie.position = SCNVector3(nodePos.x, nodePos.y+0.1, nodePos.z)
//Set the physic body
let body = SCNPhysicsBody.dynamic()
body.physicsShape = SCNPhysicsShape(node: chassie)
body.categoryBitMask = BodyType.car.rawValue //2 int, assegnato solo a quel oggetto
body.collisionBitMask = BodyType.floor.rawValue //1 con cosa puo collidere
body.contactTestBitMask = BodyType.floor.rawValue //1 attiva il delegato
body.allowsResting = false
body.mass = 5
body.restitution = 0.1
body.friction = 0.5
body.rollingFriction = 0
chassie.physicsBody = body
// Load the wheel
let wheelFL = chassie.childNode(withName: "WheelFL", recursively: true)!
let wheelFR = chassie.childNode(withName: "WheelFR", recursively: true)!
let wheelBL = chassie.childNode(withName: "WheelBL", recursively: true)!
let wheelBR = chassie.childNode(withName: "WheelBR", recursively: true)!
// test rotate , but not work
// wheelFL.eulerAngles = SCNVector3(deg2rad(90), 0, 0)
// wheelPhysic
let phywheelFL = createPhysicsVehicleWheel(wheelNode: wheelFL, position: SCNVector3(-0.212, -0.085, 0.146))
let phywheelFR = createPhysicsVehicleWheel(wheelNode: wheelFR, position: SCNVector3(-0.212, -0.085, -0.15))
let phywheelBL = createPhysicsVehicleWheel(wheelNode: wheelBL, position: SCNVector3(0.182, -0.085, 0.15))
let phywheelBR = createPhysicsVehicleWheel(wheelNode: wheelBR, position: SCNVector3(0.182, -0.085, -0.15))
let physicsVehicle = SCNPhysicsVehicle(chassisBody: chassie.physicsBody!, wheels: [phywheelFL,phywheelFR,phywheelBL,phywheelBR])
self.arView.scene.physicsWorld.addBehavior(physicsVehicle)
self.arView.scene.rootNode.addChildNode(chassie)
}
func createPhysicsVehicleWheel(wheelNode: SCNNode, position: SCNVector3) -> SCNPhysicsVehicleWheel {
let wheel = SCNPhysicsVehicleWheel(node: wheelNode)
wheel.connectionPosition = position
wheel.axle = SCNVector3(x: -1.0, y: 0, z: 0)
wheel.maximumSuspensionTravel = 4.0
wheel.maximumSuspensionForce = 100
wheel.suspensionRestLength = 0.08
wheel.suspensionDamping = 2.0
wheel.suspensionStiffness = 2.0
wheel.suspensionCompression = 4.0
wheel.radius = 0.04
wheel.frictionSlip = 0.9
return wheel
}
Can't understand why my wheel are rotate 90 deg as you cans se on the picture:
Why this wheel are like this? how to rotate them.. I tried to rotate the node but nothing happen..
Download the file rc_car.dae from the Scenekit Demo App that Apple provided in the past.
https://github.com/NXAristotle/appleSample/tree/master/SceneKitVehicleDemo/SceneKitVehicle/resources
You will see, that the geometry is a bit more complex, containing subnodes on the wheels. I ran into a similar issue. Then I used Blender to adapt the geometry the same way as it is in rc_car.dae to my own model. It was quite a bit of work.
Export it to DAE and use it in SceneKit.
If you need code examples, I can provide, but what you made looks quite good to me.
I am facing a problem while using encodedImage. When a user logins into the app, the first form after successful login has an image. And the image is causing me issues upon retrieving it.
When the user captures an image in the app, I convert it to a base64 string which I send to the server. The code for that is:
ImageIO img = ImageIO.getImageIO();
ByteArrayOutputStream out = new ByteArrayOutputStream();
img.save(et, out, ImageIO.FORMAT_JPEG, 1);
byte[] ba = out.toByteArray();
String userImage64 = Base64.encodeNoNewline(ba);
et is the captured image. So I store the string userImage64 in the server.
When I retrieve the base64, I decode it and convert it to an EncodedImage. The code is:
String url = new JSONObject(result.getResponseData()).getString("photo");
byte[] b = Base64.decode(url.getBytes());
Image icon = EncodedImage.create(b);
When I am on the simulator, everything flows smoothly. The images display and everything works very well.
My issue is, when I put the app on an android device, it doesn't work. It shows me a toast of successful login and just stops there. So i did some debugging and realized that issue is with the three lines of converting from base64 to image. When I comment out the three lines, everything works very well. Where could I be going wrong?
EDIT
Below is the code I use to capture a photo:
String i = Capture.capturePhoto();
if (i != null) {
try {
final Image newImage = Image.createImage(i);
Image roundedMask = Image.createImage(rich.minScreensize() / 4, rich.minScreensize() / 4, 0xff000000);
Graphics gra = roundedMask.getGraphics();
gra.setColor(0xffffff);
gra.fillArc(0, 0, rich.minScreensize() / 4, rich.minScreensize() / 4, 0, 360);
Object masked = roundedMask.createMask();
cropImage(newImage, rich.minScreensize() / 4, rich.minScreensize() / 4, et -> {
if (editing) {
try {
ImageIO img = ImageIO.getImageIO();
ByteArrayOutputStream out = new ByteArrayOutputStream();
img.save(et, out, ImageIO.FORMAT_JPEG, 1);
byte[] ba = out.toByteArray();
userImage64 = Base64.encodeNoNewline(ba);
et = et.applyMask(masked);
logoimage.setIcon(et);
///removed unnecessary code
logoimage.getComponentForm().revalidate();
} catch (IOException ex) {
}
} else {
et = et.applyMask(masked);
logoimage.setIcon(et);
}
});
} catch (IOException ex) {
Log.p("Error loading captured image from camera", Log.ERROR);
}
}
Inside there is code I use to crop the photo and that is code is:
private void cropImage(Image img, int destWidth, int destHeight, OnComplete<Image> s) {
Form previous = getCurrentForm();
Form cropForm = new Form("", new LayeredLayout());
Label toobarLabel = new Label("New Holder", "Toolbar-HeaderLabel");
cropForm.setTitleComponent(toobarLabel);
Toolbar mainToolbar = new Toolbar();
mainToolbar.setUIID("ToolBar");
cropForm.setToolbar(mainToolbar);
Label moveAndZoom = new Label("Move and zoom the photo to crop it");
moveAndZoom.getUnselectedStyle().setFgColor(0xffffff);
moveAndZoom.getUnselectedStyle().setAlignment(CENTER);
moveAndZoom.setCellRenderer(true);
cropForm.setGlassPane((Graphics g, Rectangle rect) -> {
g.setColor(0x0000ff);
g.setAlpha(150);
Container cropCp = cropForm.getContentPane();
int posY = cropForm.getContentPane().getAbsoluteY();
GeneralPath p = new GeneralPath();
p.setRect(new Rectangle(0, posY, cropCp.getWidth(), cropCp.getHeight()), null);
if (isPortrait()) {
p.arc(0, posY + cropCp.getHeight() / 2 - cropCp.getWidth() / 2,
cropCp.getWidth() - 1, cropCp.getWidth() - 1, 0, Math.PI * 2);
} else {
p.arc(cropCp.getWidth() / 2 - cropCp.getHeight() / 2, posY,
cropCp.getHeight() - 1, cropCp.getHeight() - 1, 0, Math.PI * 2);
}
g.fillShape(p);
g.setAlpha(255);
g.setColor(0xffffff);
moveAndZoom.setX(0);
moveAndZoom.setY(posY);
moveAndZoom.setWidth(cropCp.getWidth());
moveAndZoom.setHeight(moveAndZoom.getPreferredH());
moveAndZoom.paint(g);
});
final ImageViewer viewer = new ImageViewer();
viewer.setImage(img);
cropForm.add(viewer);
cropForm.getToolbar().addMaterialCommandToRightBar("", FontImage.MATERIAL_CROP, e -> {
previous.showBack();
s.completed(viewer.getCroppedImage(0).
fill(destWidth, destHeight));
});
cropForm.getToolbar().addMaterialCommandToLeftBar("", FontImage.MATERIAL_CANCEL, e -> previous.showBack());
cropForm.show();
}
I have universal app created for Win 10 mobile which captures photo. I want to add stamp (some text) to my photo. Is it possible? It seems working with bitmap is really difficult in universal applications
Check this link:
How to add wartermark text/image to a bitmap in Windows Store app
Or better use Win2D library (you can find it on NuGet) and snippet like this:
CanvasDevice device = CanvasDevice.GetSharedDevice();
CanvasRenderTarget offscreen = new CanvasRenderTarget(device, 500, 500, 96);
cbi = await CanvasBitmap.LoadAsync(device, "mydog.jpg");
using (var ds = offscreen.CreateDrawingSession())
{
ds.DrawImage(cbi);
var format = new CanvasTextFormat()
{
FontSize = 24,
HorizontalAlignment = CanvasHorizontalAlignment.Left,
VerticalAlignment = CanvasVerticalAlignment.Top,
WordWrapping = CanvasWordWrapping.Wrap,
FontFamily = "Tahoma"
};
var tl = new CanvasTextLayout(ds, "Some text", format, 200, 50); // width 200 and height 50
ds.DrawTextLayout(tl, 10, 10, Colors.Black);
tl.Dispose();
}
using (var stream = new InMemoryRandomAccessStream())
{
stream.Seek(0);
await offscreen.SaveAsync(stream, CanvasBitmapFileFormat.Png);
BitmapImage image = new BitmapImage();
image.SetSource(stream);
img.Source = image;
}
I have this styles in api 1.0
var s = new YMaps.Style();
s.iconStyle = new YMaps.IconStyle();
s.iconStyle.offset = new YMaps.Point(-1, -30);
s.iconStyle.href = "http:www.example.com/images/1.png";
s.iconStyle.size = new YMaps.Point(29, 28);
s.iconStyle.shadow = new YMaps.IconShadowStyle();
s.iconStyle.shadow.offset = new YMaps.Point(2, -12);
s.iconStyle.shadow.href = "http:www.example.com/images/2.png";
s.iconStyle.shadow.size = new YMaps.Point(29, 7);
here I add this styles to placemark
var placemark = new YMaps.Placemark(new YMaps.GeoPoint(lat, long),
{hasBalloon: false,
style: s
});
placemark.setHintContent(mystring);
placemark.enableHint();
map.addOverlay(placemark);
how create this styles in api 2.0 ?
I solve like this :
placemark.options.set('iconImageHref', 'http:www.example.com/images/1.png');
placemark.options.set('iconImageOffset', [-1, -30]);
placemark.options.set('iconImageSize', [28,29]);
placemark.options.set('iconShadowImageHref', 'http:www.example.com/images/2.png');
placemark.options.set('iconShadowImageOffset', [2, -12]);
placemark.options.set('iconShadowImageSize', [29, 7]);
I am using Nevron Charting Control ver.11.1.17.12 in application. I am facing problem in drawing the chart correct with the DateTimeScaleConfigurator. Here are following problem:
Series Bar overlapping each other if series count increases.
Series getting out of the Axis lines.
X Axis Scale automatically add previous year December and next year Jan in the scale which cause the chart to have blank area in case of Surface Chart.
//code snippet to draw Bar Chart Series
NBarSeries bar = new NBarSeries();
bar.UniqueId = new Guid(outputVariable.UniqueId);
bar.Name = outputVariable.LegendText;
chart.Series.Add(bar);
bar.HasBottomEdge = false;
bar.MultiBarMode = chart.Series.Count == 1 ? MultiBarMode.Series : MultiBarMode.Clustered;
// bar.InflateMargins = true;
bar.UseZValues = false;
indexOfSeries = chart.Series.IndexOf(bar);
ConfigureChartSeries(bar, indexOfSeries, outputVariable);
SetSeriesAxisInformation(bar, outputVariable.Unit);
bar.UseXValues = true;
foreach (DataRow row in seriesDataTable.Rows)
{
bar.XValues.Add(Convert.ToDateTime(row["TimeStamp"]).ToOADate());
}
code snippet to Add Surface Chart Series
chart.Enable3D = true;
chart.BoundsMode = BoundsMode.Stretch;
(chart as NCartesianChart).Fit3DAxisContent = true;
chart.Projection.SetPredefinedProjection(PredefinedProjection.OrthogonalTop);
chart.LightModel.EnableLighting = false;
chart.Wall(ChartWallType.Back).Visible = false;
chart.Wall(ChartWallType.Left).Visible = false;
chart.Wall(ChartWallType.Floor).Visible = false;
// setup Y axis
chart.Axis(StandardAxis.PrimaryY).Visible = false;
// setup Z axis
NAxis axisZ = chart.Axis(StandardAxis.Depth);
axisZ.Anchor = new NDockAxisAnchor(AxisDockZone.TopLeft);
NLinearScaleConfigurator scaleZ = new NLinearScaleConfigurator();
scaleZ.InnerMajorTickStyle.Visible = false;
scaleZ.MajorGridStyle.ShowAtWalls = new ChartWallType[0];
scaleZ.RoundToTickMin = false;
scaleZ.RoundToTickMax = false;
axisZ.ScaleConfigurator = scaleZ;
axisZ.Visible = true;
// add a surface series
NGridSurfaceSeries surface = new NGridSurfaceSeries();
surface.UniqueId = new Guid(outputVariable.UniqueId);
surface.Name = outputVariable.LegendText;
chart.Series.Add(surface);
surface.Legend.Mode = SeriesLegendMode.SeriesLogic;
surface.ValueFormatter = new NNumericValueFormatter("0.0");
surface.FillMode = SurfaceFillMode.Zone;
surface.FrameMode = SurfaceFrameMode.Contour;
surface.ShadingMode = ShadingMode.Flat;
surface.DrawFlat = true;
// Already set this property to false and working in other chart.
surface.InflateMargins = false;
surface.FrameColorMode = SurfaceFrameColorMode.Zone;
surface.SmoothPalette = true;
surface.Legend.Format = "<zone_value>";
surface.FillMode = SurfaceFillMode.Zone;
surface.FrameMode = SurfaceFrameMode.Contour;
CreateSurfaceSeries(outputVariable, surface);
chartControl.Refresh();
And the ScaleConfigurator configuration
chartPrimaryXAxis = chart.Axis(StandardAxis.PrimaryX);
// X Axis Configuration
dateTimeScale = new NDateTimeScaleConfigurator();
dateTimeScale.Title.Text = string.Empty;
dateTimeScale.LabelStyle.Angle = new NScaleLabelAngle(ScaleLabelAngleMode.Scale, 90);
dateTimeScale.LabelStyle.ContentAlignment = ContentAlignment.MiddleLeft;
dateTimeScale.LabelStyle.TextStyle.FontStyle = new NFontStyle("Times New Roman", 6);
dateTimeScale.LabelFitModes = new LabelFitMode[] { LabelFitMode.AutoScale };
chartPrimaryXAxis.ScaleConfigurator = dateTimeScale;
chartPrimaryXAxis.ScrollBar.ResetButton.Visible = true;
chartPrimaryXAxis.ScrollBar.ShowSliders = true;
dateTimeScale.EnableUnitSensitiveFormatting = true;
Here is the generated output:
Any idea regarding this problem will be deeply appreciated.
Thanks in advance.
Series Bar overlapping each other if series count increases.
&
Series bar getting out of the Axis lines.
Answer: When you are using categorial data then use NOrdinalScaleConfigurator rather than NDateTimeScaleConfigurator. It will not solve the problem and put the series bar in the center of the scale and auto resize them according to the chart size also.
X Axis Scale automatically add previous year December and next year
Jan in the scale which cause the chart to have blank area in case of
Surface Chart.
Answer:
Set the following properties of the DateTimeScaleConfigurator to false to avoid such behavior.
dateTimeScale.RoundToTickMax = false;
dateTimeScale.RoundToTickMin = false;