I loaded a DAE file based on the ColladaLoader example. I exported from Maya 2012, including a skin. I already had to fix 1 thing by adding the "skeleton" tag in the .dae file otherwise I'd get the error Couldn't find skin. Then I thought if thats a problem perhaps I need to change the localized url of the skin material to just name.jpg because they are in the same folder. But that didn't work.
So my question is: Am I doing something wrong? Or missing something? Already tried of few techniques of editing the material afterwards, they did work but then the model stopped animating.
You can see it live here: http://www.mariusposthumus.nl/playground/webgl
Try exporting with OpenCollada instead:
https://github.com/KhronosGroup/OpenCOLLADA/wiki/OpenCOLLADA-Tools
Black texture appear when you apply compressed file format texture like png, jpg, tga, or dds , use bmp (bitmap uncompressed) instead it will work.
I've had the same problem but i solved it in this way, seems that colladaloader don't read compressed file format.
It's an old issue that i've had also when i made my first application in OpenGL.
To read compressed file format you need to decode it, and this take a lot of time and a lot of more coding.... ;-)
Related
I want to merge two Images one of them is gif like this:
and other one is this:
Now I want put the second image in the gray box of first image. Is it possible to do that with .net or javascript?
To answer the question - Yes ;)
OK, now how:
First, you need to find a way to read the gif image you have.
Example in C# here:
https://dejanstojanovic.net/aspnet/2018/march/getting-gif-image-information-using-c/
Then you probably need to take the GIF-Frame(s), and convert it into PNG, copy the the jpeg image at the correct location, then convert the png back to gif, and then create a new gif using
https://github.com/mrousavy/AnimatedGif and set all the frames to the same time as in the original.
For JavaScript, there is libgif-js for the browser, and gif-encoder-2 from npm for NodeJS.
Or you can choose the batch route with ffmpeg.
Code on github
ImageSharp:
GDI:
ImageSharp - no repeat:
I did quite some research in the last few days on this topic and didn't find an answer yet, which worked form me.
I need to convert the colors of an image (jpeg or in a pdf, doesn't matter since I can convert that quite easily) from RGB to CMYK. The process looks like this:
HTML5 Canvas (p5.js) -> Save Image (jpeg or png) -> Have a printable PDF (using jsPDF)
Somewhere in there should be a conversion to CMYK Colors.
The only option I found was to use Imagick/ImageMagick. But since I use a shared server at 1&1 I cant really install it. At this point the language doesn't really matter, I just want to get it done easily.
Do you have any suggestions?
I'm trying to animate a mesh via it's skeleton on a webpage using a BVH. Here's the overall process of what I'm trying to do:
Make a character using MakeHuman and export (mhx format? seems to work best).
Import the character into Blender.
Retarget to a BVH using the MakeWalk plugin for Blender.
Export the character to json using the Three.js exporter.
Export the BVH (not sure if this is necessary, but I figured I might have better luck getting the BVH to match up with the skeleton after retargeting)
Load the character into a web page using Three.js
Animate the character using a BVH.
The animation looks great in blender. I'm trying to use the JavaScript BVH viewer code from here modified to use the skeleton created by MakeHuman instead of it creating a skeleton from the BVH data. Whenever I try to animate the character, it gets very distorted.
Here's the desired result (more or less) rendered from Blender:
And this is what is happening on the webpage:
As you can see, it's getting totally messed up. I also had to zoom way out in order to see the whole image.
I've tried using different rigs, different file formats, resaving the BVH after retargeting, you name it. I also tried to follow the example here (scroll down to see the instructions), but it says to delete the armature modifiers and when I do that, no bones get exported and Three.js throws an error.
I am at a loss. Is there an up-to-date example somewhere that shows how to do what I'm trying to do?
The same thing happened to me when I exported from Blender to Three.js.
The solution that worked for me was (after step 3 in your list) to ensure in Blender that there were no object rotations still that hadnt been applied (ctrl-a). In other word the skeleton and the mesh must have no additional rotations or scaling.
I was able to export single object (box.json) and scene (box2.json) form Blender using io_three.I also managed to load single object (box.json) with textures using JSONLoader() (modelWithTexture.html).
My objective is to load whole scene with all textured objects, lights and camera to three.js.Till now I managed to load scene with objects and lights, but without textures using ObjectLoader() (scene_noTextures.html) and I'm stuck.
All files, to which I'm referring above, plus .blend file, that I'm using in this example you will find here:
https://drive.google.com/folderview?id=0B1kP1cNoYxYCfkszUUNBeloxaUY1NnlsbURuRi1ENFhwc1ZfVllIMFQ5SkcyRllZTC05TVU&usp=sharing
I found the answer to similar question here:
Is three.js ObjectLoader capable of loading textures?
but In github dev branch is vast amount of different files that I have no idea how to use.
Please help me improve my code so I could complete my objective.(it's not actually my code, I just copied and pasted pieces of code from tutorials, basing on what I've learnt so far)
Thank You.
Thank You all for attention.
I managed to solve this myself:
All I needed to do is change in "scene_noTextuers.html" setClearColorHex() to setClearColor() and switch my old three.min.js file with new, that I got from here:
https://github.com/mrdoob/three.js/tree/master/build
I'm new to Open/WebGL and am having issues getting the textures/skins from a downloaded Blender model to show up in three.js. I can verify from Chrome's Network tab that it is downloading all of the texture files, but for some reason they are not being rendered.
I am using the webgl_loader_collada.html example as a basis to import a sample 3D model from blender into three.js.
For input, I'm using the MESSENGER model available from the NASA website. For reference, the full gallery of NASA 3D Models can be seen here.
My current steps:
Download and open the model in Blender
File->Export->Collada (.dae)
To view:
Modify a copy of threejs/examples/webgl_loader_collada.html to point to the exported .dae file
Remove the scaling on line 59.
Using the default options in blender export the resulting rendering is devoid of all textures. If I enable "Include Material Textures" I end up with the gold coloring on the main part of the model, but none of the other textures are mapped and the solar panels furthermore become completely black. Alternatively, if I also check "Include UV Texture", I get an all-gray rendering with no textures.
I have also tried the three.js JS exporter plugin for Blender, but in that case (using the appropriate demo template) all I get is a JS exception "Cannot read property 'opacity' of undefined".
Am I doing something wrong in the translation process, or is this a problem with the source model? If the latter, how could I go about fixing either the original model or its exported form?
thanks,
- David
Very nice project, thanks for the link.
For the collada export
don't include UV textures
include material textures
don't copy (you can use the provided texture images)
double check textures paths in the .dae file, in the <library_images> tag, use relative ones
I tried on my own, here if you want https://github.com/vincent/three.js-nasa,
but it's not perfect, for example the foil effect with the normal map is not used.
Perhaps try the GLTF format instead of collada? It is a more modern format designed for realtime/web asset delivery and being widely adopted.
Blender exporter:
https://github.com/KhronosGroup/glTF-Blender-Exporter
Once you have exported as .glb file, you can drag it on here to check it:
https://gltf-viewer.donmccurdy.com/
Then use the THREE.GLTFLoader() in THREE to load it.