texture.ts 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. /**
  2. * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
  3. *
  4. * @author Alexander Rose <alexander.rose@weirdbyte.de>
  5. */
  6. import { Context } from './context'
  7. import { TextureImage } from '../renderable/util';
  8. import { ValueCell } from 'mol-util';
  9. import { RenderableSchema } from '../renderable/schema';
  10. import { idFactory } from 'mol-util/id-factory';
  11. import { Framebuffer } from './framebuffer';
  12. const getNextTextureId = idFactory()
  13. export type TextureFormat = 'alpha' | 'rgb' | 'rgba'
  14. export type TextureType = 'ubyte' | 'uint'
  15. export type TextureAttachment = 'depth' | 'stencil' | 'color0'
  16. export function getFormat(ctx: Context, format: TextureFormat) {
  17. const { gl } = ctx
  18. switch (format) {
  19. case 'alpha': return gl.ALPHA
  20. case 'rgb': return gl.RGB
  21. case 'rgba': return gl.RGBA
  22. }
  23. }
  24. export function getType(ctx: Context, type: TextureType) {
  25. const { gl } = ctx
  26. switch (type) {
  27. case 'ubyte': return gl.UNSIGNED_BYTE
  28. case 'uint': return gl.UNSIGNED_INT
  29. }
  30. }
  31. export function getAttachment(ctx: Context, attachment: TextureAttachment) {
  32. const { gl } = ctx
  33. switch (attachment) {
  34. case 'depth': return gl.DEPTH_ATTACHMENT
  35. case 'stencil': return gl.STENCIL_ATTACHMENT
  36. case 'color0': return gl.COLOR_ATTACHMENT0
  37. }
  38. }
  39. export interface Texture {
  40. readonly id: number
  41. readonly format: number
  42. readonly type: number
  43. readonly width: number
  44. readonly height: number
  45. load: (image: TextureImage) => void
  46. bind: (id: TextureId) => void
  47. unbind: (id: TextureId) => void
  48. attachFramebuffer: (framebuffer: Framebuffer, attachment: TextureAttachment) => void
  49. destroy: () => void
  50. }
  51. export type TextureId = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15
  52. export type TextureValues = { [k: string]: ValueCell<TextureImage> }
  53. export type Textures = { [k: string]: Texture }
  54. export function createTexture(ctx: Context, _format: TextureFormat, _type: TextureType): Texture {
  55. const id = getNextTextureId()
  56. const { gl } = ctx
  57. const texture = gl.createTexture()
  58. if (texture === null) {
  59. throw new Error('Could not create WebGL texture')
  60. }
  61. const magFilter = gl.NEAREST
  62. const minFilter = gl.NEAREST
  63. const format = getFormat(ctx, _format)
  64. const type = getType(ctx, _type)
  65. let _width = 0
  66. let _height = 0
  67. let destroyed = false
  68. ctx.textureCount += 1
  69. return {
  70. id,
  71. format,
  72. type,
  73. get width () { return _width },
  74. get height () { return _height },
  75. load: (image: TextureImage) => {
  76. const { array, width, height } = image
  77. gl.bindTexture(gl.TEXTURE_2D, texture)
  78. // unpack alignment of 1 since we use textures only for data
  79. gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);
  80. gl.texImage2D(gl.TEXTURE_2D, 0, format, width, height, 0, format, type, array)
  81. _width = width
  82. _height = height
  83. gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, magFilter)
  84. gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, minFilter)
  85. // clamp-to-edge needed for non-power-of-two textures
  86. gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  87. gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  88. gl.bindTexture(gl.TEXTURE_2D, null)
  89. },
  90. bind: (id: TextureId) => {
  91. gl.activeTexture(gl.TEXTURE0 + id)
  92. gl.bindTexture(gl.TEXTURE_2D, texture)
  93. },
  94. unbind: (id: TextureId) => {
  95. gl.activeTexture(gl.TEXTURE0 + id)
  96. gl.bindTexture(gl.TEXTURE_2D, null)
  97. },
  98. attachFramebuffer: (framebuffer: Framebuffer, attachment: TextureAttachment) => {
  99. framebuffer.bind()
  100. gl.framebufferTexture2D(gl.FRAMEBUFFER, getAttachment(ctx, attachment), gl.TEXTURE_2D, texture, 0)
  101. },
  102. destroy: () => {
  103. if (destroyed) return
  104. gl.deleteTexture(texture)
  105. destroyed = true
  106. ctx.textureCount -= 1
  107. }
  108. }
  109. }
  110. export function createTextures(ctx: Context, schema: RenderableSchema, values: TextureValues) {
  111. const textures: Textures = {}
  112. Object.keys(schema).forEach((k, i) => {
  113. const spec = schema[k]
  114. if (spec.type === 'texture') {
  115. const texture = createTexture(ctx, spec.format, spec.dataType)
  116. texture.load(values[k].ref.value)
  117. textures[k] = texture
  118. }
  119. })
  120. return textures
  121. }