All works great for me with Rajawali in Android, except textures.
I would like to programmatically load a transparent image as a texture, with a chessboard pattern where each black square is in fact fully transparent while each white square is just white.
I would like to use this as a texture over an object, that otherwise has diffuse and specular color properties that can be changed programmatically. So if the user has inputted the color blue, I would like the object to show a blue-white pattern.
How can I do that?
The rajawali tutorials do not really help, since for textures rajawali changed a lot in the last update. Also the Rajawali examples app does not really help, as they all seem to deal with environment maps.
What I tried was e.g.:
protected void initScene() {
objParser = new LoaderOBJ(mContext.getResources(), mTextureManager, R.raw.stdblock_obj);
try{
Texture jetTexture = new Texture("jetTexture", R.drawable.chessboardtexture);
mTextureManager.getInstance().addTexture(jetTexture);
semiglossMaterial.addTexture(jetTexture);
semiglossMaterial.setColorInfluence(0);
}catch(TextureException e){
e.printStackTrace();
}
}
The object is rendered, but without any texture. The chessboard image does have a size power-of-2, and it is located in the right folder R.raw.stdblock_obj. It is a jpg image, but I also tried png which didn't work either.
I also tried a different approach:
semiglossMaterial.enableLighting(true);
semiglossMaterial.setDiffuseMethod(new DiffuseMethod.Lambert());
phongMethod.setShininess(iShininess); semiglossMaterial.addTexture(new Texture("jetTexture",R.drawable.chessboardtexture));
semiglossMaterial.addTexture(new AlphaMapTexture("alphaMapTex", R.drawable.simpletexture3));
semiglossMaterial.setColorInfluence(0);
but also this did not work.
Anyone an idea?
You have to add that texture as a child, a child of the .obj file, if you don´t know how many child have your .obj and the name of them, use:
"your3DobjectName".numChildren(),
then use a simple
for(int i = 0; i < "your3DobjectName".numChildren(); i++)
{
String name = "your3DobjectName".getChildAt(i).name();
Log.d("rajawali", "Name: "+name);
}
At this way you will know how many childs and the name of your childs declared at your obj
Related
I need to make some processing on each raw frame and displaying it in the preview. Here's the code I'm using (in Kotlin):
fun Image.toLinearRgb(): Mat {
val bayer16Bit = Mat(height, width, CvType.CV_16UC1, planes[0].buffer)
val bayer8Bit = Mat().apply {
bayer16Bit.convertTo(this, CvType.CV_8UC1, 0.0625)
}
val rgb8Bit = Mat().apply {
Imgproc.cvtColor(bayer8Bit, this, Imgproc.COLOR_BayerGR2RGB)
}
bayer16Bit.release()
bayer8Bit.release()
return rgb8Bit
}
I've ended up getting a strange rgb frame with a lot of green pixels.
According to the docs, the raw image (through ImageFormat.RAW_SENSOR) is a 16 bit, single channel, bayered one. I'm probably missing something because just allocating the byte buffer in a CV_16UC1 mat and converting it to RGB don't work. Also, it seems that the resulting frame is too dark even for a linear color space. I'd appreciate any help!
There are different bayer pattern layouts, and without knowing the camera's layout, I'd guess you got the wrong one. Opencv refers to them by the first 2 colors in the upper left hand corner: cv::COLOR_BayerBG2BGR
In opencv, these are supported by using different flags:
cv::COLOR_BayerRG2BGR
cv::COLOR_BayerGR2BGR
cv::COLOR_BayerGB2RGB
...etc. A full list can be found here: https://docs.opencv.org/3.1.0/de/d25/imgproc_color_conversions.html
You can try to research your platform's bayer layout, or you can just experiment till it works. Good Luck!
In my App I use several DecalSprites as a part of my scene. They all have transparency (PNG-textures). When I have them overlapping, some of those show black background instead of transparency. Those DecalSprites have different Z-coordinates. So they should look like one behind another.
Please note also the line on the border of a texture. This is also something that I'm struggling to remove.
Update 1: I use PerspectiveCamera in the scene. But all the decals are positioned to face the camera as in 2d mode. So this "black" background appears only in certain cases e.g. when camera goes right (and all those decals appear in the left of the scene). Also I use the CameraGroupStrategy
Solved! The reason was that CameraGroupStrategy when ordering Decals (from farthest to closest to camera) takes the "combined" vector distance between camera and the Decal. When my camera panned to left or to right the distance to the Z-farthest Decal became LESS than the Z-closer Decal. This produced the artifact. Fix:
GroupStrategy strategy = new CameraGroupStrategy(cam , new ZStrategyComparator());
And the Comparator:
private class ZStrategyComparator implements Comparator<Decal> {
#Override
public int compare (Decal o1, Decal o2) {
float dist1 = cam.position.dst(0, 0, o1.getPosition().z);
float dist2 = cam.position.dst(0, 0, o2.getPosition().z);
return (int)Math.signum(dist2 - dist1);
}
}
Thanks to all guys who tried to help. Especially Xoppa. He sent me into the right direction in libGDX IRC.
I am trying to detect the number of blobs for example placed on a surface. What i have tried so far:
Converted image to grayscale
Applied threshold to the image
3, Obtained the edges
Drawn the edges using the mat (the image below)
I am using opencv for android in my case, and i need help in order to find the number of objects in the image. Could anyone please help me. I have tried filling the image using the code below but it doesnot help
for(int ii=0;ii<dst.rows();ii++) {
for(int j=0;j<dst.cols();j++) {
double checker = dst.get(ii, j)[0];
if(checker == 255) {
Imgproc.floodFill(dst, matMask,
new Point(j,ii), new Scalar(255),
null,new Scalar(255), new Scalar(255), 8);
}
}
}
EDIT:
The captured image on which processing has to be done:
the background might look like this
!
Or another possibility
Thanking you
Suppose I'm uploading two or more than two pics in some Framelayout. Hereby I'm uploading three pics with a same person in three different position in all those three pictures. Then what image processing libraries in Android or java or Native's are available to do something as shown in the pic.
I would like to impose multiple pictures on each other.
Something like these:-
One idea is to :
Do some layering in all those pictures and find mismatching areas in the pics and merge them.
How one can merge multiple picture with other? By checking the di-similarity and merge with each other?
Are there any Third party Api's or some Photoshop service which can help me in doing these kinda image processing?
In this case you are not just trying to combine the images. You really want to combine a scene containing the same object in different positions.
Therefore, it is not just a simple combination or an alpha compositve where the color of a given pixel in the output image is the sum of the value of this pixel in each image, divided by the number of images.
In this case, you might do:
Determine the scene background analysing the pixels that do not change considering multiple images.
Begin with the output image being just the background.
For each image, remove the background to get the desired object and combine it with the output image.
There is a Marvin plug-in to perform this task, called MergePhoto. The program below use that plug-in to combine a set of parkour photos.
import marvin.image.MarvinImage;
import marvin.io.MarvinImageIO;
import marvin.plugin.MarvinImagePlugin;
import marvin.util.MarvinPluginLoader;
public class MergePhotosApp {
public MergePhotosApp(){
// 1. load images 01.jpg, 02.jpg, ..., 05.jpg into a List
List<MarvinImage> images = new ArrayList<MarvinImage>();
for(int i=1; i<=5; i++){
images.add(MarvinImageIO.loadImage("./res/0"+i+".jpg"));
}
// 2. Load plug-in and process the image
MarvinImagePlugin merge = MarvinPluginLoader.loadImagePlugin("org.marvinproject.image.combine.mergePhotos");
merge.setAttribute("threshold", 38);
// 3. Process the image list and save the output
MarvinImage output = images.get(0).clone();
merge.process(images, output);
MarvinImageIO.saveImage(output, "./res/merge_output.jpg");
}
public static void main(String[] args) {
new MergePhotosApp();
}
}
The input images and the output image are shown below.
I don't know if this will qualify to be in your definition of "natives", but there is the following .NET library that could help: http://dynamicimage.apphb.com/
If the library itself can give you want you want, then depending on your architecture you could set up a small ASP.NET site to do the image manipulation on the server.
Check the accepted answer here.
In above link there is merging of two images which is done by openCV sdk.
If you dont want to use openCV and just want to try with your self then you will have to play little with framlayout and with three imageview. Give options to user to select specific part of the image to show for all three images. So the selected part will be shown of the selected image. on this way you will get the result like above what you have said.
Hope you got my point. If not then let me know.
Enjoy coding... :)
You can overlay the images using openCV you can check at OpenCV and here or here
// Read the main background image
cv::Mat image= cv::imread("Background.png");
// Read the mans character image to be placed
cv::Mat character= cv::imread("character.png");
// define where you want to place the image
cv::Mat newImage;
//The 10,10 are the initial coordinates in pixels
newImage= image(cv::Rect(10,10,character.cols,character.rows));
// add it to the background, The 1 is the aplha values
cv::addWeighted(newImage,1,character,1,0,newImage);
// show result
cv::namedWindow("with character");
cv::imshow("with character",image);
//Write Image
cv::imwrite("output.png", newImage);
or you can create it as a watermark effect
Or you can try it in java like merging two images
try using this class
public class MergeImages {
public static void main(String[] args) {
File inner = new File("Inner.png");
File outter = new File("Outter.png");
try {
BufferedImage biInner = ImageIO.read(inner);
BufferedImage biOutter = ImageIO.read(outter);
System.out.println(biInner);
System.out.println(biOutter);
Graphics2D g = biOutter.createGraphics();
g.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_OVER, 0.8f));
int x = (biOutter.getWidth() - biInner.getWidth()) / 2;
int y = (biOutter.getHeight() - biInner.getHeight()) / 2;
System.out.println(x + "x" + y);
g.drawImage(biInner, x, y, null);
g.dispose();
ImageIO.write(biOutter, "PNG", new File("Outter.png"));
} catch (Exception e) {
e.printStackTrace();
}
}
}
I'm looking for ways to speed up a few animations.
I came across this article that mentions in passing that storing a large bitmap in a static field can help with application load times (see paragraph 4).
What would be the equivalent technique for an AnimationDrawable?
Is it even possible to preload the frames in an animation drawable? Are they preloaded by default? Will this help me speed things up?
I am running a frame animation which is composed of .png's which are 256x256, they are being scaled down to the size of the image view, which I would guess is about 100x100, this will change when the app is used on a device with a different screen size then mine, however the size of this 100x100 image view will not change after the onCreate method of my app is called.
Solution: I modified the accepted solution as follows so that I could use the standard animation format that android uses (and that I already had my animations encoded in):
public Bitmap[] setAnimationArray(int res_anim){
this.my_view.setBackgroundResource(res_anim); //view sized properly elsewhere
AnimationDrawable t_anim = (AnimationDrawable) this.my_view.getBackground();
Bitmap[] anim = new Bitmap[t_anim.getNumberOfFrames()];
for(int i = 0;i<t_anim.getNumberOfFrames();i++){
anim[i]=((BitmapDrawable) t_anim.getFrame(i)).getBitmap(); //extract bitmaps from the animation
}
return anim;
Edit: to the answer below I would like to add that performing animations in a surface view manually seems to be much faster then animating using the standard methods. Search Android SurfaceView for more info.
Define your bitmaps in arrays.xml like so:
<array name="targetFrames">
<item>#drawable/bitmap1</item>
<item>#drawable/bitmap2</item>
...
</array>
You can do something like this to create an array of bitmaps:
private void setupTargetFrames() {
TypedArray targetResources = context.getResources().obtainTypedArray(R.array.targetFrames);
targetFrames = new Bitmap[targetResources.length()];
for (int i = 0; i < targetResources.length(); i++) {
targetFrames[i] = BitmapFactory.decodeResource(context.getResources(), targetResources.getResourceId(i, R.drawable.defaulBitmap));
}
targetResources.recycle();
}
Then play the animation by cycling through the bitmaps.
See BitmapFactory's other methods if you want to scale the bitmap when loading it in.