WebGL

问题 I am drawing circles/ellipses in WebGL using a single Quad and a fragment shader, in order to draw them in a resolution independent manner (Edge distance anti-aliasing) Here is my fragment shader currently: '#extension GL_OES_standard_derivatives : enable', 'precision mediump float;', 'varying vec2 coord;', 'vec4 circleColor = vec4(1.0, 0.5, 0.0, 1.0);', 'vec4 outlineColor = vec4(0.0, 0.0, 0.0, 1.0);', 'uniform float strokeWidth;', 'float outerEdgeCenter = 0.5 - strokeWidth;', 'void main(void

问题 I have a program that works great when my POT DataTextures are 1:1 (width:height) in their texel dimensions, however when they are 2:1 or 1:2 in texel dimensions it appears that the texels are being incorrectly read and applied. I'm using continuous indexes (1,2,3,4,5...) to access the texels using the two functions below. I'm wondering if there is something wrong with how I am accessing the texel data, or perhaps if my use of a Float32Array for the integer indexes needs to be switched to a

问题 You can find the original question below about LUMINANCE_ALPHA but I realized I was wrong about my problem. The real question should have been : How can we efficiently check the output value done on a canvas drawn using webgl ? Is using the webgl canvas as an image to draw it in a 2D canvas and get the values using getImageData() a good idea ? const webglCanvas = ...; const offCanvas = document.createElement('canvas'); offCanvas.style.background = 'black'; offCanvas.width = canvas.width;

问题 I am using WebGL from a WebView in Android. For detecting whether WebGL is supported or not, I am using this function. Android KitKat devices do not have WebGL support enabled, as mentioned everywhere. However, in my 4.4.2 test device, the detection function is returning true, and when invoking http://webglreport.com from a WebView it also says WebGL1 is supported. Unsurprisingly, nothing gets rendered. So I would like to avoid using the WebGL version of the page if WebGL is not going to work

问题 Looking for a decision about a realtime plotting of rather a large data stream. I would like to process it via a GPU to reduce memory costs. I have found a WebGL example: // Fill the buffer with the values that define a triangle. function setGeometry(gl) { gl.bufferData( gl.ARRAY_BUFFER, new Float32Array([ 0, -100, 150, 125, -175, 100]), gl.STATIC_DRAW); } And would like to clarify something: Does gl.ARRAY_BUFFER create a buffer inside a GPU, not inside a RAM? Is WebGL stable on linux? UPDATE

问题 chrome://gpu shows green for everything and "WebGL: Hardware accelerated WebGL multisampling: Hardware accelerated" my version is: Google Chrome 31.0.1650.63 and I've set the flag " Override software rendering list Mac, Windows, Linux, Chrome OS, Android Overrides the built-in software rendering list and enables GPU-acceleration on unsupported system configurations. #ignore-gpu-blacklist " to enabled. But if I ' File -> Open -> index.html ' where the index.html has webGL and three.js I see

问题 I am developing VR html5 page in javascript (no jQuery or other frameworks) that uses WebGL to render a sphere and has texture to which streamed video is rendered into. All that works fine on iPhone 6, 6+, however on Android I've hit the wall - simply, video is not being transferred into texture (gl.texSubImage2D). Texture remains black. No WebGL errors thrown. So I have created a test, without WebGL, that just tries to play a video and draw it's frames into canvas2D, so I can at least verify

问题 I am referring to this Link and trying the same in my local. However, the code works without any problem, if I change the source of image of any width*height, but it fails to load (shows a black image) if I prepare a Uint8Array and then render it. Here's my Code: function renderImage (u8a) { if(dataTypedArray != null) { gl.clear(gl.COLOR_BUFFER_BIT || gl.DEPTH_BUFFER_BIT); u8a = dataTypedArray; image.width = tempImg.width; image.height = tempImg.height; gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA

问题 is there a way (probably with webGL, maybe also with three.js) to curve an html element inwards? (So it looks like the new panoramic samsung TV, for example). Just to be clear - I do not want to create a curved plane and use an image as a texture. It's a dynamic div - a video player, with an interactive skin to be exact, and I want to curved inward) THANKS! :) 回答1: Not sure if there is a direct way , but here is a hack with :before and :after pseudo element to achieve an inward curve. #video

问题 I have a scene where one light is present, and diamonds. Light properties: Point light, position: 0 0 30, intensity: 1, distance 60, color: White. The diamonds material is Phong, color:Red, no emissive, specular: White, shininess 10. On Chrome, the diamons shine as suppose to, but on Firefox the diamonds not shine at all, and looks very dark (like have something black on it). I have tried to use both Firefox on desktop Windows and Android mobile phone. I would like to ask what I am missing?