{{ theme }}
22 |
23 | ### Page Data
24 | {{ page }}
25 |
26 | ### Page Frontmatter
27 | {{ frontmatter }}
28 | ```
29 |
30 |
35 |
36 | ## Results
37 |
38 | ### Theme Data
39 | {{ theme }}
40 |
41 | ### Page Data
42 | {{ page }}
43 |
44 | ### Page Frontmatter
45 | {{ frontmatter }}
46 |
47 | ## More
48 |
49 | Check out the documentation for the [full list of runtime APIs](https://vitepress.dev/reference/runtime-api#usedata).
50 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2020 HU SONG
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
--------------------------------------------------------------------------------
/src/web/decodeImageData.ts:
--------------------------------------------------------------------------------
1 | export const decodeImageBitmap = (function () {
2 | const getGlContext = (function () {
3 | let gl: WebGL2RenderingContext | null = null;
4 | return function () {
5 | if (!gl) {
6 | const canvas = new OffscreenCanvas(128, 128);
7 | gl = canvas.getContext("webgl2", { premultipliedAlpha: false });
8 | }
9 | return gl as WebGL2RenderingContext;
10 | };
11 | })();
12 |
13 | return async function webglDecode(imageBuffer: Uint8Array) {
14 | const gl = getGlContext();
15 | const imageBitmap = await createImageBitmap(new Blob([imageBuffer]));
16 | let texture = gl.createTexture();
17 | gl.bindTexture(gl.TEXTURE_2D, texture);
18 | gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, imageBitmap);
19 |
20 | let framebuffer = gl.createFramebuffer();
21 | gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
22 | gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
23 |
24 | let width = imageBitmap.width;
25 | let height = imageBitmap.height;
26 | let pixels = new Uint8Array(width * height * 4);
27 | gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
28 |
29 | gl.deleteTexture(texture);
30 | gl.deleteFramebuffer(framebuffer);
31 |
32 | return {
33 | data: new Uint8Array(pixels),
34 | width,
35 | height
36 | };
37 | };
38 | })();
39 |
--------------------------------------------------------------------------------
/docs/enumerations/BasisTextureType.md:
--------------------------------------------------------------------------------
1 | [**ktx2-encoder**](../README.md)
2 |
3 | ***
4 |
5 | [ktx2-encoder](../globals.md) / BasisTextureType
6 |
7 | # Enumeration: BasisTextureType
8 |
9 | Defined in: [enum.ts:1](https://github.com/gz65555/ktx2-encoder/blob/7c4de41129ab790944f9dc093b94cea7ef1d2328/src/enum.ts#L1)
10 |
11 | ## Enumeration Members
12 |
13 | ### cBASISTexType2D
14 |
15 | > **cBASISTexType2D**: `0`
16 |
17 | Defined in: [enum.ts:2](https://github.com/gz65555/ktx2-encoder/blob/7c4de41129ab790944f9dc093b94cea7ef1d2328/src/enum.ts#L2)
18 |
19 | ***
20 |
21 | ### cBASISTexType2DArray
22 |
23 | > **cBASISTexType2DArray**: `1`
24 |
25 | Defined in: [enum.ts:3](https://github.com/gz65555/ktx2-encoder/blob/7c4de41129ab790944f9dc093b94cea7ef1d2328/src/enum.ts#L3)
26 |
27 | ***
28 |
29 | ### cBASISTexTypeCubemapArray
30 |
31 | > **cBASISTexTypeCubemapArray**: `2`
32 |
33 | Defined in: [enum.ts:4](https://github.com/gz65555/ktx2-encoder/blob/7c4de41129ab790944f9dc093b94cea7ef1d2328/src/enum.ts#L4)
34 |
35 | ***
36 |
37 | ### cBASISTexTypeVideoFrames
38 |
39 | > **cBASISTexTypeVideoFrames**: `3`
40 |
41 | Defined in: [enum.ts:5](https://github.com/gz65555/ktx2-encoder/blob/7c4de41129ab790944f9dc093b94cea7ef1d2328/src/enum.ts#L5)
42 |
43 | ***
44 |
45 | ### cBASISTexTypeVolume
46 |
47 | > **cBASISTexTypeVolume**: `4`
48 |
49 | Defined in: [enum.ts:6](https://github.com/gz65555/ktx2-encoder/blob/7c4de41129ab790944f9dc093b94cea7ef1d2328/src/enum.ts#L6)
50 |
--------------------------------------------------------------------------------
/website/markdown-examples.md:
--------------------------------------------------------------------------------
1 | # Markdown Extension Examples
2 |
3 | This page demonstrates some of the built-in markdown extensions provided by VitePress.
4 |
5 | ## Syntax Highlighting
6 |
7 | VitePress provides Syntax Highlighting powered by [Shiki](https://github.com/shikijs/shiki), with additional features like line-highlighting:
8 |
9 | **Input**
10 |
11 | ````md
12 | ```js{4}
13 | export default {
14 | data () {
15 | return {
16 | msg: 'Highlighted!'
17 | }
18 | }
19 | }
20 | ```
21 | ````
22 |
23 | **Output**
24 |
25 | ```js{4}
26 | export default {
27 | data () {
28 | return {
29 | msg: 'Highlighted!'
30 | }
31 | }
32 | }
33 | ```
34 |
35 | ## Custom Containers
36 |
37 | **Input**
38 |
39 | ```md
40 | ::: info
41 | This is an info box.
42 | :::
43 |
44 | ::: tip
45 | This is a tip.
46 | :::
47 |
48 | ::: warning
49 | This is a warning.
50 | :::
51 |
52 | ::: danger
53 | This is a dangerous warning.
54 | :::
55 |
56 | ::: details
57 | This is a details block.
58 | :::
59 | ```
60 |
61 | **Output**
62 |
63 | ::: info
64 | This is an info box.
65 | :::
66 |
67 | ::: tip
68 | This is a tip.
69 | :::
70 |
71 | ::: warning
72 | This is a warning.
73 | :::
74 |
75 | ::: danger
76 | This is a dangerous warning.
77 | :::
78 |
79 | ::: details
80 | This is a details block.
81 | :::
82 |
83 | ## More
84 |
85 | Check out the documentation for the [full list of markdown extensions](https://vitepress.dev/guide/markdown).
86 |
--------------------------------------------------------------------------------
/website/.vitepress/theme/index.ts:
--------------------------------------------------------------------------------
1 | // .vitepress/theme/index.js
2 |
3 | import { setup } from "@css-render/vue3-ssr";
4 | import { NConfigProvider } from "naive-ui";
5 | import { useRoute } from "vitepress";
6 | import DefaultTheme from "vitepress/theme";
7 | import { defineComponent, h, inject } from "vue";
8 |
9 | const { Layout } = DefaultTheme;
10 |
11 | const CssRenderStyle = defineComponent({
12 | setup() {
13 | const collect: any = inject("css-render-collect");
14 | return {
15 | style: collect()
16 | };
17 | },
18 | render() {
19 | return h("css-render-style", {
20 | innerHTML: this.style
21 | });
22 | }
23 | });
24 |
25 | const VitepressPath = defineComponent({
26 | setup() {
27 | const route = useRoute();
28 | return () => {
29 | return h("vitepress-path", null, [route.path]);
30 | };
31 | }
32 | });
33 |
34 | const NaiveUIProvider = defineComponent({
35 | render() {
36 | return h(
37 | NConfigProvider,
38 | { abstract: true, inlineThemeDisabled: true },
39 | {
40 | default: () => [
41 | h(Layout, null, { default: this.$slots.default?.() }),
42 | // @ts-ignore
43 | import.meta.env.SSR ? [h(CssRenderStyle), h(VitepressPath)] : null
44 | ]
45 | }
46 | );
47 | }
48 | });
49 |
50 | export default {
51 | extends: DefaultTheme,
52 | Layout: NaiveUIProvider,
53 | enhanceApp: ({ app }) => {
54 | // @ts-ignore
55 | if (import.meta.env.SSR) {
56 | const { collect } = setup(app);
57 | app.provide("css-render-collect", collect);
58 | }
59 | }
60 | };
61 |
--------------------------------------------------------------------------------
/test/node.test.ts:
--------------------------------------------------------------------------------
1 | import { expect, test } from "vitest";
2 | import { encodeToKTX2 } from "../src/node";
3 | import { readFile } from "fs/promises";
4 | import sharp from "sharp";
5 |
6 | async function imageDecoder(buffer: Uint8Array) {
7 | const image = sharp(buffer);
8 | const metadata = await image.metadata();
9 | const { width, height } = metadata;
10 | const rawBuffer = await image.ensureAlpha().raw().toBuffer();
11 | const data = new Uint8Array(rawBuffer);
12 |
13 | // 创建 imageData 对象
14 | const imageData = {
15 | width: width!,
16 | height: height!,
17 | data
18 | };
19 |
20 | return imageData;
21 | }
22 |
23 | test("uastc", { timeout: Infinity }, async () => {
24 | const buffer = await readFile("./public/tests/DuckCM.png");
25 | const result = await encodeToKTX2(new Uint8Array(buffer), {
26 | isUASTC: true,
27 | enableDebug: false,
28 | qualityLevel: 230,
29 | generateMipmap: true,
30 | imageDecoder
31 | });
32 |
33 | const resultBuffer = await readFile("./public/tests/DuckCM-uastc.ktx2");
34 | const testArray = Array.from(new Uint8Array(resultBuffer));
35 | const resultArray = Array.from(result);
36 | expect(testArray).toEqual(resultArray);
37 | });
38 |
39 | test("etc1s", { timeout: Infinity }, async () => {
40 | const buffer = await readFile("./public/tests/DuckCM.png");
41 | const result = await encodeToKTX2(new Uint8Array(buffer), {
42 | isUASTC: false,
43 | enableDebug: false,
44 | qualityLevel: 230,
45 | generateMipmap: true,
46 | imageDecoder
47 | });
48 |
49 | const resultBuffer = await readFile("./public/tests/DuckCM-etc1s.ktx2");
50 | const testArray = Array.from(new Uint8Array(resultBuffer));
51 | const resultArray = Array.from(result);
52 | expect(testArray).toEqual(resultArray);
53 | });
54 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # ktx2-encoder
2 |
3 | [](https://www.npmjs.com/package/ktx2-encoder)
4 | [](https://github.com/gz65555/ktx2-encoder)
5 |
6 | A lightweight JavaScript library for converting images to KTX2 (.ktx2) format. Powered by [BinomialLLC/basis_universal](https://github.com/BinomialLLC/basis_universal).
7 |
8 | ## Features
9 |
10 | - Convert images to KTX2 format
11 | - Support for both 2D images and cubemaps
12 | - Integration with gltf-transform
13 | - Support both Browser and Node.js
14 |
15 | ## Quick Start
16 |
17 | Install:
18 |
19 | ```shell
20 | npm install --save ktx2-encoder
21 | ```
22 |
23 | Import:
24 |
25 | ```javascript
26 | import { encodeToKTX2, encodeKTX2Cube } from 'ktx2-encoder';
27 | ```
28 |
29 | Usage:
30 |
31 | ```javascript
32 | // encode a 2D image
33 | encodeToKTX2(data /** ArrayBuffer of png */, options);
34 | // encode a cube map
35 | encodeKTX2Cube([data, ...] /** ArrayBuffer of png */, options);
36 | ```
37 |
38 | See [options](./docs/interfaces/IEncodeOptions.md) API documentation for more details.
39 |
40 | ## For gltf-transform
41 |
42 | For the users of [gltf-transform](https://gltf-transform.dev/), you can use the provided function `ktx`. For example:
43 |
44 | ```typescript
45 | import { ktx2 } from "ktx2-encoder/gltf-transform";
46 |
47 | await document.transform(
48 | ktx2({
49 | isUASTC: true,
50 | enableDebug: false,
51 | generateMipmap: true,
52 | wasmUrl: "/basis_encoder.wasm"
53 | })
54 | );
55 |
56 | ```
57 |
58 | > **Note:** It's recommended to host the `basis_encoder.wasm` file on your own server.
59 |
60 | ## Tool
61 |
62 | Open the page of [ktx2 encoder tool](https://husong.me/ktx2-encoder/tools), you can use it to encode your image to ktx2.
63 |
64 |
--------------------------------------------------------------------------------
/website/guide/advanced.md:
--------------------------------------------------------------------------------
1 | # Advanced Usage
2 |
3 | ## Compression Formats
4 |
5 | ### ETC1S vs UASTC
6 |
7 | KTX2-Encoder supports two compression formats:
8 |
9 | - **ETC1S**: Better compression ratios, good for most textures
10 | - **UASTC**: Higher quality, better for normal maps and HDR textures
11 |
12 | Choose between them using the `isUASTC` option:
13 |
14 | ```typescript
15 | // Use ETC1S compression
16 | const ktx2Data = await encodeToKTX2(imageBuffer, {
17 | isUASTC: false
18 | });
19 |
20 | // Use UASTC compression
21 | const ktx2Data = await encodeToKTX2(imageBuffer, {
22 | isUASTC: true
23 | });
24 | ```
25 |
26 | ### Quality Settings
27 |
28 | For ETC1S compression:
29 |
30 | ```typescript
31 | const options = {
32 | isUASTC: false,
33 | qualityLevel: 128, // Range: 1-255
34 | compressionLevel: 2 // Range: 0-6
35 | };
36 | ```
37 |
38 | For UASTC compression:
39 |
40 | ```typescript
41 | const options = {
42 | isUASTC: true,
43 | needSupercompression: true // Enable Zstandard supercompression
44 | };
45 | ```
46 |
47 | ## Node.js Usage
48 |
49 | When using in Node.js, you need to provide an image decoder:
50 |
51 | ```typescript
52 | import sharp from 'sharp';
53 |
54 | const imageDecoder = async (buffer: Uint8Array) => {
55 | const { data, info } = await sharp(buffer)
56 | .raw()
57 | .ensureAlpha()
58 | .toBuffer({ resolveWithObject: true });
59 |
60 | return {
61 | data: new Uint8Array(data),
62 | width: info.width,
63 | height: info.height
64 | };
65 | };
66 |
67 | const ktx2Data = await encodeToKTX2(pngBuffer, {
68 | imageDecoder
69 | });
70 | ```
71 |
72 | ## Custom KV Data
73 |
74 | You can include custom key-value metadata in the KTX2 file:
75 |
76 | ```typescript
77 | const ktx2Data = await encodeToKTX2(imageBuffer, {
78 | kvData: {
79 | 'myKey': 'myValue',
80 | 'customData': new Uint8Array([1, 2, 3])
81 | }
82 | });
--------------------------------------------------------------------------------
/test/web.test.ts:
--------------------------------------------------------------------------------
1 | import { expect, test } from "vitest";
2 | import { CubeBufferData, encodeToKTX2 } from "../src/web";
3 |
4 | test("uastc", async () => {
5 | const buffer = await fetch("/tests/DuckCM.png").then((res) => res.arrayBuffer());
6 | const result = await encodeToKTX2(new Uint8Array(buffer), {
7 | isUASTC: true,
8 | enableDebug: false,
9 | qualityLevel: 230,
10 | generateMipmap: true,
11 | wasmUrl: "/basis_encoder.wasm"
12 | });
13 |
14 | const resultBuffer = await fetch("/tests/DuckCM-uastc.ktx2").then((res) => res.arrayBuffer());
15 | expect(result).toEqual(new Uint8Array(resultBuffer));
16 | });
17 |
18 | test("etc1s", async () => {
19 | const buffer = await fetch("/tests/DuckCM.png").then((res) => res.arrayBuffer());
20 | const result = await encodeToKTX2(new Uint8Array(buffer), {
21 | isUASTC: false,
22 | enableDebug: false,
23 | qualityLevel: 230,
24 | generateMipmap: true
25 | });
26 |
27 | const resultBuffer = await fetch("/tests/DuckCM-etc1s.ktx2").then((res) => res.arrayBuffer());
28 | expect(result).toEqual(new Uint8Array(resultBuffer));
29 | });
30 |
31 | test("textureCube", async () => {
32 | await Promise.all([
33 | fetch("/tests/cubemap/posx.jpg").then((res) => res.arrayBuffer()),
34 | fetch("/tests/cubemap/negx.jpg").then((res) => res.arrayBuffer()),
35 | fetch("/tests/cubemap/posy.jpg").then((res) => res.arrayBuffer()),
36 | fetch("/tests/cubemap/negy.jpg").then((res) => res.arrayBuffer()),
37 | fetch("/tests/cubemap/posz.jpg").then((res) => res.arrayBuffer()),
38 | fetch("/tests/cubemap/negz.jpg").then((res) => res.arrayBuffer())
39 | ]).then(async (buffers) => {
40 | const result = await encodeToKTX2(buffers.map((buffer) => new Uint8Array(buffer)) as CubeBufferData, {
41 | isUASTC: false,
42 | enableDebug: false,
43 | qualityLevel: 230,
44 | generateMipmap: false
45 | });
46 | // TODO: check the result
47 | expect(result).toBeDefined();
48 | });
49 | });
50 |
--------------------------------------------------------------------------------
/src/applyInputOptions.ts:
--------------------------------------------------------------------------------
1 | import { IEncodeOptions, IBasisEncoder } from "./type.js";
2 | import { DefaultOptions } from "./utils.js";
3 |
4 | export function applyInputOptions(options: Partial
130 |
131 |
132 | Click or drag a KTX2 file to upload
147 | Only .ktx2 files are supported
148 |
149 |
150 |
151 |
152 |
153 |
154 |
181 |
--------------------------------------------------------------------------------
/src/type.ts:
--------------------------------------------------------------------------------
1 | import type { BasisTextureType, HDRSourceType, SourceType } from "./enum.js";
2 |
3 | export type CubeBufferData = [Uint8Array, Uint8Array, Uint8Array, Uint8Array, Uint8Array, Uint8Array];
4 | /**
5 | * which is defined in [basis_wrappers.cpp](https://github.com/BinomialLLC/basis_universal/blob/df079eca71cf83481c45059dce2165348dc1a5ea/webgl/transcoder/basis_wrappers.cpp#L1830)
6 | */
7 | export interface IBasisEncoder {
8 | /**
9 | * Sets the slice's source image, either from a PNG file or from a raw 32-bit RGBA raster image.
10 | * The first texel is the top-left texel. The texel byte order in memory is R,G,B,A (R first at offset 0, A last at offset 3).
11 | * @param sliceIndex sliceIndex is the slice to change. Valid range is [0,BASISU_MAX_SLICES-1].
12 | * @param imageBuffer png image buffer or 32bit RGBA raster image buffer
13 | * @param width if isPNG is true, width set 0.
14 | * @param height if isPNG is true, height set 0.
15 | * @param type type of the input source.
16 | */
17 | setSliceSourceImage(
18 | sliceIndex: number,
19 | imageBuffer: Uint8Array,
20 | width: number,
21 | height: number,
22 | type: SourceType
23 | ): void;
24 | /**
25 | * Compresses the provided source slice(s) to an output .basis file.
26 | * At the minimum, you must provided at least 1 source slice by calling setSliceSourceImage() before calling this method.
27 | * @param pngBuffer
28 | * @returns byte length of encoded data
29 | */
30 | encode(pngBuffer: Uint8Array): number;
31 | /**
32 | * If true, the encoder will output a UASTC texture, otherwise a ETC1S texture.
33 | * @param isUASTC
34 | */
35 | setUASTC(isUASTC: boolean): void;
36 | /**
37 | * Sets the basis texture type, default is cBASISTexType2D
38 | * @param texType texType is enum BasisTextureType
39 | */
40 | setTexType(texType: BasisTextureType): void;
41 | /**
42 | * Use UASTC Zstandard supercompression. Defaults to disabled or KTX2_SS_NONE
43 | */
44 | setKTX2UASTCSupercompression(needSupercompression: boolean): void;
45 | /**
46 | * If true the source images will be Y flipped before compression.
47 | */
48 | setYFlip(isYFlip: boolean): void;
49 | /**
50 | * Enables debug output to stdout
51 | * @param isDebug
52 | */
53 | setDebug(isDebug: boolean): void;
54 | /**
55 | * Sets the ETC1S encoder's quality level, which controls the file size vs. quality tradeoff.
56 | * Default is -1 (meaning unused - the compressor will use m_max_endpoint_clusters/m_max_selector_clusters instead to control the codebook sizes).
57 | * @param level Range is [1, 255]
58 | */
59 | setQualityLevel(level: number): void;
60 | /**
61 | * The compression_level parameter controls the encoder perf vs. file size tradeoff for ETC1S files.
62 | * @param level Default is 2, range is [0, 6]
63 | */
64 | setCompressionLevel(level: number): void;
65 | /**
66 | * setNormalMapMode is the same as the basisu.exe "-normal_map" option. It tunes several codec parameters so compression works better on normal maps.
67 | */
68 | setNormalMap(): void;
69 | /**
70 | * Create .KTX2 files instead of .basis files. By default this is FALSE.
71 | * @param isKTX2
72 | */
73 | setCreateKTX2File(isKTX2: boolean): void;
74 | /**
75 | * If true mipmaps will be generated from the source images
76 | * @param needGenMipmap
77 | */
78 | setMipGen(needGenMipmap: boolean): void;
79 | /**
80 | * Use sRGB transfer func in the file's DFD. Default is FALSE. This should very probably match the "perceptual" setting.
81 | * @param srgbTransferFunc need sRGB transfer func
82 | */
83 | setKTX2SRGBTransferFunc(srgbTransferFunc: boolean): void;
84 | /**
85 | * If true, the input is assumed to be in sRGB space. Be sure to set this correctly! (Examples: True on photos, albedo/spec maps, and false on normal maps.)
86 | */
87 | setPerceptual(perceptual: boolean): void;
88 |
89 | /** release memory */
90 | delete(): void;
91 |
92 | /** If true, the RDO post-processor will be applied to the encoded UASTC texture data. */
93 | setRDOUASTC(rdoUASTC: boolean): void;
94 |
95 | // Default is 1.0 range is [0.001, 10.0]
96 | setRDOUASTCQualityScalar(rdo_quality: number): void;
97 |
98 | /** Default is 4096, range is [64, 65535] */
99 | setRDOUASTCDictSize(dictSize: number): void;
100 |
101 | /** Default is 10.0f, range is [01, 100.0] */
102 | setRDOUASTCMaxAllowedRMSIncreaseRatio(rdo_uastc_max_allowed_rms_increase_ratio: number): void;
103 |
104 | /** Default is 8.0f, range is [.01f, 100.0f] */
105 | setRDOUASTCSkipBlockRMSThresh(rdo_uastc_skip_block_rms_thresh: number): void;
106 |
107 | /**
108 | * Sets the max # of endpoint clusters for ETC1S mode. Use instead of setQualityLevel.
109 | * Default is 512, range is [1, 16128]
110 | */
111 | setMaxEndpointClusters(max_endpoint_clusters: number): void;
112 |
113 | /**
114 | * Sets the max # of selectors clusters for ETC1S mode. Use instead of setQualityLevel.
115 | * Default is 512, range is [1, 16128]
116 | */
117 | setMaxSelectorClusters(max_selector_clusters: number): void;
118 |
119 | /** Default is BASISU_DEFAULT_SELECTOR_RDO_THRESH, range is [0,1e+10] */
120 | setSelectorRDOThresh(selector_rdo_thresh: number): void;
121 |
122 | /** Default is BASISU_DEFAULT_ENDPOINT_RDO_THRESH, range is [0,1e+10] */
123 | setEndpointRDOThresh(endpoint_rdo_thresh: number): void;
124 |
125 | /**
126 | * Sets the UASTC(LDR) encoding performance vs. quality tradeoff, and other lesser used UASTC encoder flags.
127 | * @param - packUastcFlags 0-4, default is 1, the value is higher, the UASTC's quality is higher
128 | */
129 | setPackUASTCFlags(packUastcFlags: number): void;
130 |
131 | /**
132 | * Enable HDR mode. Only supported for UASTC encoding.
133 | * @param enableHDR Whether to enable HDR encoding mode
134 | */
135 | setHDR(enableHDR: boolean): void;
136 |
137 | /**
138 | * Sets the quality vs. encoder performance tradeoff (0-4, default is 1). Higher=slower but better quality.
139 | * @param level - Quality level(0-4), default is 1
140 | */
141 | setUASTCHDRQualityLevel(level: number): void;
142 |
143 | /**
144 | * setSliceSourceImageHDR is the same as setSliceSourceImage, but for HDR images.
145 | * If the input is a raster image, the buffer must be width*height*4 bytes in size. The raster image is stored in top down scanline order.
146 | * @param sliceIndex - sliceIndex is the slice to change. Valid range is [0,BASISU_MAX_SLICES-1].
147 | * @param imageBuffer - png image buffer or 32bit RGBA raster image buffer
148 | * @param width - if it is not raster image, width set 0.
149 | * @param height - if it is not raster image, height set 0.
150 | * @param type - type of the input source.
151 | * @param ldrSrgbToLinear - If true, the input is assumed to be in sRGB space.
152 | */
153 | setSliceSourceImageHDR(
154 | sliceIndex: number,
155 | imageBuffer: Uint8Array,
156 | width: number,
157 | height: number,
158 | type: HDRSourceType,
159 | ldrSrgbToLinear: boolean
160 | ): void;
161 |
162 | new (): IBasisEncoder;
163 | }
164 |
165 | export interface IBasisModule {
166 | BasisEncoder: IBasisEncoder;
167 | initializeBasis: () => void;
168 | }
169 |
170 | interface HDROptions extends BasisOptions {
171 | /**
172 | * Enable HDR mode. Only supported for UASTC encoding.
173 | */
174 | isHDR: true;
175 | /**
176 | * Image type
177 | */
178 | imageType: "hdr" | "exr" | "raster";
179 | /**
180 | * HDR quality level
181 | */
182 | hdrQualityLevel?: number;
183 | }
184 | interface LDROptions extends BasisOptions {
185 | /**
186 | * Enable HDR mode. Only supported for UASTC encoding.
187 | * Default is false.
188 | */
189 | isHDR?: false;
190 | }
191 |
192 | interface BasisOptions {
193 | /**
194 | * enable debug output, default is false
195 | */
196 | enableDebug?: boolean;
197 | /**
198 | * is UASTC texture, default is true
199 | */
200 | isUASTC?: boolean;
201 | /**
202 | * if true the source images will be Y flipped before compression, default is false
203 | */
204 | isYFlip?: boolean;
205 | /**
206 | * Sets the ETC1S encoder's quality level, which controls the file size vs. quality tradeoff.
207 | */
208 | qualityLevel?: number;
209 | /**
210 | * The compression_level parameter controls the encoder perf vs. file size tradeoff for ETC1S files.
211 | */
212 | compressionLevel?: number;
213 | /**
214 | * Use UASTC Zstandard supercompression. Defaults to disabled or KTX2_SS_NONE.
215 | */
216 | needSupercompression?: boolean;
217 | /**
218 | * uastcLDRQualityLevel 0-3, default is 1, the value is higher, the UASTC's quality is higher.
219 | */
220 | uastcLDRQualityLevel?: number;
221 | /**
222 | * enableRDO(UASTC LDR), default is false.
223 | */
224 | enableRDO?: boolean;
225 | /**
226 | * RDO quality level, 0 - 10 float number, default is 1.0.
227 | */
228 | rdoQualityLevel?: number;
229 | /**
230 | * setNormalMapMode is the same as the basisu.exe "-normal_map" option. It tunes several codec parameters so compression works better on normal maps.
231 | */
232 | isNormalMap?: boolean;
233 |
234 | /**
235 | * If true, the input is assumed to be in sRGB space. Be sure to set this correctly! (Examples: True on photos, albedo/spec maps, and false on normal maps.)
236 | */
237 | isPerceptual?: boolean;
238 | /**
239 | * Input source is sRGB. This should very probably match the "perceptual" setting.
240 | */
241 | isSetKTX2SRGBTransferFunc?: boolean;
242 | /**
243 | * If true mipmaps will be generated from the source images
244 | */
245 | generateMipmap?: boolean;
246 | /**
247 | * Create .KTX2 files instead of .basis files. By default this is FALSE.
248 | */
249 | isKTX2File?: boolean;
250 |
251 | /** kv data */
252 | kvData?: Record
133 |
134 |
144 |
145 |
146 |
5 |
6 |
7 |
17 |
18 |
20 |
21 |
22 |
24 |
25 |
26 |
28 |
29 |
30 |
32 |
33 |
34 |
36 |
37 |
38 |
40 |
41 |
42 |
44 |
45 |
46 |
48 |
49 |
50 |
52 |
53 |
57 |
59 |
60 |
61 |
63 |
64 |
65 |
73 |
74 |
75 |
8 |
9 | Select Image
10 |
11 |
15 |
16 |
12 | ![Preview]()
13 |
14 |
66 |
67 | {{ loading ? "Encoding..." : "Encode to KTX2" }}
68 |
69 |
70 |
71 |
5 |
6 |
7 |
20 |
21 |
23 |
24 |
25 |
27 |
28 |
29 |
31 |
32 |
33 |
35 |
36 |
37 |
39 |
40 |
41 |
43 |
44 |
45 |
47 |
48 |
49 |
51 |
52 |
53 |
55 |
56 |
60 |
62 |
63 |
64 |
70 |
71 |
72 |
74 |
75 |
76 |
84 |
85 |
86 |
8 |
9 | Select 6 Faces (posx, negx, posy, negy, posz, negz)
10 |
11 |
18 |
19 |
12 |
17 |
13 | ![]()
14 |
16 | {{ faceOrder[i] }}
15 |
77 |
78 | {{ loading ? "Encoding..." : "Encode to KTX2 (Cubemap)" }}
79 |
80 |
81 |
82 |