WebGL

I have created a terrain via a heightmap in Three.js and am using mrdoob's misc_controls_pointerlock for collision and movement. However, when I do objects.push(terrainobj); the performance goes down to about 3fps (from around 60) and there is no collision with the terrain. The collision is achieved via rays. How can I get around this? If it's just a heightmap you could avoid using ray and do the collision checking right in the bitmap (using canvas and imagedata). You just need to convert your XZ world position to the XY pixel in the heightmap. Then, if your Y position in the world is lower

Environment Ubuntu 17.04, Chrome 60. Runs this example local without warnings/errors : https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample6 Then replace cubetexture.png with an non-power-of-2 image here : https://github.com/mdn/webgl-examples/blob/gh-pages/tutorial/sample6/webgl-demo.js#L220 Got as expected warnings/errors : [.Offscreen-For-WebGL-0x13d050ba2c00]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering. [.Offscreen-For-WebGL-0x13d050ba2c00]GL ERROR :GL_INVALID_OPERATION : glGenerateMipmap:

I'm attempting to use the ANGLE_instanced_arrays extension in WebGL to render multiple instances of an object with different mat3 transformation matrices. This is the code related to the buffer for my matrices: //setup this.shaderProgram.transformAttribute = gl.getAttribLocation(this.shaderProgram, "transform"); ext.vertexAttribDivisorANGLE(this.shaderProgram.transformAttribute, 1); this.transformBuffer = gl.createBuffer(); //each render gl.enableVertexAttribArray(this.shaderProgram.transformAttribute); gl.bindBuffer(gl.ARRAY_BUFFER, this.transformBuffer); gl.bufferData(gl.ARRAY_BUFFER, new

Is it possible to create in Three.js a light source that has custom geometry, e.g. symbol. There is Arealight in Three.js that works as rectangular source of light and which has wigth and height parameters. Finally, the aim is to get a surface illuminated by a such source, which visually is that custom figure. Thank you WestLangley, this is a great example, I tried this way, but unfortunately, it didn't work for me. I tried this: var textTexture = new THREE.Texture( "textures/text.jpg" ); //var textTexture = THREE.ImageUtils.loadTexture("textures/text.jpg"); textTexture.format = THREE

I've been trying to create a multiviewport webgl application. I got everything rendering quite nice using viewport+scissor for each view. But now I would like to improve rendering and just render the view which is updated, so skip overdrawing. I've made a little demo showing the idea: http://kile.stravaganza.org/lab/js/scissor/ As I understand scissor it's suposse that it will just render the current scissor box and keep the rest of the canvas untouched. But it seems that it just keeps clearing the whole canvas on each frame, no matter what I tried :( This is the rendering code (The last view

I am mixing the CSS3D Renderer with WebGL Renderer to add HTML elements in 3D space to a WebGL scene. The CSS3DObject is in front of WebGL Meshes even though the WebGL Renderer has a higher z-index. Here is the jsfiddle http://jsfiddle.net/kd9Tc/ This is what the scene looks like. Note the back view. Whenever the CSS3DObject hits a mesh, I would like the correct depth to be displayed. I believe that this has something to do with the z-buffer or depth . I would prefer to have the text on a transparent background and not a solid color as shown in the example. How can this be done? 来源： https:/