WebGL | 易学教程

Stream data to rtmp server from webgl or canvas

阅读更多关于 Stream data to rtmp server from webgl or canvas

问题 I'm looking for ways to stream data from an webgl or canvas element, being rendered on client browser, to a remote rtmp server - live. Any help would be highly appreciated. 来源： https://stackoverflow.com/questions/40830341/stream-data-to-rtmp-server-from-webgl-or-canvas

Writing Pure HTML in Jade

阅读更多关于 Writing Pure HTML in Jade

问题 Jade appears to choke on WebGL shader/fragment blocks when writing in Jade format, so I would like to write them as straight HTML while still being able to write Jade around it. Is this possible? 回答1: These: html body | <h1>Title</h1> | <p>foo bar baz</p> compiles into: <!DOCTYPE html> <html> <body> <h1>Title</h1> <p>foo bar baz</p> </body> </html> hope it helps 来源： https://stackoverflow.com/questions/16404582/writing-pure-html-in-jade

How to control camera both with keyboard and mouse - three.js

阅读更多关于 How to control camera both with keyboard and mouse - three.js

问题 I have a 3D enviroment in WEB GL with three.js and I used to use orbitcontrols.js (http://codepen.io/nireno/pen/cAoGI like this project) to move the point of view. Now I saw a nice way to move inside the enviroment with W A S D keys (http://stemkoski.github.io/Three.js/Chase-Camera.html) like in an FPS (but not with pointerlocking etc) also using orbitcontrols.js . The problem is that when I impelmentes the last functionality, I lost the first functionality with the mouse (I removed the

How to create a Texture from a ArrayBuffer in html5 and WebGL

阅读更多关于 How to create a Texture from a ArrayBuffer in html5 and WebGL

问题 I am having a image that I am reading in server side and pushing to web browser via AJAX call. I have a requirement where I have to render them line by line using WebGL. For Example : Image is 640X480 where 640 is width and 480 is height. Now the total number of pixels will be 640*480 = 307200 pixels. So, I want to render the whole image in 640(total width) intervals in a loop using WebGL. Now I have texture2D(as per my knowledge) in webgl to do so, but not getting any idea of where to start

Creating NPAPI plugin in Delphi and accessing exported APIs using javascript

阅读更多关于 Creating NPAPI plugin in Delphi and accessing exported APIs using javascript

问题 I have found a useful billards physics library in Borland delphi for my hobby project. The code is object oriented(in Object pascal). I want to visualize it using webGL (javascript) in chrome browser. The idea is, I should have one call to make from the javascript which will access the interface from delphi lib and give me the new position, rotation and scale values in respective array. For this I want to develop an NPAPI lib Scriptable plugin in Delphi(Meaning NO UI only lib of APIs). 1)I

Adding buttons and controls on HTML5 canvas

阅读更多关于 Adding buttons and controls on HTML5 canvas

问题 I'm using the three.js 3D engine. How can I add UI buttons on my WebGL canvas? 回答1: Use CSS to absolute positioning HTML elements over <canvas> . <canvas> is just like all other HTML elements and the same tricks work on it. http://css-tricks.com/absolute-positioning-inside-relative-positioning/ 来源： https://stackoverflow.com/questions/12343053/adding-buttons-and-controls-on-html5-canvas

Why I can't use uniform1f instead of uniform4f for setting a vec4 uniform?

阅读更多关于 Why I can't use uniform1f instead of uniform4f for setting a vec4 uniform?

问题 I learn WebGL step by step via this book. I try to draw three points through using of the buffer ( gl.ARRAY_BUFFER ) instead of cycle (as I did the same earlier in other samples of the book). var u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor'); if(!u_FragColor){ console.log('Can\'t to get the "u_FragColor" variable.'); return -1; } // gl.uniform1f(u_FragColor, 1.0); // <- this variant doesn't work! Why? gl.uniform4f(u_FragColor, 1.0, 0.0, 0.0, 1.0); It works fine, but I have a

How can I flip the result of WebGLRenderingContext.readPixels()?

阅读更多关于 How can I flip the result of WebGLRenderingContext.readPixels()?

问题 Why is the imageData that I get from WebGLRenderingContext.readPixels() upside down? I try to do the folowing: var gl = renderer.domElement.getContext("webgl") var pixels = new Uint8Array(gl.drawingBufferWidth * gl.drawingBufferHeight * 4); gl.readPixels(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight, gl.RGBA, gl.UNSIGNED_BYTE, pixels); var imageData = new ImageData(Uint8ClampedArray.from(pixels), gl.drawingBufferWidth, gl.drawingBufferHeight); ctx.putImageData(imageData, 0, 0); but the

debugging webgl in chrome

阅读更多关于 debugging webgl in chrome

问题 I have a webgl page running in chrome. Every now and then chrome will report the following error. [.WebGLRenderingContext]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to render with no buffer attached to enabled attribute 1 I've tried to debug where the error is occurring but I cannot. I can reliably cause it to occur, but when I debug the error is reported on seemingly random lines. I suspect this is because of the asynchronous nature of gpu rendering. Is there a good way to

How to add closing tag for canvas in three js rendered Canvas?

阅读更多关于 How to add closing tag for canvas in three js rendered Canvas?

问题 three js always adds canvas elements without a closing tag to the page, is there any specific reason behind that? I want to add a closing tag on this canvas element. Example page , inspecting the page shows, some thing like this. Why I want this closing tag might be silly, I am trying to get the context using context = canvas.getContext('2d'); But it returns null , so tried some solutions here, none worked and Came across this answer, So I suspect the missing closing tag may be an issue. What