shader-code.ts 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242
  1. /**
  2. * Copyright (c) 2018-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
  3. *
  4. * @author Alexander Rose <alexander.rose@weirdbyte.de>
  5. */
  6. import { ValueCell } from '../mol-util';
  7. import { idFactory } from '../mol-util/id-factory';
  8. import { WebGLExtensions } from './webgl/extensions';
  9. import { isWebGL2, GLRenderingContext } from './webgl/compat';
  10. export type DefineKind = 'boolean' | 'string' | 'number'
  11. export type DefineType = boolean | string
  12. export type DefineValues = { [k: string]: ValueCell<DefineType> }
  13. const shaderCodeId = idFactory()
  14. export interface ShaderExtensions {
  15. readonly standardDerivatives?: boolean
  16. readonly fragDepth?: boolean
  17. readonly drawBuffers?: boolean
  18. readonly shaderTextureLod?: boolean
  19. }
  20. export interface ShaderCode {
  21. readonly id: number
  22. readonly name: string
  23. readonly vert: string
  24. readonly frag: string
  25. readonly extensions: ShaderExtensions
  26. }
  27. import apply_fog from './shader/chunks/apply-fog.glsl'
  28. import apply_interior_color from './shader/chunks/apply-interior-color.glsl'
  29. import apply_light_color from './shader/chunks/apply-light-color.glsl'
  30. import apply_marker_color from './shader/chunks/apply-marker-color.glsl'
  31. import assign_color_varying from './shader/chunks/assign-color-varying.glsl'
  32. import assign_group from './shader/chunks/assign-group.glsl'
  33. import assign_marker_varying from './shader/chunks/assign-marker-varying.glsl'
  34. import assign_material_color from './shader/chunks/assign-material-color.glsl'
  35. import assign_position from './shader/chunks/assign-position.glsl'
  36. import assign_size from './shader/chunks/assign-size.glsl'
  37. import check_picking_alpha from './shader/chunks/check-picking-alpha.glsl'
  38. import color_frag_params from './shader/chunks/color-frag-params.glsl'
  39. import color_vert_params from './shader/chunks/color-vert-params.glsl'
  40. import common_frag_params from './shader/chunks/common-frag-params.glsl'
  41. import common_vert_params from './shader/chunks/common-vert-params.glsl'
  42. import common from './shader/chunks/common.glsl'
  43. import light_frag_params from './shader/chunks/light-frag-params.glsl'
  44. import matrix_scale from './shader/chunks/matrix-scale.glsl'
  45. import normal_frag_params from './shader/chunks/normal-frag-params.glsl'
  46. import read_from_texture from './shader/chunks/read-from-texture.glsl'
  47. import size_vert_params from './shader/chunks/size-vert-params.glsl'
  48. import texture3d_from_2d_linear from './shader/chunks/texture3d-from-2d-nearest.glsl'
  49. import texture3d_from_2d_nearest from './shader/chunks/texture3d-from-2d-nearest.glsl'
  50. const ShaderChunks: { [k: string]: string } = {
  51. apply_fog,
  52. apply_interior_color,
  53. apply_light_color,
  54. apply_marker_color,
  55. assign_color_varying,
  56. assign_group,
  57. assign_marker_varying,
  58. assign_material_color,
  59. assign_position,
  60. assign_size,
  61. check_picking_alpha,
  62. color_frag_params,
  63. color_vert_params,
  64. common_frag_params,
  65. common_vert_params,
  66. common,
  67. light_frag_params,
  68. matrix_scale,
  69. normal_frag_params,
  70. read_from_texture,
  71. size_vert_params,
  72. texture3d_from_2d_linear,
  73. texture3d_from_2d_nearest
  74. }
  75. const reInclude = /^(?!\/\/)\s*#include\s+(\S+)/gmi
  76. const reSingleLineComment = /[ \t]*\/\/.*\n/g
  77. const reMultiLineComment = /[ \t]*\/\*[\s\S]*?\*\//g
  78. const reMultipleLinebreaks = /\n{2,}/g
  79. function addIncludes(text: string) {
  80. return text
  81. .replace(reInclude, (_, p1) => {
  82. const chunk = ShaderChunks[p1]
  83. if (!chunk) throw new Error(`empty chunk, '${p1}'`)
  84. return chunk
  85. })
  86. .trim()
  87. .replace(reSingleLineComment, '\n')
  88. .replace(reMultiLineComment, '\n')
  89. .replace(reMultipleLinebreaks, '\n')
  90. }
  91. export function ShaderCode(name: string, vert: string, frag: string, extensions: ShaderExtensions = {}): ShaderCode {
  92. return { id: shaderCodeId(), name, vert: addIncludes(vert), frag: addIncludes(frag), extensions }
  93. }
  94. import points_vert from './shader/points.vert'
  95. import points_frag from './shader/points.frag'
  96. export const PointsShaderCode = ShaderCode('points', points_vert, points_frag)
  97. import spheres_vert from './shader/spheres.vert'
  98. import spheres_frag from './shader/spheres.frag'
  99. export const SpheresShaderCode = ShaderCode('spheres', spheres_vert, spheres_frag, { fragDepth: true })
  100. import text_vert from './shader/text.vert'
  101. import text_frag from './shader/text.frag'
  102. export const TextShaderCode = ShaderCode('text', text_vert, text_frag, { standardDerivatives: true })
  103. import lines_vert from './shader/lines.vert'
  104. import lines_frag from './shader/lines.frag'
  105. export const LinesShaderCode = ShaderCode('lines', lines_vert, lines_frag)
  106. import mesh_vert from './shader/mesh.vert'
  107. import mesh_frag from './shader/mesh.frag'
  108. export const MeshShaderCode = ShaderCode('mesh', mesh_vert, mesh_frag, { standardDerivatives: true })
  109. import direct_volume_vert from './shader/direct-volume.vert'
  110. import direct_volume_frag from './shader/direct-volume.frag'
  111. export const DirectVolumeShaderCode = ShaderCode('direct-volume', direct_volume_vert, direct_volume_frag, { fragDepth: true })
  112. //
  113. export type ShaderDefines = {
  114. [k: string]: ValueCell<DefineType>
  115. }
  116. function getDefinesCode (defines: ShaderDefines) {
  117. if (defines === undefined) return ''
  118. const lines = []
  119. for (const name in defines) {
  120. const define = defines[name]
  121. const v = define.ref.value
  122. if (v !== undefined) {
  123. if (typeof v === 'string') {
  124. lines.push(`#define ${name}_${v}`)
  125. } else if (typeof v === 'number') {
  126. lines.push(`#define ${name} ${v}`)
  127. } else if (typeof v === 'boolean') {
  128. if (v) lines.push(`#define ${name}`)
  129. } else {
  130. throw new Error('unknown define type')
  131. }
  132. }
  133. }
  134. return lines.join('\n') + '\n'
  135. }
  136. function getGlsl100FragPrefix(extensions: WebGLExtensions, shaderExtensions: ShaderExtensions) {
  137. const prefix: string[] = []
  138. if (shaderExtensions.standardDerivatives) {
  139. prefix.push('#extension GL_OES_standard_derivatives : enable')
  140. prefix.push('#define enabledStandardDerivatives')
  141. }
  142. if (shaderExtensions.fragDepth) {
  143. if (extensions.fragDepth) {
  144. prefix.push('#extension GL_EXT_frag_depth : enable')
  145. prefix.push('#define enabledFragDepth')
  146. } else {
  147. throw new Error(`requested 'GL_EXT_frag_depth' extension is unavailable`)
  148. }
  149. }
  150. if (shaderExtensions.drawBuffers) {
  151. if (extensions.drawBuffers) {
  152. prefix.push('#extension GL_EXT_draw_buffers : require')
  153. prefix.push('#define requiredDrawBuffers')
  154. } else {
  155. throw new Error(`requested 'GL_EXT_draw_buffers' extension is unavailable`)
  156. }
  157. }
  158. if (shaderExtensions.shaderTextureLod) {
  159. if (extensions.shaderTextureLod) {
  160. prefix.push('#extension GL_EXT_shader_texture_lod : enable')
  161. prefix.push('#define enabledShaderTextureLod')
  162. } else {
  163. throw new Error(`requested 'GL_EXT_shader_texture_lod' extension is unavailable`)
  164. }
  165. }
  166. return prefix.join('\n') + '\n'
  167. }
  168. const glsl300VertPrefix = `#version 300 es
  169. #define attribute in
  170. #define varying out
  171. #define texture2D texture
  172. `
  173. const glsl300FragPrefixCommon = `
  174. #define varying in
  175. #define texture2D texture
  176. #define texture2DLodEXT textureLod
  177. #define gl_FragColor out_FragData0
  178. #define gl_FragDepthEXT gl_FragDepth
  179. #define requiredDrawBuffers
  180. `
  181. function getGlsl300FragPrefix(gl: WebGL2RenderingContext, extensions: WebGLExtensions, shaderExtensions: ShaderExtensions) {
  182. const prefix = [ '#version 300 es' ]
  183. if (shaderExtensions.standardDerivatives) {
  184. prefix.push('#define enabledStandardDerivatives')
  185. }
  186. if (shaderExtensions.fragDepth) {
  187. prefix.push('#define enabledFragDepth')
  188. }
  189. if (extensions.drawBuffers) {
  190. const maxDrawBuffers = gl.getParameter(gl.MAX_DRAW_BUFFERS) as number
  191. for (let i = 0, il = maxDrawBuffers; i < il; ++i) {
  192. prefix.push(`layout(location = ${i}) out highp vec4 out_FragData${i};`)
  193. }
  194. }
  195. prefix.push(glsl300FragPrefixCommon)
  196. return prefix.join('\n') + '\n'
  197. }
  198. function transformGlsl300Frag(frag: string) {
  199. return frag.replace(/gl_FragData\[([0-9]+)\]/g, 'out_FragData$1')
  200. }
  201. export function addShaderDefines(gl: GLRenderingContext, extensions: WebGLExtensions, defines: ShaderDefines, shaders: ShaderCode): ShaderCode {
  202. const header = getDefinesCode(defines)
  203. const vertPrefix = isWebGL2(gl) ? glsl300VertPrefix : ''
  204. const fragPrefix = isWebGL2(gl)
  205. ? getGlsl300FragPrefix(gl, extensions, shaders.extensions)
  206. : getGlsl100FragPrefix(extensions, shaders.extensions)
  207. const frag = isWebGL2(gl) ? transformGlsl300Frag(shaders.frag) : shaders.frag
  208. return {
  209. id: shaderCodeId(),
  210. name: shaders.name,
  211. vert: `${vertPrefix}${header}${shaders.vert}`,
  212. frag: `${fragPrefix}${header}${frag}`,
  213. extensions: shaders.extensions
  214. }
  215. }