OR show scenarios that 99 percent of games won't even feature! Plus, all the demos i hav seen show "problems" that can be solved by simple batching. How can you say that you are rolling out this feature early " to get feedback and improve quicker", when the Android mobile platform, the only one truly in need for optimization was left out?Īll other platforms can make use of much more powerful hardware and cheat by increasing power consumption. # consider adding event listener for video pause to set value as.Since you seem connected to the dev teams working on this, I'll share a little confusion. Gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0) Gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, verticesIndexBuffer) # Specify the texture to map onto the faces. Gl.vertexAttribPointer(attributes, 2, gl.FLOAT, false, 0, 0) Gl.bindBuffer(gl.ARRAY_BUFFER, positionsBuffer) Gl.useProgram(program) //# apply our program UpdateTexture() //# update pixels with current video frame's pixels. Var cancelAnimationFrame = (window.cancelAnimationFrame || window.mozCancelAnimationFrame) Window.webkitRequestAnimationFrame || window.msRequestAnimationFrame) Var requestAnimationFrame = (window.requestAnimationFrame || window.mozRequestAnimationFrame || # Vars for video frame grabbing when system/browser provides a new frame get the location of attributes and uniforms If (gl & gl instanceof WebGLRenderingContext) Var video = document.getElementById('myVideo') Ĭonst glcanvas = document.getElementById('m圜anvas') Ĭonst gl = ( ( glcanvas.getContext("webgl") ) || ( glcanvas.getContext("experimental-webgl") ) ) Gl_FragColor.b = ( gl_FragColor.b * 0.45 ) Gl_FragColor.g = ( gl_FragColor.g * 0.8 ) Gl_FragColor.r = ( gl_FragColor.r * 1.15 ) Gl_FragColor = texture2D(uSampler, vec2(vDirection.x * 0.5 + 0.5, vDirection.y * 0.5 + 0.5)) # get current video pixel's color (no FOR-loops needed like in JS Canvas) (see code part at: //# example of basic colour effect). If any coders just want to do GPU pixel effects then write your effects code in the Fragment shader. The example code below also creates some required GPU shaders and programs. Hope its useful to you.īasically you create a box/rectangle shape using two triangles and then project the video onto that rectangle. Here is an example code to setup a webGL object that can receive your video pixels. Var canvas = document.querySelector("canvas") Var video = document.querySelector("video") I just need to write the JavaScript function to somehow draw the texture. Unity lets you run JavaScript code from inside its C# scripts, so timing probably won't be an issue, nor getting the world scale/location of the target plane. ts (MPEG-2 Transport Stream) video segments and queue them up into a coherent video stream, but Unity's built-in video player doesn't support this format.Īs a solution, I thought I might grab the video in an HTML5 player (using hls.js if necessary) and inject the texture into the WebGL app, using JavaScript, every frame. To give some context, I'm trying to show an HLS live-stream inside my Unity/WebGL app. I don't know how to grab those from the video player and pass them, or if that's fast enough to be done every frame. I found a similar question here, but unfortunately, the answers show how to draw what I assume are pre-loaded textures. ![]() You can see the test project in this GitHub repo. I used my own, local video file, so it can't be CORS, but I don't know what it is. However, I don't entirely understand how it works, and when I tried testing it, I received the following exception: Uncaught DOMException: The operation is insecure. ![]() The closest 3D equivalent I've been able to find for that function is WebGL2RenderingContext.texImage3D(). I know you can call drawImage() on a CanvasRenderingContext2D and pass in a reference to the video player, and the current frame will be drawn to the canvas when the function's run. ![]() ![]() I'm using Unity to build my app to WebGL, and I've found myself needing to grab video from an HTML player and draw it on a plane in the 3D space.
0 Comments
Leave a Reply. |