WebGL

I'd like to create the functionality to import a 3D model to view in the browser by using the File API . The three.js loaders work great on files that I host. My understanding is that the loader uses ajax to retrieve the file. I'd like to be able to load the file from disk on the client to view it. How might this be accomplished? You can override or "hot patch" the loaders' load() function to fit your needs. Put your overrides before any other THREE.js -related code. For example: THREE.OBJLoader.prototype.load = function(url) { // copy the function from OBJLoader.js source and change the AJAX

Lets say I have a simple cube and some variables specifying its width, height and depth. How do I update my THREE mesh when the w/h/d changes? (I have everything else like changelisteners etc). Do I update vertices directly? Or is it easier to just redraw everything? I think easiest would be to create your cube with 1 unit dimensions (1x1x1). Then set the dimensions by scaling it: mesh.scale.x = width; mesh.scale.y = height; mesh.scale.z = depth; Not actually sure if mesh supports scale, if not, you can wrap it in Object3D var obj = new THREE.Object3D(); obj.add(mesh); obj.scale.x = width; obj

I'm trying to render a few objects to a canvas and I'm having a bit of trouble understanding what's not working. I'm building two objects at the moment that represent the two meshes that I want to render. If I create one mesh the code works fine so the problem, I think, is that the data gets screwed up when I'm building two or more. Here's an example of the mesh data: "name":"cone", "buffers":{ "vertexPosition":{}, // Buffer "vertexIndex":{} // Buffer }, "mesh":{ "vertices":[], // emptied it to fit on page "faces":[] // emptied it to fit on page }, "mvMatrix": Float32Array[16], "itemSize":3,

I have multiple WebGL lines to render, and they all have the same rendering style. So for performance, I want to render them all as a single object, in a single draw call. But the problem is that the lines don't all connect to each other. See example here: http://jsfiddle.net/b6jgS/6/ As you can see the rings connect, but I don't want them to. Yet I still want to draw them in a single draw call. The relevant code is this, which simply generates some geometry for some rings: # Pardon the coffeescript! ringsGeom = new THREE.Geometry() for u in [-2..2] for v in [0..100] ringsGeom.vertices.push

I see a weird flickering of some rendered geometry Chrome on Windows 10 x64 with nVidia chips. I've also tested in in Chrome for Linux, Firefox for both platforms, Android, and with Intel GPU. It works fine everywhere, except the one platform mentioned. Minimal example looks like this: Vertex shader: precision mediump float; smooth out vec2 pointCoord; const vec2 vertexCoord[] = vec2[]( vec2(0.0, 0.0), vec2(1.0, 0.0), vec2(1.0, 1.0), vec2(0.0, 0.0), vec2(1.0, 1.0), vec2(0.0, 1.0) ); void main() { gl_Position = vec4(vertexCoord[gl_VertexID], 0.0, 1.0); pointCoord = vertexCoord[gl_VertexID]; }

I've created ~2500 meshes and use an algorithm defining the color of each mesh. The algorithm goes through all meshes and adds a value depending on the distance it has to each "red-start" point. The value then decides what the color should be. This is the result: It is lagging and the corners aren't smooth. I want to recreate the same color result in some other way but can't figure out how. How can you do it with THREE.Shape and FragmentShader? Final Goal Description: Using one, for increase in FPS, mesh (THREE.Shape) that defines the area which is to be colored. Be able to insert X amount of