WebGL

问题 I'm using the WEBGL_depth_texture in chrome to render a scene to a framebuffer with a color and depth texture. When I display my color texture works fine, but my depthtexture is all white. Shouldn't it be like gray? my draw texture function: this.drawTexture = function() { //gl.viewport(0, 0, this.canvas.width, this.canvas.height); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); gl.bindBuffer(gl.ARRAY_BUFFER, this.vertBuffer); gl.vertexAttribPointer(this.VertexPosition, 2, gl.FLOAT,

问题 I've loaded a .dae model, which I would like to use more times in my scene. This code works with meshes, but the collada.scene object isn't a mesh: var mesh2 = new THREE.Mesh( loadedMesh.geometry, loadedMesh.material ); How is it possible, to share the same collada model between some objects? 回答1: The dae scene is not a mesh, but there's certainly a mesh in it. You should console.log the collada object, or put a breakpoint in the load function, and inspect where is the mesh you want. Given a

问题 I am building online web application which renders a video on a canvas and then records the canvas using canvas.captureStream() and mediaRecorder. The problem is that when the user switches tab or minimizes the window the canvas freezes. My animation keeps running as I have used webWorkerSetInterval(Hacktimer.js). As per chrome they have not yet provided a solution https://bugs.chromium.org/p/chromium/issues/detail?id=639105. Can anyone suggest a work-around? I tried new window which doesn't

问题 Is it possible to load a JSON model once and add it to the scene multiple times with different scales, positions, etc? If I add the Object3D() to an array, give a position and scale to the object in the array, add it to the scene, and then repeat this process, the position and scale are overwritten for every object in the array. I can't think of anything that works, so I'm hoping someone could give me a working example of what I'm trying to accomplish. Here's (one of many) of my failed

问题 What I'm trying to do is blend two canvases onto a single canvas for a drawing app I am creating. I know Javascript very well, but I really don't have any clue where to start with WebGL and since it isn't a very hard task to do, I'm assuming it would be yield quicker processing speeds if I don't use another library like Three.js or others of that sort. What I already have are canvases that the user will be drawing on (Let's call them canvas A and B) which are both hidden and canvas C which is

问题 I'm making some 3D text using WebGL , three.js , and THREE.TextGeometry . It's working fine so far. I'm able to create a single line of 3D text. Now I want to create multiline text, like a short paragraph. Preferably, I'd like it to wrap naturally when it reaches the border of a box/rectangle its placed it in. I want a similar behavior that standard HTML text has when it's inside of a div, wrapping to multiple lines when it reaches the edge of it's parent div. Here's how I'm creating a single

问题 I am trying to measure the time it takes for an image in webgl to load. I was thinking about using gl.finish() to get a timestamp before and after the image has loaded and subtracting the two to get an accurate measurement, however I couldn't find a good example for this kind of usage. Is this sort of thing possible, and if so can someone provide a sample code? 回答1: No it is not. In fact in Chrome gl.finish is just a gl.flush . See the code and search for "::finish". Because Chrome is multi

问题 I'm implementing a 2D game with lots of independent rectangular game pieces of various dimensions. The dimensions of each piece do not change between frames. Most of the pieces will display an image and share the same fragment shader. I am new to WebGL and it is not clear to me what the best strategy is for managing vertex buffers in regard to performance for this situation. Is it better to use a single vertex buffer (quad) to represent all of the game's pieces and then rescale those vertices

问题 I'm trying to get a small example together that uses d3-zoom to provide simple interactivity to a canvas element that renders using WebGL. All I'd like to do is provide panning/zooming, which is fairly straightforward using a 4x4 transformation matrix. The issue I'm having is with zooming (scaling). If you take a look at some of the d3-zoom examples, you'll see that the zooming focal point is always at the location of the mouse. If you use the k , tx , and ty , values from the zoom transform

问题 This question already has answers here : Canvas toDataURL() returns blank image (1 answer) Why does my canvas go blank after converting to image? (2 answers) Closed 4 years ago . I can't get toDataUrl() to work. Here's my code where I'm trying to get an image of the canvas and use it as the source of an existing image element. var canvas = document.getElementById('glcanvas'); canvas.setAttribute('crossOrigin','anonymous'); var img = document.getElementById('imageToShowCanvas'); img.src =