🛠️ Texture options

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gsots3d",
-  "version": "0.0.5-alpha.11",
+  "version": "0.0.5-alpha.12",
   "description": "Getting S**t On The Screen in 3D. A library for doing 3D graphics in the browser.",
   "author": "Ben Coleman",
   "license": "MIT",

src/core/cache.ts

@@ -5,7 +5,7 @@
 
 import log from 'loglevel'
 import { Model } from '../renderable/model.ts'
-import { ProgramInfo, createTexture } from 'twgl.js'
+import { ProgramInfo, TextureOptions, createTexture } from 'twgl.js'
 
 /** @ignore */
 export const PROG_DEFAULT = 'phong'
@@ -155,8 +155,16 @@ export class TextureCache {
    * @param src URL or filename path of texture image, or ArrayBufferView holding texture
    * @param filter Enable texture filtering and mipmaps (default true)
    * @param flipY Flip the texture vertically (default true)
+   * @param textureKey Unique key, only used for ArrayBuffer textures
+   * @param extraOptions Extra options to pass to twgl.createTexture, see https://twgljs.org/docs/module-twgl.html#.TextureOptions
    */
-  getCreate(src: string | ArrayBufferView, filter = true, flipY = false, textureKey = '') {
+  getCreate(
+    src: string | ArrayBufferView,
+    filter = true,
+    flipY = false,
+    textureKey = '',
+    extraOptions: TextureOptions = {},
+  ) {
     let key = ''
 
     if (typeof src === 'string') {
@@ -180,6 +188,7 @@ export class TextureCache {
     const texture = createTexture(
       this.gl,
       {
+        ...extraOptions,
         min: filter ? this.gl.LINEAR_MIPMAP_LINEAR : this.gl.NEAREST,
         mag: filter ? this.gl.LINEAR : this.gl.NEAREST,
         src,

src/core/gl.ts

@@ -9,6 +9,9 @@ import log from 'loglevel'
 /** A map of uniforms that can be used when WebGL rendering, typically applied with twlg.setUniforms() */
 export type UniformSet = { [key: string]: number | number[] | mat4 | WebGLTexture | null }
 
+/** This type https://twgljs.org/docs/module-twgl.html#.TextureOptions without exposing twgl types directly */
+export type TextureOptions = { [key: string]: number | string | boolean | number[] }
+
 // Memoized global WebGL2 context
 let glContext: WebGL2RenderingContext | undefined
 

src/engine/material.ts

@@ -6,7 +6,7 @@
 import * as twgl from 'twgl.js'
 import { RGB } from './tuples.ts'
 import { MtlMaterial } from '../parsers/mtl-parser.ts'
-import { UniformSet } from '../core/gl.ts'
+import { UniformSet, TextureOptions } from '../core/gl.ts'
 import { TextureCache } from '../core/cache.ts'
 
 export class Material {
@@ -158,16 +158,22 @@ export class Material {
    * @param src URL or filename path of texture image, or ArrayBufferView holding texture
    * @param filter Enable texture filtering and mipmaps (default true)
    * @param flipY Flip the texture vertically (default false)
+   * @param extraOptions Extra options to pass to twgl.createTexture, see https://twgljs.org/docs/module-twgl.html#.TextureOptions
    */
-  static createBasicTexture(src: string | ArrayBufferView, filter = true, flipY = false) {
+  static createBasicTexture(
+    src: string | ArrayBufferView,
+    filter = true,
+    flipY = false,
+    extraOptions: TextureOptions = {},
+  ) {
     const m = new Material()
 
     if (typeof src === 'string') {
-      m.diffuseTex = TextureCache.instance.getCreate(src, filter, flipY)
+      m.diffuseTex = TextureCache.instance.getCreate(src, filter, flipY, '', extraOptions)
     } else {
       // Invent a unique key for this texture
       const key = `arraybuffer_${TextureCache.size}`
-      m.diffuseTex = TextureCache.instance.getCreate(src, filter, flipY, key)
+      m.diffuseTex = TextureCache.instance.getCreate(src, filter, flipY, key, extraOptions)
     }
 
     return m