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? 回答1: 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

问题 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

问题 I have created a Google Cardboard scene using Three.js StereoEffect effect = new THREE.StereoEffect(renderer); effect.render(scene, camera); Now I want to run it through the FXAA Shader to smooth the output. I know I can do this using the EffectComposer: renderScene = new THREE.RenderPass(scene, camera); effectFXAA = new THREE.ShaderPass(THREE.FXAAShader); effectFXAA.uniforms['resolution'].value.set(1 / (window.innerWidth * dpr), 1 / (window.innerHeight * dpr)); effectFXAA.renderToScreen =

问题 I'm working on some WebGL code that has multiple shader programs that run sequentially. Previously, I was using gl.enableVertexAttribArray(...) as required during initialization for my gl context and shaders. I assumed, perhaps incorrectly, that calling this function was setting state specific to the program selected by gl.useProgram(...) Now, my first shader program has two enabled attribute arrays, and my second one has one enabled. When the second program runs, I get an error: Error: WebGL

问题 I have a giant shader that takes more than a minute to compile, which completely stalls whole browser during the process. As far as I know shader compilation cannot be made asynchronous, so you can run other WebGL commands while waiting for compilation to be done. I already tried the following: don't use that particular shader for some time - this doesn't work, because most other WebGL commands will wait for it to finish, even if that shader program is never made active use another context -

问题 Just recently Google made available Maps GL on the GMaps platform. We have an HTML5 app that's heavily maps based, and we'd love to try out the new map rendering that's based on WebGL. Already we're noticing the potential performance benefits. Does anyone know how to switch API v3 to Maps GL rendering or other ways to implement it? 回答1: WebGL maps hasn't been added to the API yet so you cannot enable it. 回答2: I've opened up a feature request for this in the issues tracker: http://code.google

问题 Is there any way to let the browser returns the opengl version string? I know that opengl is not executed by the browser, this is why in the code, the shaders are written as string to not make javascript syntax errors, So, if the browser can interract with the GPU, then there must be some code that returns a string to the console instead of shaders? 回答1: The short answer is, you can't. You can ask for the standard GL versions. const gl = document.createElement("canvas").getContext("webgl");

问题 I'm trying to apply a bump map to a plane to create a vaguely felt-like surface using Three.js r55. Here's my code: var mapHeight = THREE.ImageUtils.loadTexture("images/felt.png"); mapHeight.repeat.set(2, 2); mapHeight.wrapS = mapHeight.wrapT = THREE.RepeatWrapping; mapHeight.format = THREE.RGBFormat; var groundMaterial = new THREE.MeshPhongMaterial({ ambient: 0x008800, color: 0x008800, specular: 0x888888, shininess: 25, bumpMap: mapHeight, bumpScale: 10, metal: false } ); scene.add(new THREE

问题 I have an object with a mesh that uses a semi-transparent png texture. Is there a flag or option for the MeshBasicMaterial so that the back of the object is visible through the front? Here is some sample code: var texture = THREE.ImageUtils.loadTexture('world.png'); // create the sphere's material var sphereMaterial = new THREE.MeshBasicMaterial({ map: texture, transparent: true, blending: THREE.AdditiveAlpha }); sphereMaterial.depthTest = false; // set up the sphere vars var radius = 50,

问题 I have a canvas for showing medical image and I have another canvas for annotating images by draw shape or line. when I draw a line on canvas#2 I want to copy drawn line on canvas#1 something like this: var context = canvas1.getContext('2d'); context.drawImage(canvas2,0,0); but beacuase my canvas#1 has a getcontext('webgl') i cant do that. I mean how to simulate drawImage() for getcontext('webgl')? I really appreciate any help or advice. Regards; Zohreh 回答1: Well, you could just use the