I am facing a very obscure issue.
I am loading .obj 3d models into a WebGL application I am working on. I am parsing them using a custom function. I know it works correctly. Because I get this:
Granted the texture is stretched way too much. But that's the way the UVs are mapped.
But, when I load a goose model here's what I get:
An untextured goose. I am using the same texture.
Weirder still is the fact that the texture renders only around the eyes. If I don't draw the wireframe, I get this:
Those two tiny specs that I've circled are the eyes.
Just to make sure that it wasn't this model, I tried another one:
I have no idea why it won't render the texture everywhere else.
Here's what I've tried:
Recalcuated normals and exported from Blender again. Same outcome.
Loaded models in Photoshop and they preview correctly. Meaning models are fine.
Checked my parsing of the .obj file into a usable format for WebGL over and over. Also, since the cube loads correctly, I assume it's not that.
Tried switching off MipMapping, disabling CULL_FACE and changing winding order. No difference.
Used different texture image. The texture images are all NPOT. Tried non NPOT. Nothing changed, except with different images the texels of the little eyes or the fragment on the axe changed to the texture.
Checked UV mappings, all look fine. No negative or out of range values.
I am totally out of ideas. If someone has had similar experiences, I'd appreciate pointers as to where to look next.
I generally don't like to ask questions without posting the code, but the code is very convoluted because I'm using sweet.js for custom javascript syntax. Let me know if anyone would like to look at the code and I could try and clean up some code and upload somewhere.
From your images i was wondering if you did not draw a constant number of polygon, or if the draw started then silently failed on its road because of some bug. That's why i asked if the drawn polygons were the first of the models.
And so it seems that indeed there was a hard coded limit to the number of drawn polygons.
Glad you found it !
Related
I loaded a Mesh from a JSON File, here is my current result:
my Project
It is an object I exported from blender as JSON and then used its vertices to create a geometry of Points (THREE.Points) (which is important for the looks of it)
I am now looking for a way to "animate" the Points, so that the "surface" looks vivid / living. So basically it should be moving around a bit, something like this (without the rotation):
Link to animated Gif
I have ruled out displacementMap, as this does not work for the PointsMaterial (or does someone know a workaround?)
Does anyone have hints or ideas? I thought of maybe morphing 2-3 Objects .. but I am not sure if this will work for a points mesh.
One approach to achieve your desired effect is to use morph target animation (also called vertex morphing). As you can see at the following example, three.js does support morph target animations with points.
https://threejs.org/examples/webgl_morphtargets_sphere.html
There is a lot of existing literature about vertex morphing, so it should be no problem to get familiar with this technique. I suggest you create your animations in Blender, export the model to glTF and the load the file via GLTFLoader into your app like shown in the example.
In working with Three.js and I’ve run across several useful Helper classes that really make displaying and or modifying the scene much easier. There is one tool out there that I can’t seem to find again. It is kind of like the AxisHelper however it has a plane between the axis when you mouse over that area allowing the user to move the object along the xy, xz, or yz plane depending on what you pick. I’ve drawn an example of what it adds to the object in order to help the user move the object along the plane. If anyone knows of this tool or maybe an example of something that uses a utility like this, it would be great if you could point it out to me. Thanks.
I expect you are looking for TransformControls. There is a three.js example of its use here.
TransformControls is not part of the library -- it is part of the examples. You must include it explicitly in your project.
three.js r.80
I've been struggling the past few days to optimize performance on a D3 map, especially on mobile. I am using SVG transforms for zooming and panning but made the following observation: the overkill comes from path strokes used to fake spacing between countries.
I have uploaded a pair of sample maps for comparison:
http://www.nicksotiriadis.gr/d3/d3-map-1.html
http://www.nicksotiriadis.gr/d3/d3-map-2.html
The only difference between the two maps is the stroke path along the country paths, and the difference in performance is even noticeable on desktop devices - but more obvious on mobile. Removing the path strokes makes mobile performance a breeze..
I tried all kinds of svg stroke shape-rendering options without significant results.
Now to the question. Is there any way to remove a thin border from each country to fake the spacing between countries instead of using a stroke?
If anyone else has a different suggestion I'd love to hear it!
Update: Attaching explanation photo.
What I have drawn is this. The red arrow points to the country joints. When adding a stroke in a color same as the background to the country paths (here depicted in dark grey color) it creates the sense that the countries are seprated - however this adds a serious performance hit on mobile devices. What I am looking for is somehow re-shape the countries paths so that their borderlines are where the blue arrow points, but without having a stroke.
Update 2: People seem not to be able to understand what I am looking for, so I am updating this in order to make the question even clearer.
Let's assume that the original countries paths are shown on the left of this image. What I am looking for is a way that I can somehow 'contract' the paths inwards so that the newly created paths shown in red, leave enough empty space between them that will 'emulate' a stroke between them.
Doing this, will leave no use to having an extra layer of strokes, thus gain performance from only using paths instead of paths+strokes.
Update 2: Hello again, I seem to have found a half-solution to my problem. I managed to extract the topojson to shapefile, edit the shapefile the way I want (used a program named OpenJump), but the conversion takes away all the topojson properties I need - id, country name, so I can't convert back to the original topojson.
Does anyone have any suggestions?
D3 has a thing just for that: topojson.mesh() (see documentation). The idea is that since most countries share borders, there's no need to draw the shared borders twice. If you can draw each border only once, you get as much as 80% reduction in the number of strokes you have to draw. The mesh method does the javascript processing to turn a bunch of closed shapes (countries) into the multiline path of just the borders between them. You can then draw that multiline path into a single <path> object that you position on top of the fills.
The mesh looks like this.
Here's another example.
Finally found the answer. This radically improves d3 map performance!
1) I got my topojson file and extracted to shapefile using mapshaper.org. This gives 3 files: .shp, .shx, .dbf . From what I realized the .dbf file holds all the TopoJSON properties/attributes.
2) Opened the .shp shape file to OpenJUMP http://www.openjump.org/ - Which automatically imports the .dbf file as well.
3) I selected the countries layer and went to Tools > Analysis > Buffer.
4) Checked the Update geometry in source layer box so that the geometry is edited without losing the rest of the attributes/properties and added a negative Fixed Distance -0.1. This shrinked all the country geometries to the result I was looking for.
5) Saved Dataset as ESRI Shapefile
6) Reimported BOTH .shp and .dbf that were produced from OpenJUMP back to mapshaper.org - careful, BOTH files.
7) Exported as TopoJSON. Contains new shape and all original properties/attributes!
The following link has been updated with the new produced map; we have a 'bordered' look without the need of strokes.
http://v7.nicksotiriadis.gr/d3/d3-map-1.html
Compare the performance to this link that has the original shapes + stroke. Please try on mobile to see the performance difference!
http://v7.nicksotiriadis.gr/d3/d3-map-2.html
Also, here is the updated world map TopoJSON file in case someone wants some extra performance! :D
http://v7.nicksotiriadis.gr/d3/js/world-topo-bordered.json
There might be a couple of reasons of this behaviour (on my computer, everything is working fine at the same speed ):
Browser
Which browser do you use ? On Chrome, your exemples are working perfectly.
TopoJson
eg. previous answer.
Animation
You are launching the animation when the page is loading. You might want to add a delay (animation().delay(in ms)). There is also a function in D3: queue(), https://github.com/mbostock/queue which load the data before launching a function.
--
If none of this change your problem, and if you want it to work fine on mobile, you can try to mix D3 and Leaflet (map for mobiles), which is great in term of performance by loading tiles.
One example:
http://bl.ocks.org/zross/6a31f4ef9e778d94c204
Hope it helps
I was making my own custom geometry with three.js (using typescript). Something was wrong with it, the object appeared all dark with Lambert material. I checked the three.js source code to see if I forgot to do something when creating the geometry. I saw these two lines appear at the end of the constructor of nearly every geometry class:
this.computeCentroids();
this.computeFaceNormals();
Adding the computeFaceNormals solved my problem. I remember something about normals having to do with lighting (so that makes sense).
But I don't know what the computeCentroids does, and where/why those centroids are needed. Can someone explain? Also do I need to call that function? What can happen if I don't?
computeCentroids calculates the centroid of each triangle in a mesh, not the center of the mesh itself.
Probably the easiest way to see their purpose is to search for .centroid in the three.js source code. AFAICS, they are not used for much apart from lighting, but then only if you're using CanvasRenderer.
Hey im trying to implement shadow mapping in webgl using this example:
tutorial
What im trying to do is
initialize the depth texture and framebuffer.
draw a scene to that framebuffer with a simple shader, then draw a new scene with a box that has the depthtexture as texture so i can see the depth map using an other shader.
I think i look ok with the colortexture but cant get i to work with the depthtexture its all white.
i put the code on dropbox:
source code
most is in the files
index html
webgl_all js
objects js
have some light shaders im not using at the moment.
Really hope somebody can help me.
greetings from denmark
This could have several causes:
For common setups of the near and far planes, normalized depth values will be high enough to appear all white for most of the scene, even though they are not actually identical (remember that a depth texture has an accuracy of at least 16bits, while your screen output has only 8 bits per color channel. So a depth texture may appear all white, even when its values are not all identical.)
On some setups (e.g. desktop OpenGl), a texture may appear all white, when it is incomplete, that is when texture filtering is set to use mipmaps, but not all mipmap levels have been created. This may be the same with WebGl.
You may have hit a browser WebGl implementation bug.