{"id":4447,"date":"2016-10-03T09:12:36","date_gmt":"2016-10-03T15:12:36","guid":{"rendered":"http:\/\/www.realtimerendering.com\/blog\/?p=4447"},"modified":"2016-10-03T09:14:00","modified_gmt":"2016-10-03T15:14:00","slug":"webgl-2-new-features","status":"publish","type":"post","link":"https:\/\/www.realtimerendering.com\/blog\/webgl-2-new-features\/","title":{"rendered":"WebGL 2: New Features"},"content":{"rendered":"

by Shuai Shao
\ng<\/a>ithub repo for article here<\/a><\/em><\/p>\n

Last time<\/a> we showed how to deal with issues porting a WebGL 1 engine to WebGL 2. In this article, we will talk about what new features come with WebGL 2 and what cool things can we do with them.<\/p>\n

<\/a>New features<\/h1>\n

<\/a>Multisampled Renderbuffers<\/h2>\n

Previously, if we wanted antialiasing we would either have to render it to the default backbuffer or perform our own post-process AA (such as FXAA or SMAA<\/a>) on content rendered to a texture.<\/p>\n

Now, with Multisampled Renderbuffers, we can use the general rendering pipeline in WebGL to provide multisampled antialiasing (MSAA):<\/p>\n

pre-z pass –> rendering pass to FBO –> postprocessing pass –> render to window<\/p><\/blockquote>\n

renderbufferStorageMultisample<\/code> is the relevant function here.<\/p>\n

\n
var<\/span> colorRenderbuffer =<\/span> gl<\/span>.createRenderbuffer<\/span>();\r\ngl<\/span>.bindRenderbuffer<\/span>(gl<\/span>.RENDERBUFFER<\/span>, colorRenderbuffer);\r\ngl<\/span>.renderbufferStorageMultisample<\/span>(gl<\/span>.RENDERBUFFER<\/span>, 4<\/span>, gl<\/span>.RGBA8<\/span>, FRAMEBUFFER_SIZE<\/span>.x<\/span>, FRAMEBUFFER_SIZE<\/span>.y<\/span>);\r\n\r\ngl<\/span>.bindFramebuffer<\/span>(gl<\/span>.FRAMEBUFFER<\/span>, framebuffers[FRAMEBUFFER<\/span>.RENDERBUFFER<\/span>]);\r\ngl<\/span>.framebufferRenderbuffer<\/span>(gl<\/span>.FRAMEBUFFER<\/span>, gl<\/span>.COLOR_ATTACHMENT0<\/span>, gl<\/span>.RENDERBUFFER<\/span>, colorRenderbuffer);\r\ngl<\/span>.bindFramebuffer<\/span>(gl<\/span>.FRAMEBUFFER<\/span>, null<\/span>);<\/pre>\n<\/div>\n
Pay attention to the fact that the multisample renderbuffers cannot be directly bound to textures, but they can be resolved to single-sample textures using the blitFramebuffer<\/code> call. This is a new feature in WebGL 2 as well, and is used like this:<\/p>\n
\n
var<\/span> texture =<\/span> gl<\/span>.createTexture<\/span>();\r\ngl<\/span>.bindTexture<\/span>(gl<\/span>.TEXTURE_2D<\/span>, texture);\r\ngl<\/span>.texParameteri<\/span>(gl<\/span>.TEXTURE_2D<\/span>, gl<\/span>.TEXTURE_MAG_FILTER<\/span>, gl<\/span>.NEAREST<\/span>);\r\ngl<\/span>.texParameteri<\/span>(gl<\/span>.TEXTURE_2D<\/span>, gl<\/span>.TEXTURE_MIN_FILTER<\/span>, gl<\/span>.NEAREST<\/span>);\r\ngl<\/span>.texImage2D<\/span>(gl<\/span>.TEXTURE_2D<\/span>, 0<\/span>, gl<\/span>.RGBA<\/span>, FRAMEBUFFER_SIZE<\/span>.x<\/span>, FRAMEBUFFER_SIZE<\/span>.y<\/span>, 0<\/span>, gl<\/span>.RGBA<\/span>, gl<\/span>.UNSIGNED_BYTE<\/span>, null<\/span>);\r\ngl<\/span>.bindTexture<\/span>(gl<\/span>.TEXTURE_2D<\/span>, null<\/span>);\r\n\r\ngl<\/span>.bindFramebuffer<\/span>(gl<\/span>.FRAMEBUFFER<\/span>, framebuffers[FRAMEBUFFER<\/span>.COLORBUFFER<\/span>]);\r\ngl<\/span>.framebufferTexture2D<\/span>(gl<\/span>.FRAMEBUFFER<\/span>, gl<\/span>.COLOR_ATTACHMENT0<\/span>, gl<\/span>.TEXTURE_2D<\/span>, texture, 0<\/span>);\r\ngl<\/span>.bindFramebuffer<\/span>(gl<\/span>.FRAMEBUFFER<\/span>, null<\/span>);\r\n\r\n\/\/ ...<\/span>\r\n\r\n\/\/ After drawing to the multisampled renderbuffers<\/span>\r\ngl<\/span>.bindFramebuffer<\/span>(gl<\/span>.READ_FRAMEBUFFER<\/span>, framebuffers[FRAMEBUFFER<\/span>.RENDERBUFFER<\/span>]);\r\ngl<\/span>.bindFramebuffer<\/span>(gl<\/span>.DRAW_FRAMEBUFFER<\/span>, framebuffers[FRAMEBUFFER<\/span>.COLORBUFFER<\/span>]);\r\ngl<\/span>.clearBufferfv<\/span>(gl<\/span>.COLOR<\/span>, 0<\/span>, [0.0<\/span>, 0.0<\/span>, 0.0<\/span>, 1.0<\/span>]);\r\ngl<\/span>.blitFramebuffer<\/span>(\r\n    0<\/span>, 0<\/span>, FRAMEBUFFER_SIZE<\/span>.x<\/span>, FRAMEBUFFER_SIZE<\/span>.y<\/span>,\r\n    0<\/span>, 0<\/span>, FRAMEBUFFER_SIZE<\/span>.x<\/span>, FRAMEBUFFER_SIZE<\/span>.y<\/span>,\r\n    gl<\/span>.COLOR_BUFFER_BIT<\/span>, gl<\/span>.NEAREST<\/span>\r\n);<\/pre>\n<\/div>\n
<\/a>3D Texture<\/h2>\n
The first thing that comes to mind with 3D textures is volumetric effects, such as fire, smoke, light rays, realistic fog, etc. Now we can bring these features into our WebGL engine. In addition, 3D textures can be used to store medical data such as MRI and CT scans, and are useful when implementing cross-sectioning. 3D textures can also improve performance by using them to cache light for real-time global illumination.<\/p>\n
WebGL 2 support for 3D textures is as good as that for 2D textures. We have fast access speed and native tri-linear interpolation.<\/p>\n
The code for setting up a 3D texture usually has a 2D texture counterpart.<\/p>\n\n\n\n\n\n\n\n\n\n\n
Texture 2D<\/th>\nTexture 3D<\/th>\n<\/tr>\n<\/thead>\n
texImage2D<\/code><\/td>\ntexImage3D<\/code><\/td>\n<\/tr>\n
texSubImage2D<\/code><\/td>\ntexSubImage3D<\/code><\/td>\n<\/tr>\n
copyTexImage2D<\/code><\/td>\ncopyTexImage3D<\/code><\/td>\n<\/tr>\n
compressedTexImage2D<\/code><\/td>\ncompressedTexImage3D<\/code><\/td>\n<\/tr>\n
compressedTexSubImage2D<\/code><\/td>\ncompressedTexSubImage3D<\/code><\/td>\n<\/tr>\n
texStorage2D<\/code><\/td>\ntexStorage3D<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
There are certain elements that do not match exactly. For example, since we have one more dimension, we will have depth<\/code>,\u00a0zoffset<\/code>, and TEXTURE_WRAP_T<\/code> for 3D textures. Also, the internal format and type combinations are not 100% matched.<\/p>\n
The sampler used in shaders is sampler3D<\/code> instead of sampler2D<\/code>.<\/p>\n
Here’s an example setup:<\/p>\n
\n
var<\/span> texture =<\/span> gl<\/span>.createTexture<\/span>();\r\ngl<\/span>.activeTexture<\/span>(gl<\/span>.TEXTURE0<\/span>);\r\ngl<\/span>.bindTexture<\/span>(gl<\/span>.TEXTURE_3D<\/span>, texture);\r\ngl<\/span>.texParameteri<\/span>(gl<\/span>.TEXTURE_3D<\/span>, gl<\/span>.TEXTURE_BASE_LEVEL<\/span>, 0<\/span>);\r\ngl<\/span>.texParameteri<\/span>(gl<\/span>.TEXTURE_3D<\/span>, gl<\/span>.TEXTURE_MAX_LEVEL<\/span>, Math<\/span>.log2<\/span>(SIZE<\/span>));\r\ngl<\/span>.texParameteri<\/span>(gl<\/span>.TEXTURE_3D<\/span>, gl<\/span>.TEXTURE_MIN_FILTER<\/span>, gl<\/span>.LINEAR_MIPMAP_LINEAR<\/span>);\r\ngl<\/span>.texParameteri<\/span>(gl<\/span>.TEXTURE_3D<\/span>, gl<\/span>.TEXTURE_MAG_FILTER<\/span>, gl<\/span>.LINEAR<\/span>);\r\n\r\ngl<\/span>.texImage3D<\/span>(\r\n    gl<\/span>.TEXTURE_3D<\/span>,  \/\/ target<\/span>\r\n    0<\/span>,              \/\/ level<\/span>\r\n    gl<\/span>.R8<\/span>,        \/\/ internalformat<\/span>\r\n    SIZE<\/span>,           \/\/ width<\/span>\r\n    SIZE<\/span>,           \/\/ height<\/span>\r\n    SIZE<\/span>,           \/\/ depth<\/span>\r\n    0<\/span>,              \/\/ border<\/span>\r\n    gl<\/span>.RED<\/span>,         \/\/ format<\/span>\r\n    gl<\/span>.UNSIGNED_BYTE<\/span>,       \/\/ type<\/span>\r\n    data            \/\/ pixel<\/span>\r\n    );\r\n\r\ngl<\/span>.generateMipmap<\/span>(gl<\/span>.TEXTURE_3D<\/span>);<\/pre>\n<\/div>\n
Last but not the least, the 2D Texture Array concept is available with the 3D Texture feature. That is, multiple 2D textures can be stored in an array that can be accessed. It has its own sampler: sampler2DArray<\/code>, but it shares the texImage3D<\/code> GL functions. Here’s an example call:<\/p>\n
\n
gl<\/span>.texImage3D<\/span>(\r\n    gl<\/span>.TEXTURE_2D_ARRAY<\/span>,\r\n    0<\/span>,\r\n    gl<\/span>.RGBA<\/span>,\r\n    IMAGE_SIZE<\/span>.width<\/span>,\r\n    IMAGE_SIZE<\/span>.height<\/span>,\r\n    NUM_IMAGES<\/span>,\r\n    0<\/span>,\r\n    gl<\/span>.RGBA<\/span>,\r\n    gl<\/span>.UNSIGNED_BYTE<\/span>,\r\n    pixels\r\n);<\/pre>\n<\/div>\n
<\/a>Uniform Buffer<\/h2>\n
Setting uniforms for shaders is often a considerable amount of the time spent by an engine. Take the Cesium Globe<\/a> as an example. For regular draw calls, uniform4fv<\/code> is within the top 5 GL functions taking the most execution time. Also, the sum of all uniform[i]fv<\/code> and uniformMatrix[i]fv<\/code> calls is nearly 2.5% of all execution time. That’s quite a large percentage. We always have to call them to update uniform values each frame. What’s more, it can be annoying that we have to make duplicated uniform calls for one same uniform object shared by several shaders.<\/p>\n
Now the Uniform buffer object may bring us a boost in performance by allowing us to store blocks of uniforms in buffers stored on the GPU, just like vertex\/index buffers.\u00a0This can make switching between sets of uniforms faster. Additionally, uniform buffers can be shared by multiple programs at the same time.<\/p>\n
Those are quite a few benefits. But, with so many improvements, the setup routine is about to change a lot. We will have a basic setup example first, and then look at something that might need your attention.<\/p>\n
\n
var<\/span> uniformPerSceneLocation =<\/span> gl<\/span>.getUniformBlockIndex<\/span>(program, '<\/span>PerScene'<\/span><\/span>);\r\ngl<\/span>.uniformBlockBinding<\/span>(program, uniformPerSceneLocation, 2<\/span>);\r\n\/\/...<\/span>\r\nvar<\/span> material =<\/span> new<\/span> Float32Array<\/span>([\r\n    0.1<\/span>, 0.0<\/span>, 0.0<\/span>,  0.0<\/span>,\r\n    0.0<\/span>, 0.5<\/span>, 0.0<\/span>,  0.0<\/span>,\r\n    0.0<\/span>, 0.0<\/span>, 0.5<\/span>,  0.0<\/span>,\r\n    128.0<\/span>, 0.0<\/span>, 0.0<\/span>, 0.0<\/span>\r\n]);\r\nvar<\/span> uniformPerSceneBuffer =<\/span> gl<\/span>.createBuffer<\/span>();\r\ngl<\/span>.bindBuffer<\/span>(gl<\/span>.UNIFORM_BUFFER<\/span>, uniformPerSceneBuffer);\r\ngl<\/span>.bufferData<\/span>(gl<\/span>.UNIFORM_BUFFER<\/span>, material, gl<\/span>.STATIC_DRAW<\/span>);\r\ngl<\/span>.bindBuffer<\/span>(gl<\/span>.UNIFORM_BUFFER<\/span>, null<\/span>);\r\n\/\/...<\/span>\r\n\/\/ Render<\/span>\r\ngl<\/span>.bindBufferBase<\/span>(gl<\/span>.UNIFORM_BUFFER<\/span>, 2<\/span>, uniformPerSceneBuffer);<\/pre>\n<\/div>\n
The first thing that may confuse you is the layout standard (we will focus on std140 here). You can always find the details inOpenGL ES 3.00 Spec<\/a> Page 68.<\/p>\n
One thing that I really want you to notice is:<\/p>\n
when the data member is a three-component vector with components consuming N basic machine units, the base alignment is 4N<\/p><\/blockquote>\n
And:<\/p>\n
If the member is a structure, the base alignment of the structure is N, where N is the largest base alignment value of any of its members, and rounded up to the base alignment of a vec4.<\/p><\/blockquote>\n
Here’s an example:<\/p>\n
\n
struct<\/span> Material\r\n{\r\n    vec3<\/span> ambient;\r\n    vec3<\/span> diffuse;\r\n    vec3<\/span> specular;\r\n    float<\/span> shininess;\r\n};\r\n\r\nuniform<\/span> PerScene\r\n{\r\n    Material material;\r\n} u_perScene;<\/pre>\n<\/div>\n
\n
var<\/span> material =<\/span> new<\/span> Float32Array<\/span>([\r\n    0.1<\/span>, 0.0<\/span>, 0.0<\/span>,  0.0<\/span>,\r\n    0.0<\/span>, 0.5<\/span>, 0.0<\/span>,  0.0<\/span>,\r\n    0.0<\/span>, 0.0<\/span>, 0.5<\/span>,  0.0<\/span>,\r\n    128.0<\/span>, 0.0<\/span>, 0.0<\/span>, 0.0<\/span>\r\n]);<\/pre>\n<\/div>\n
Here we have vec3<\/code>, so our data should add a 0<\/code> for each vec3<\/code> for alignment. Also, since we use a struct to wrap our data, it should be rounded to a multiple of vec4<\/code>. That’s why we have 3 extra zeroes after the float shininess<\/code>.<\/p>\n
Another concern is about updating the uniform block. There are several different approaches that can get us there. However, their performance can vary. It’s pretty tricky to make the most of our uniform block.<\/p>\n
Here are some detailed discussions on Stack Overflow<\/a> and gamedev.net<\/a>.<\/p>\n
But, basically, we can use gl.bufferSubData<\/code> to copy the updated typedArray into the uniform buffers.<\/p>\n
<\/a>Sync Objects<\/h2>\n
Sync objects can be used to synchronize execution between the GL server and the client, which gives you more control over GPU by letting you set a fence to inform the GPU to wait until a set of GL operations have finished. Sync objects are more efficient than gl.finish<\/code>.<\/p>\n
We can get more accurate benchmarks with sync objects. In addition, applications such as image manipulation, where data of each frame comes from the CPU, will benefit from this degree of control.<\/p>\n
<\/a>Query Objects<\/h2>\n
This operation is very useful when we want to do occlusion testing. We can know how many geometries are actually drawn by performing a gl.ANY_SAMPLES_PASSED<\/code> query around a set of draw calls. We can use these queries and so get rid of specialized picking method code.<\/p>\n
Keep in mind that these queries are asynchronous. A query’s result is never available in the same frame that the query is issued. This is different from OpenGL ES 3 where query result may be available in the same frame. It’s an application portability concern.<\/p>\n
\n
gl<\/span>.beginQuery<\/span>(gl<\/span>.ANY_SAMPLES_PASSED<\/span>, query);\r\ngl<\/span>.drawArraysInstanced<\/span>(gl<\/span>.TRIANGLES<\/span>, 0<\/span>, 3<\/span>, 2<\/span>);\r\ngl<\/span>.endQuery<\/span>(gl<\/span>.ANY_SAMPLES_PASSED<\/span>);\r\n\/\/...<\/span>\r\n(function<\/span> tick<\/span>() {\r\n    if<\/span> (!<\/span>gl<\/span>.getQueryParameter<\/span>(query, gl<\/span>.QUERY_RESULT_AVAILABLE<\/span>)) {\r\n        \/\/ A query's result is never available in the same frame<\/span>\r\n        \/\/ the query was issued.  Try in the next frame.<\/span>\r\n        requestAnimationFrame<\/span>(tick);\r\n        return<\/span>;\r\n    }\r\n\r\n    var<\/span> samplesPassed =<\/span> gl<\/span>.getQueryParameter<\/span>(query, gl<\/span>.QUERY_RESULT<\/span>);\r\n    gl<\/span>.deleteQuery<\/span>(query);\r\n})();<\/pre>\n<\/div>\n
<\/a>Sampler Objects<\/h2>\n
In WebGL 1 texture image data and sampling information (which tells GPU how to read the image data) are both stored in texture objects. It can be annoying when we want to read from the same texture twice but with a different method (say, linear filtering vs nearest filtering) because we need to have two texture objects. With sampler objects, we can separate these two concepts. We can have one texture object and two different sampler objects. This will result in a change in how our engine organize textures.<\/p>\n
Here’s an example:<\/p>\n
\n
var<\/span> samplerA =<\/span> gl<\/span>.createSampler<\/span>();\r\ngl<\/span>.samplerParameteri<\/span>(samplerA, gl<\/span>.TEXTURE_MIN_FILTER<\/span>, gl<\/span>.NEAREST_MIPMAP_NEAREST<\/span>);\r\ngl<\/span>.samplerParameteri<\/span>(samplerA, gl<\/span>.TEXTURE_MAG_FILTER<\/span>, gl<\/span>.NEAREST<\/span>);\r\ngl<\/span>.samplerParameteri<\/span>(samplerA, gl<\/span>.TEXTURE_WRAP_S<\/span>, gl<\/span>.CLAMP_TO_EDGE<\/span>);\r\ngl<\/span>.samplerParameteri<\/span>(samplerA, gl<\/span>.TEXTURE_WRAP_T<\/span>, gl<\/span>.CLAMP_TO_EDGE<\/span>);\r\n\r\nvar<\/span> samplerB =<\/span> gl<\/span>.createSampler<\/span>();\r\ngl<\/span>.samplerParameteri<\/span>(samplerB, gl<\/span>.TEXTURE_MIN_FILTER<\/span>, gl<\/span>.LINEAR_MIPMAP_LINEAR<\/span>);\r\ngl<\/span>.samplerParameteri<\/span>(samplerB, gl<\/span>.TEXTURE_MAG_FILTER<\/span>, gl<\/span>.LINEAR<\/span>);\r\ngl<\/span>.samplerParameteri<\/span>(samplerB, gl<\/span>.TEXTURE_WRAP_S<\/span>, gl<\/span>.MIRRORED_REPEAT<\/span>);\r\ngl<\/span>.samplerParameteri<\/span>(samplerB, gl<\/span>.TEXTURE_WRAP_T<\/span>, gl<\/span>.MIRRORED_REPEAT<\/span>);\r\n\r\n\/\/ ...<\/span>\r\n\r\ngl<\/span>.activeTexture<\/span>(gl<\/span>.TEXTURE0<\/span>);\r\ngl<\/span>.bindTexture<\/span>(gl<\/span>.TEXTURE_2D<\/span>, texture);\r\ngl<\/span>.bindSampler<\/span>(0<\/span>, samplerA);\r\n\r\ngl<\/span>.activeTexture<\/span>(gl<\/span>.TEXTURE1<\/span>);\r\ngl<\/span>.bindTexture<\/span>(gl<\/span>.TEXTURE_2D<\/span>, texture);\r\ngl<\/span>.bindSampler<\/span>(1<\/span>, samplerB);<\/pre>\n<\/div>\n
<\/a>Transform Feedback<\/h2>\n
Transform feedback allows the output of the vertex shader to be captured in a buffer object. This is useful for particle systems and simulation that perform on the GPU without any CPU intervention.<\/p>\n
In WebGL 1, when we want to implement such feature, usually a texture storing the states of particles is inevitable. Two textures, to be precise, storing states from previous frame and current frame, and ping-pong between them.<\/p>\n
Here’s an example of the WebGL 1 approach (from toji’s WebGL Particles take 2<\/a>).<\/p>\n
In the first-pass fragment shader, do the simulation, and store the position results in a texture.<\/p>\n
\n
\/\/ First pass - Fragment Shader<\/span>\r\nuniform<\/span> sampler2D<\/span> tPositions;\r\nvarying<\/span> vec2<\/span> vUv;\r\n\/\/ ...<\/span>\r\nvec4<\/span> runSimulation(vec4<\/span> pos) {\r\n    \/\/ simulation<\/span>\r\n    \/\/ ...<\/span>\r\n    return<\/span> pos;\r\n}\r\n\r\nvoid<\/span> main() {\r\n    vec4<\/span> pos =<\/span> texture2D<\/span>( tPositions, vUv );\r\n    \/\/...<\/span>\r\n    pos =<\/span> runSimulation(pos);\r\n\r\n    \/\/ Write new position out<\/span>\r\n    gl_FragColor<\/span> =<\/span> pos;\r\n}<\/pre>\n<\/div>\n
And then we use this position texture as an input for our second pass vertex shader.<\/p>\n
\n
\/\/ Second pass - Vertex Shader<\/span>\r\nattribute<\/span> vec3<\/span> position;\r\nuniform<\/span> float<\/span> pointSize;\r\nuniform<\/span> sampler2D<\/span> map;\r\nvarying<\/span> vec2<\/span> vUv;\r\n\r\n\/\/...<\/span>\r\n\r\nvoid<\/span> main() {\r\n    vUv =<\/span> position.xy +<\/span> vec2<\/span>( 0.5<\/span> \/<\/span> width, 0.5<\/span> \/<\/span> height );\r\n    vec3<\/span> color =<\/span> texture2D<\/span>( map, vUv ).rgb;\r\n    gl_PointSize<\/span> =<\/span> pointSize;\r\n    gl_Position<\/span> =<\/span> projectionMatrix *<\/span> modelViewMatrix *<\/span> vec4<\/span>( color, 1.0<\/span>);\r\n}<\/pre>\n<\/div>\n
What follows\u00a0is how we do it in WebGL 2. With Transform feedback, we can discard the fragment shader in step 1, as well as the texture. We write the output (position) of the vertex shader in step 1 to the vertex attribute array input of step 2. (In practice, you still need a placeholder trivial fragment shader for the first step to correctly compile the program.)<\/p>\n
\n
\/\/ First pass - Vertex Shader<\/span>\r\n\/\/ ...<\/span>\r\nout<\/span> vec3<\/span> v_position;\r\nvoid<\/span> main() {\r\n    \/\/ ...<\/span>\r\n    v_position =<\/span> u_projMatrix *<\/span> u_modelViewMatrix *<\/span> vec4<\/span>(a_position, 1.0<\/span>);\r\n}<\/pre>\n<\/div>\n
\n
\/\/ Second pass - Vertex Shader<\/span>\r\nin<\/span> vec3<\/span> a_position;\r\nvoid<\/span> main() {\r\n    gl_Position<\/span> =<\/span> projectionMatrix *<\/span> modelViewMatrix *<\/span> vec4<\/span>( a_position, 1.0<\/span> );\r\n    \/\/ ...<\/span>\r\n}<\/pre>\n<\/div>\n
And here’s how we bind the buffers (from WebGL2SamplesPack<\/a>):<\/p>\n
\n
var<\/span> transformFeedback =<\/span> gl<\/span>.createTransformFeedback<\/span>();\r\nvar<\/span> varyings =<\/span> ['<\/span>v_position'<\/span><\/span>, \/*...*\/<\/span>];\r\ngl<\/span>.transformFeedbackVaryings<\/span>(programTransform, varyings, gl<\/span>.SEPARATE_ATTRIBS<\/span>);\r\n\/\/ ...<\/span>\r\ngl<\/span>.bindBuffer<\/span>(gl<\/span>.ARRAY_BUFFER<\/span>, particleVBOs[i][Particle<\/span>.POSITION<\/span>]);\r\ngl<\/span>.bufferData<\/span>(gl<\/span>.ARRAY_BUFFER<\/span>, particlePositions, gl<\/span>.STREAM_COPY<\/span>);\r\n\/\/ ...<\/span>\r\ngl<\/span>.bindTransformFeedback<\/span>(gl<\/span>.TRANSFORM_FEEDBACK<\/span>, transformFeedback);\r\ngl<\/span>.bindBufferBase<\/span>(gl<\/span>.TRANSFORM_FEEDBACK_BUFFER<\/span>, 0<\/span>, particleVBOs[(currentSourceIdx +<\/span> 1<\/span>) %<\/span> 2<\/span>][Particle<\/span>.POSITION<\/span>]);\r\ngl<\/span>.enable<\/span>(gl<\/span>.RASTERIZER_DISCARD<\/span>);   \/\/ we are not drawing<\/span>\r\ngl<\/span>.beginTransformFeedback<\/span>(gl<\/span>.POINTS<\/span>);\r\n\r\ngl<\/span>.drawArrays<\/span>(gl<\/span>.POINTS<\/span>, 0<\/span>, NUM_PARTICLES<\/span>);\r\n\r\ngl<\/span>.endTransformFeedback<\/span>();\r\ngl<\/span>.disable<\/span>(gl<\/span>.RASTERIZER_DISCARD<\/span>);\r\n\r\ngl<\/span>.bindBufferBase<\/span>(gl<\/span>.TRANSFORM_FEEDBACK_BUFFER<\/span>, 0<\/span>, null<\/span>);<\/pre>\n<\/div>\n
<\/a>A set of new texture features:<\/h2>\n
Here is a list of the new texture features in WebGL 2.<\/p>\n