Add perceptual and srgb mipmap flag

codecs/basis/enc/basis_enc.cpp

@@ -12,6 +12,8 @@ struct BasisOptions {
   uint8_t compression;
   bool uastc;
   bool mipmap;
+  bool srgb_mipmap;
+  bool perceptual;
 };
 
 thread_local const val Uint8Array = val::global("Uint8Array");
@@ -46,7 +48,10 @@ val encode(std::string image_in, int image_width, int image_height, BasisOptions
   // Needs to be exposed as an option
   params.m_ktx2_uastc_supercompression = basist::KTX2_SS_ZSTANDARD;
 
+  params.m_perceptual = opts.perceptual;
+
   params.m_mip_gen = opts.mipmap;
+  params.m_mip_srgb = opts.srgb_mipmap;
   params.m_mip_filter = "box";
   params.m_quality_level = opts.quality;
   params.m_compression_level = opts.compression;
@@ -74,7 +79,9 @@ EMSCRIPTEN_BINDINGS(my_module) {
       .field("quality", &BasisOptions::quality)
       .field("compression", &BasisOptions::compression)
       .field("uastc", &BasisOptions::uastc)
-      .field("mipmap", &BasisOptions::mipmap);
+      .field("perceptual", &BasisOptions::perceptual)
+      .field("mipmap", &BasisOptions::mipmap)
+      .field("srgb_mipmap", &BasisOptions::srgb_mipmap);
 
   function("encode", &encode);
 }

codecs/basis/enc/basis_enc.d.ts

@@ -3,6 +3,8 @@ export interface EncodeOptions {
   compression: number;
   uastc: boolean;
   mipmap: boolean;
+  srgb_mipmap: boolean;
+  perceptual: boolean;
 }
 
 export interface BasisModule extends EmscriptenWasm.Module {

codecs/basis/enc/basis_enc.js

@@ -971,9 +971,9 @@ function updateGlobalBufferAndViews(buf) {
   Module['HEAPF64'] = HEAPF64 = new Float64Array(buf);
 }
 
-var STACK_BASE = 5878144,
+var STACK_BASE = 5878176,
     STACKTOP = STACK_BASE,
-    STACK_MAX = 635264;
+    STACK_MAX = 635296;
 
 var TOTAL_STACK = 5242880;
 

src/features/encoders/basis/client/index.tsx

@@ -46,17 +46,16 @@ export class Options extends Component<Props, State> {
     const newOptions: EncodeOptions = {
       // Copy over options the form doesn't currently care about, eg arithmetic
       ...this.props.options,
-      uastc: inputFieldChecked(
+      uastc: inputFieldChecked(form.uastc, options.uastc),
-        form.uastc,
+      perceptual: inputFieldChecked(form.perceptual, options.perceptual),
-        options.uastc,
+      mipmap: inputFieldChecked(form.mipmap, options.mipmap),
-      ),
+      srgb_mipmap: inputFieldChecked(form.srgb_mipmap, options.srgb_mipmap),
-      mipmap: inputFieldChecked(
-        form.mipmap,
-        options.mipmap,
-      ),
       // .value
       quality: inputFieldValueAsNumber(form.quality, options.quality),
-      compression: inputFieldValueAsNumber(form.compression, options.compression),
+      compression: inputFieldValueAsNumber(
+        form.compression,
+        options.compression,
+      ),
     };
     this.props.onChange(newOptions);
   };
@@ -95,7 +94,9 @@ export class Options extends Component<Props, State> {
           />
           Advanced settings
         </label>
-          <Expander>{showAdvanced ? (<div>
+        <Expander>
+          {showAdvanced ? (
+            <div>
               <label class={style.optionToggle}>
                 UASTC
                 <Checkbox
@@ -104,6 +105,14 @@ export class Options extends Component<Props, State> {
                   onChange={this.onChange}
                 />
               </label>
+              <label class={style.optionToggle}>
+                Perceptual distance metric
+                <Checkbox
+                  name="perceptual"
+                  checked={options.perceptual}
+                  onChange={this.onChange}
+                />
+              </label>
               <label class={style.optionToggle}>
                 Embed Mipmaps
                 <Checkbox
@@ -112,8 +121,21 @@ export class Options extends Component<Props, State> {
                   onChange={this.onChange}
                 />
               </label>
-
+              <Expander>
-        </div>) : null}</Expander>
+                {options.mipmap ? (
+                  <label class={style.optionToggle}>
+                    sRGB Mipmapping
+                    <Checkbox
+                      name="srgb_mipmap"
+                      checked={options.srgb_mipmap}
+                      onChange={this.onChange}
+                    />
+                  </label>
+                ) : null}
+              </Expander>
+            </div>
+          ) : null}
+        </Expander>
       </form>
     );
   }

src/features/encoders/basis/shared/meta.ts

@@ -22,4 +22,6 @@ export const defaultOptions: EncodeOptions = {
   compression: 2,
   uastc: false,
   mipmap: false,
+  srgb_mipmap: false,
+  perceptual: true,
 };