WebGL

问题 I am trying to draw a quad between four vertices in the space using three.js. I have written the following code but it doesn't work: var a = { x:10, y:10} var b = {x:50, y:50} var geometry = new THREE.Geometry(); geometry.vertices.push( new THREE.Vector3( a.x, a.y, 2 ) ); geometry.vertices.push( new THREE.Vector3( b.x, b.y, 2 ) ); geometry.vertices.push( new THREE.Vector3( b.x, b.y - 60, 2 ) ); geometry.vertices.push( new THREE.Vector3( a.x, a.y, 2 ) ); geometry.faces.push( new THREE.Face3(0

问题 When i read about performance in OpenGL/WebGL, i almost hear about reducing the draw calls. So my problem is that i am using only 4 vertices to draw a textured quad. This means generally my vbo contains only 4 vertices. Basically gl.bindBuffer(gl.ARRAY_BUFFER,vbo); gl.uniformMatrix4fv(matrixLocation, false, modelMatrix); gl.drawArrays(gl.TRIANGLE_FAN,0, vertices.length/3); And here comes the problem i see. Before drawing i update the modelmatrix of the current quad. For example to move it 5

问题 I'm learing three.js and I faced a z-fighting problem. There are two plane object, one is blue and the other is pink. And I set the positions using the flowing codes: plane1.position.set(0,0,0.0001); plane2.position.set(0,0,0); Is there any solution in three.js to fix all the z-fighting problem in a big scene? I ask this problem because I'm working on render a BIM(Building Information Model, which is .ifc format) on the web. And the model itself have so much faces which are so closed to each

问题 When I calculate the gl_PointSize the same way I do it in the vertex shader I get a value "in pixels" (according to http://www.opengl.org/sdk/docs/manglsl/xhtml/gl_PointSize.xml). Yet this value doesn't match the measured width and height of the point on the screen. The difference between the calculated and measured size is no constant it seems. Calculated values range from 1 (very far away) to 4 (very near) Current code (with three.js, but nothing magic), trying to calculate the size of a

问题 I'm using Three.js to draw 3D models onto a webgl canvas renderer above simple DOM elements, and I need to do collision detection between them. My currently working method is to use renderer.domElement.toDataURL(), load this as an imageData object then draw this onto a separate 2D canvas context, then pull the getImageData() pixel array and iterate through using this awesome pixel collision function. This is incredibly slow, and pulls my frame rate down to a nearly unplayable ~5-8 FPS.

问题 I can't figure out how to apply a shader to a three.js object that has a video texture. I've been playing around with webRTC and three.js and successfully mapped a video texture onto a mesh using a standard material: var material = new THREE.MeshBasicMaterial({ color : 0xffffff, map : videoTexture }); I want to take it one step further by applying a shader (for this example a sobel shader) to this texture. My attempt is here: http://jsfiddle.net/xkpsE/1/ I'm receiving a bunch of INVALID

问题 I'm rendering a video in webGL, by passing a Video object as the source for texImage2D . This works great in all platforms (that supports webGL), however in Safari in IOS 10 beta 7, it is rendered with weird colors (in previous IOS versions it looks ok). For example, this is an image frame from it, that looks how it's supposed: And this is how it's rendered in IOS 10 (the weird version): Is this an IOS10 beta bug? Here is the render code (that happens for each frame): gl.clear(gl.COLOR_BUFFER

问题 I have a web app where I need to display multiple 3D objects in different containers. For the moment, I have been instantiating multiple three.js renderers, one per container. However, I get this error message: "WARNING: Too many active WebGL contexts. Oldest context will be lost" and after ~10 renderers I can't open any more. Here's an example http://brainspell.org/article/24996404 How should I go to have multiple three.js containers in a single web page? Is it possible to have a single

问题 In the following code, I render some cubes and light them with a PointLight and AmbientLight. However the AmbientLight when set to 0xffffff changes the colour of the sides to white, no matter their assigned colours. Strangely, the point light is working as expected. How can I make the ambient light behave like the point light, in that it shouldn't wash out the face colours, simply illuminate them? I.e. so setting ambient light to 0xffffff would be equivalent to having multiple point lights at

问题 Using three.js, I'm working on a web page to display a flip cube (a.k.a. magic cube; see e.g. the video on this page). On a flip cube, there are typically images that are spread out across multiple pieces of the cube. For example, the boat image shown above is spread across the faces of four cubelets. In three.js terms, there are multiple meshes that need to use the same image for their material texture, but each at a different offset. As far as I understand it, in three.js, offset is a