WebGL

问题 I have gone through this as a example on how to render a normal texture to a canvas using WebGL and successfully implemented it. Now I am trying to implement a scrolling image where I am getting line by line pixel data from another machine in the same network via Ajax Polling or Websockets and have to render the same using WebGL to canvas. So, now I know we can easily render 60 frames per second which means if I get 50 lines of pixel data per second from another computer in the network ,I

问题 I'm using glfx.js to edit my image but when I'm trying to get that image's data using the toDataURL() function I get a blank image (width the same size as the original image). The strange thing is that in Chrome the script works perfect. What I want to mention is that the image is loaded in canvas using the onload event: img.onload = function(){ try { canvas = fx.canvas(); } catch (e) { alert(e); return; } // convert the image to a texture texture = canvas.texture(img); // draw and update

问题 I am currently struggling with memory management inside a webgl application on the web, on iOS only. I keep getting the following error message : Application 'UIKitApplication:com.apple.Preferences[0xa7c1]' was killed by jetsam. I understand that Jetsam is the system process responsible for memory management, but the crash occurs while the browser uses around 25% of the device's RAM, which is not that high. I don't have any other open application while running my webGL content. What I don't

问题 I'm trying to make use of the built-in shadow map plugin in three.js. After initial difficulties I have more or less acceptable image with one last glitch. That one being shadow appearing on top some (all?) surfaces, with normal 0,0,1. Below are pictures of the same model. Three.js Preview.app (Mac) And the code used to setup shadows: var shadowLight = new THREE.DirectionalLight(0xFFFFFF); shadowLight.position.x = cx + dmax/2; shadowLight.position.y = cy - dmax/2; shadowLight.position.z =

问题 I know that we can specify attributes for a WebGL context when we create the context: var ctx = myCanvas.getContext(‘webgl’, attributes); Is there a method that we can call to set the attributes of ctx after ctx has been created? For instance, can we do something akin to var ctx = myCanvas.getContext(‘webgl’); ctx.setAttributes(attributes); 回答1: That would require being able to change the attributes of a context. Which you're not allowed to do. They're fixed at context creation time. 回答2:

问题 Currently JsBridge supports only getContext("2d") and not getContext("webgl"). public object getContext(string contextType) { if (contextType == "2d") { if (this.context == null) { this.context = new CanvasRenderingContext2D(this.window, this); } return this.context; } return null; } Ideally, to make JsBridge supports 3D, one needs public object getContext(string contextType) { if (contextType == "2d") { if (this.context == null) { this.context = new CanvasRenderingContext2D(this.window, this

问题 How To get 2d Snapshot of Three.js 3D Scene ?? I need to get 2D Snapshot of my 3D scene like a panoramic image.(Full 360 snapshot) Demo Used:- http://patcat.com/demos/VRWeatherParticles/ I tried this solution :- 1. How do you save an image from a Three.js canvas? 2. Three.js: How can I make a 2D SnapShot of a Scene as a JPG Image? When i do (what mentioned in Link 2) :- renderer = new THREE.WebGLRenderer({ preserveDrawingBuffer: true }); var strMime = "image/jpeg"; imgData = renderer

问题 I have added a normal map to a model in Three.js that is mirrored down the middle. It looks like one of the channels (green perhaps?) is flipped on the mirrored side. I have one ambient light, one directional headlight, and one spotlight. Here is the code that I use to make the material: // Create a MeshPhongMaterial for the model var material = new THREE.MeshPhongMaterial(); material.map = THREE.ImageUtils.loadTexture(texture_color); // Wrapping modes //THREE.RepeatWrapping = 1000; //THREE

问题 I found strange behavior of WebGL when it is rendering with blending turned off. I reproduced it on this simplest tutorial. Just change strings: gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); to gl_FragColor = vec4(0.0, 0.0, 0.0, 0.5); and gl.clearColor(0.0, 0.0, 0.0, 1.0); to gl.clearColor(1.0, 1.0, 1.0, 1.0); So, since blending is turned off, I supposed to see black shapes on white background (alpha 0.5 of the pixel shouldn't make influence). But I see gray shapes on white backgound. I believe I

问题 I'm using Eclipse but I have problems with it not showing any code hints or code completion for Javascript or any imported external scripts (Three.js). Are there any more suitable web development environments out there? 回答1: You can try Brackets with some plugins like JSLint 回答2: If you're wanting code-hints or code-completion, TernJS sounds like something you could try. It can be integrated into editors like Vim, Emacs or Sublime Text. When writing JS files, you'll be able to get the JS