WebGPUTextureUtils.js 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. // Copyright 2020 Brandon Jones
  2. //
  3. // Permission is hereby granted, free of charge, to any person obtaining a copy
  4. // of this software and associated documentation files (the "Software"), to deal
  5. // in the Software without restriction, including without limitation the rights
  6. // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  7. // copies of the Software, and to permit persons to whom the Software is
  8. // furnished to do so, subject to the following conditions:
  9. // The above copyright notice and this permission notice shall be included in
  10. // all copies or substantial portions of the Software.
  11. // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  12. // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  13. // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  14. // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  15. // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  16. // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  17. // SOFTWARE.
  18. import { GPUIndexFormat, GPUFilterMode, GPUPrimitiveTopology } from './constants.js';
  19. // ported from https://github.com/toji/web-texture-tool/blob/master/src/webgpu-mipmap-generator.js
  20. class WebGPUTextureUtils {
  21. constructor( device ) {
  22. this.device = device;
  23. const mipmapVertexSource = `
  24. [[ block ]]
  25. struct VarysStruct {
  26. [[ builtin( position ) ]] Position: vec4<f32>;
  27. [[ location( 0 ) ]] vTex : vec2<f32>;
  28. };
  29. [[ stage( vertex ) ]]
  30. fn main( [[ builtin( vertex_index ) ]] vertexIndex : u32 ) -> VarysStruct {
  31. var Varys: VarysStruct;
  32. var pos = array< vec2<f32>, 4 >(
  33. vec2<f32>( -1.0, 1.0 ),
  34. vec2<f32>( 1.0, 1.0 ),
  35. vec2<f32>( -1.0, -1.0 ),
  36. vec2<f32>( 1.0, -1.0 )
  37. );
  38. var tex = array< vec2<f32>, 4 >(
  39. vec2<f32>( 0.0, 0.0 ),
  40. vec2<f32>( 1.0, 0.0 ),
  41. vec2<f32>( 0.0, 1.0 ),
  42. vec2<f32>( 1.0, 1.0 )
  43. );
  44. Varys.vTex = tex[ vertexIndex ];
  45. Varys.Position = vec4<f32>( pos[ vertexIndex ], 0.0, 1.0 );
  46. return Varys;
  47. }
  48. `;
  49. const mipmapFragmentSource = `
  50. [[ group( 0 ), binding( 0 ) ]]
  51. var imgSampler : sampler;
  52. [[ group( 0 ), binding( 1 ) ]]
  53. var img : texture_2d<f32>;
  54. [[ stage( fragment ) ]]
  55. fn main( [[ location( 0 ) ]] vTex : vec2<f32> ) -> [[ location( 0 ) ]] vec4<f32> {
  56. return textureSample( img, imgSampler, vTex );
  57. }
  58. `;
  59. this.sampler = device.createSampler( { minFilter: GPUFilterMode.Linear } );
  60. // We'll need a new pipeline for every texture format used.
  61. this.pipelines = {};
  62. this.mipmapVertexShaderModule = device.createShaderModule( {
  63. code: mipmapVertexSource
  64. } );
  65. this.mipmapFragmentShaderModule = device.createShaderModule( {
  66. code: mipmapFragmentSource
  67. } );
  68. }
  69. getMipmapPipeline( format ) {
  70. let pipeline = this.pipelines[ format ];
  71. if ( pipeline === undefined ) {
  72. pipeline = this.device.createRenderPipeline( {
  73. vertex: {
  74. module: this.mipmapVertexShaderModule,
  75. entryPoint: 'main',
  76. },
  77. fragment: {
  78. module: this.mipmapFragmentShaderModule,
  79. entryPoint: 'main',
  80. targets: [ { format } ],
  81. },
  82. primitive: {
  83. topology: GPUPrimitiveTopology.TriangleStrip,
  84. stripIndexFormat: GPUIndexFormat.Uint32
  85. }
  86. } );
  87. this.pipelines[ format ] = pipeline;
  88. }
  89. return pipeline;
  90. }
  91. generateMipmaps( textureGPU, textureGPUDescriptor ) {
  92. const pipeline = this.getMipmapPipeline( textureGPUDescriptor.format );
  93. const commandEncoder = this.device.createCommandEncoder( {} );
  94. const bindGroupLayout = pipeline.getBindGroupLayout( 0 ); // @TODO: Consider making this static.
  95. let srcView = textureGPU.createView( {
  96. baseMipLevel: 0,
  97. mipLevelCount: 1
  98. } );
  99. for ( let i = 1; i < textureGPUDescriptor.mipLevelCount; i ++ ) {
  100. const dstView = textureGPU.createView( {
  101. baseMipLevel: i,
  102. mipLevelCount: 1
  103. } );
  104. const passEncoder = commandEncoder.beginRenderPass( {
  105. colorAttachments: [ {
  106. view: dstView,
  107. loadValue: [ 0, 0, 0, 0 ]
  108. } ]
  109. } );
  110. const bindGroup = this.device.createBindGroup( {
  111. layout: bindGroupLayout,
  112. entries: [ {
  113. binding: 0,
  114. resource: this.sampler
  115. }, {
  116. binding: 1,
  117. resource: srcView
  118. } ]
  119. } );
  120. passEncoder.setPipeline( pipeline );
  121. passEncoder.setBindGroup( 0, bindGroup );
  122. passEncoder.draw( 4, 1, 0, 0 );
  123. passEncoder.endPass();
  124. srcView = dstView;
  125. }
  126. this.device.queue.submit( [ commandEncoder.finish() ] );
  127. }
  128. }
  129. export default WebGPUTextureUtils;