Add shader precision handling with default setting and material specific override

camera.js

@@ -148,12 +148,13 @@ Camera.prototype.set = function (opts) {
 }
 
 Camera.prototype.initPostproces = function () {
-  var ctx = this.ctx
-  var fsqPositions = [[-1, -1], [1, -1], [1, 1], [-1, 1]]
-  var fsqFaces = [[0, 1, 2], [0, 2, 3]]
+  const ctx = this.ctx
+  const precisionStr = `precision ${ctx.capabilities.maxPrecision} float;\n`
+  const fsqPositions = [[-1, -1], [1, -1], [1, 1], [-1, 1]]
+  const fsqFaces = [[0, 1, 2], [0, 2, 3]]
 
-  var W = this.viewport[2]
-  var H = this.viewport[3]
+  const W = this.viewport[2]
+  const H = this.viewport[3]
 
   this._fsqMesh = {
     attributes: {
@@ -268,8 +269,8 @@ Camera.prototype.initPostproces = function () {
       // clearDepth: 1
     }),
     pipeline: ctx.pipeline({
-      vert: POSTPROCESS_VERT,
-      frag: SAO_FRAG
+      vert: precisionStr + POSTPROCESS_VERT,
+      frag: precisionStr + SAO_FRAG
     }),
     attributes: this._fsqMesh.attributes,
     indices: this._fsqMesh.indices,
@@ -288,8 +289,8 @@ Camera.prototype.initPostproces = function () {
       clearColor: [1, 1, 0, 1]
     }),
     pipeline: ctx.pipeline({
-      vert: POSTPROCESS_VERT,
-      frag: BILATERAL_BLUR_FRAG
+      vert: precisionStr + POSTPROCESS_VERT,
+      frag: precisionStr + BILATERAL_BLUR_FRAG
     }),
     attributes: this._fsqMesh.attributes,
     indices: this._fsqMesh.indices,
@@ -311,8 +312,8 @@ Camera.prototype.initPostproces = function () {
       clearColor: [1, 1, 0, 1]
     }),
     pipeline: ctx.pipeline({
-      vert: POSTPROCESS_VERT,
-      frag: BILATERAL_BLUR_FRAG
+      vert: precisionStr + POSTPROCESS_VERT,
+      frag: precisionStr + BILATERAL_BLUR_FRAG
     }),
     attributes: this._fsqMesh.attributes,
     indices: this._fsqMesh.indices,
@@ -334,8 +335,8 @@ Camera.prototype.initPostproces = function () {
       clearColor: [1, 1, 0, 1]
     }),
     pipeline: ctx.pipeline({
-      vert: POSTPROCESS_VERT,
-      frag: BILATERAL_BLUR_FRAG
+      vert: precisionStr + POSTPROCESS_VERT,
+      frag: precisionStr + BILATERAL_BLUR_FRAG
     }),
     attributes: this._fsqMesh.attributes,
     indices: this._fsqMesh.indices,
@@ -355,8 +356,8 @@ Camera.prototype.initPostproces = function () {
       clearColor: [1, 1, 0, 1]
     }),
     pipeline: ctx.pipeline({
-      vert: POSTPROCESS_VERT,
-      frag: BILATERAL_BLUR_FRAG
+      vert: precisionStr + POSTPROCESS_VERT,
+      frag: precisionStr + BILATERAL_BLUR_FRAG
     }),
     attributes: this._fsqMesh.attributes,
     indices: this._fsqMesh.indices,
@@ -376,8 +377,8 @@ Camera.prototype.initPostproces = function () {
       clearColor: [1, 1, 1, 1]
     }),
     pipeline: ctx.pipeline({
-      vert: POSTPROCESS_VERT,
-      frag: THRESHOLD_FRAG
+      vert: precisionStr + POSTPROCESS_VERT,
+      frag: precisionStr + THRESHOLD_FRAG
     }),
     attributes: this._fsqMesh.attributes,
     indices: this._fsqMesh.indices,
@@ -398,8 +399,8 @@ Camera.prototype.initPostproces = function () {
       clearColor: [1, 1, 1, 1]
     }),
     pipeline: ctx.pipeline({
-      vert: POSTPROCESS_VERT,
-      frag: BLOOM_FRAG
+      vert: precisionStr + POSTPROCESS_VERT,
+      frag: precisionStr + BLOOM_FRAG
     }),
     attributes: this._fsqMesh.attributes,
     indices: this._fsqMesh.indices,
@@ -419,8 +420,8 @@ Camera.prototype.initPostproces = function () {
       clearColor: [1, 1, 0, 1]
     }),
     pipeline: ctx.pipeline({
-      vert: POSTPROCESS_VERT,
-      frag: BLOOM_FRAG
+      vert: precisionStr + POSTPROCESS_VERT,
+      frag: precisionStr + BLOOM_FRAG
     }),
     attributes: this._fsqMesh.attributes,
     indices: this._fsqMesh.indices,
@@ -436,8 +437,8 @@ Camera.prototype.initPostproces = function () {
   this._blitCmd = {
     name: 'Camera.blit',
     pipeline: ctx.pipeline({
-      vert: POSTPROCESS_VERT,
-      frag: POSTPROCESS_FRAG
+      vert: precisionStr + POSTPROCESS_VERT,
+      frag: precisionStr + POSTPROCESS_FRAG
     }),
     attributes: this._fsqMesh.attributes,
     indices: this._fsqMesh.indices,

examples/postprocessing/index.js

@@ -18,7 +18,7 @@ dragon.positions = centerAndNormalize(dragon.positions).map((v) => vec3.scale(v,
 dragon.normals = normals(dragon.cells, dragon.positions)
 dragon.uvs = dragon.positions.map(() => [0, 0])
 const parseHdr = require('parse-hdr')
-const ctx = createContext()
+const ctx = createContext({ precision: 'mediump' })
 ctx.gl.getExtension('EXT_shader_texture_lod')
 ctx.gl.getExtension('OES_standard_derivatives')
 ctx.gl.getExtension('WEBGL_draw_buffers')

index.js

@@ -36,6 +36,7 @@ const SHADERS_CHUNKS = require('./shaders/chunks')
 
 var State = {
   frame: 0,
+  precision: 'highp',
   shadowQuality: 2,
   debug: false,
   profile: false,
@@ -77,16 +78,16 @@ function Renderer (opts) {
   const gl = opts.ctx.gl
   gl.getExtension('OES_standard_derivatives')
 
-
   this._dummyTexture2D = ctx.texture2D({ width: 4, height: 4 })
   this._dummyTextureCube = ctx.textureCube({ width: 4, height: 4 })
 
   this._debug = false
   this._programCacheMap = {
     values: [],
-    getValue: function (flags, vert, frag) {
+    getValue: function (precision, flags, vert, frag) {
       for (var i = 0; i < this.values.length; i++) {
         var v = this.values[i]
+        if (v.precision !== precision) break
         if (v.frag === frag && v.vert === vert) {
           if (v.flags.length === flags.length) {
             var found = true
@@ -104,8 +105,8 @@ function Renderer (opts) {
       }
       return false
     },
-    setValue: function (flags, vert, frag, program) {
-      this.values.push({ flags, vert, frag, program })
+    setValue: function (precision, flags, vert, frag, program) {
+      this.values.push({ precision, flags, vert, frag, program })
     }
   }
 
@@ -127,6 +128,8 @@ function Renderer (opts) {
   Object.assign(State, opts)
   this._state = State
 
+  this.precision = opts.precision ? ctx.getMaxPrecision(State.precision) : ctx.capabilities.maxPrecision
+
   this.shaders = {
     chunks: SHADERS_CHUNKS,
     pipeline: {
@@ -193,9 +196,17 @@ Renderer.prototype.updatePointLightShadowMap = function (light, geometries) {
   })
 }
 
+Renderer.prototype.getPrecisionString = function (precision) {
+  return `precision ${precision} float;
+precision ${precision} int;
+`
+}
+
 Renderer.prototype.getMaterialProgramAndFlags = function (geometry, material, skin, options) {
   var ctx = this._ctx
 
+  const precision = material.precision || this.precision
+
   var flags = []
 
   if (!geometry._attributes.aNormal) {
@@ -259,7 +270,8 @@ Renderer.prototype.getMaterialProgramAndFlags = function (geometry, material, sk
     flags.push('#define NUM_SPOT_LIGHTS ' + (0))
     flags.push('#define NUM_AREA_LIGHTS ' + (0))
     return {
-      flags: flags,
+      precision,
+      flags,
       vert: (material.vert || DEPTH_PASS_VERT),
       frag: (material.frag || DEPTH_PRE_PASS_FRAG)
     }
@@ -274,7 +286,8 @@ Renderer.prototype.getMaterialProgramAndFlags = function (geometry, material, sk
     flags.push('#define NUM_SPOT_LIGHTS ' + (0))
     flags.push('#define NUM_AREA_LIGHTS ' + (0))
     return {
-      flags: flags,
+      precision,
+      flags,
       vert: (material.vert || DEPTH_PASS_VERT),
       frag: (material.frag || DEPTH_PASS_FRAG)
     }
@@ -346,8 +359,10 @@ Renderer.prototype.getMaterialProgramAndFlags = function (geometry, material, sk
   if (options.useTonemapping) {
     flags.push('#define USE_TONEMAPPING')
   }
+
   return {
-    flags: flags,
+    precision,
+    flags,
     vert: (material.vert || PBR_VERT),
     frag: (material.frag || PBR_FRAG)
   }
@@ -359,21 +374,23 @@ Renderer.prototype.buildProgram = function (vertSrc, fragSrc) {
   try {
     program = ctx.program({ vert: vertSrc, frag: fragSrc })
   } catch (e) {
-    console.error('pex-renderer glsl error', e)
-    program = ctx.program({ vert: ERROR_VERT, frag: ERROR_FRAG })
+    console.error('pex-renderer glsl error', e, vertSrc)
+    const precisionStr = this.getPrecisionString(this.precision)
+    program = ctx.program({ vert: precisionStr + ERROR_VERT, frag: precisionStr + ERROR_FRAG })
   }
   return program
 }
 
 Renderer.prototype.getMaterialProgram = function (geometry, material, skin, options) {
-  var { flags, vert, frag } = this.getMaterialProgramAndFlags(geometry, material, skin, options)
-  var flagsStr = flags.join('\n') + '\n'
-  var vertSrc = flagsStr + vert
-  var fragSrc = flagsStr + frag
-  var program = this._programCacheMap.getValue(flags, vert, frag)
+  const { precision, flags, vert, frag } = this.getMaterialProgramAndFlags(geometry, material, skin, options)
+  const precisionStr = this.getPrecisionString(precision)
+  const flagsStr = flags.join('\n') + '\n'
+  const vertSrc = precisionStr + flagsStr + vert
+  const fragSrc = precisionStr + flagsStr + frag
+  let program = this._programCacheMap.getValue(precision, flags, vert, frag)
   if (!program) {
     program = this.buildProgram(vertSrc, fragSrc)
-    this._programCacheMap.setValue(flags, vert, frag, program)
+    this._programCacheMap.setValue(precision, flags, vert, frag, program)
   }
   return program
 }
@@ -438,9 +455,10 @@ Renderer.prototype.getGeometryPipeline = function (geometry, material, skin, opt
 Renderer.prototype.getOverlayCommand = function () {
   const ctx = this._ctx
   if (!this._drawOverlayCmd) {
+    const precisionStr = this.getPrecisionString(this.precision)
     const program = ctx.program({
-      vert: OVERLAY_VERT,
-      frag: OVERLAY_FRAG
+      vert: precisionStr + OVERLAY_VERT,
+      frag: precisionStr + OVERLAY_FRAG
     })
     this._drawOverlayCmd = {
       name: 'DrawOverlayCmd',

material.js

@@ -36,6 +36,7 @@ function Material (opts) {
   this.blendSrcAlphaFactor = ctx.BlendFactor.One
   this.blendDstRGBFactor = ctx.BlendFactor.One
   this.blendDstAlphaFactor = ctx.BlendFactor.One
+  this.precision = opts.precision ? ctx.getMaxPrecision(opts.precision) : null
   this.castShadows = false
   this.receiveShadows = false
   this.cullFace = true

reflection-probe.js

@@ -21,6 +21,7 @@ function ReflectionProbe (opts) {
   this._ctx = ctx
   this.dirty = true
 
+  const precisionStr = `precision ${ctx.capabilities.maxPrecision} float;\n`
   const CUBEMAP_SIZE = 512
   const dynamicCubemap = this._dynamicCubemap = ctx.textureCube({
     width: CUBEMAP_SIZE,
@@ -85,8 +86,8 @@ function ReflectionProbe (opts) {
       color: [ octMap ]
     }),
     pipeline: ctx.pipeline({
-      vert: FULLSCREEN_QUAD,
-      frag: CUBEMAP_TO_OCTMAP
+      vert: precisionStr + FULLSCREEN_QUAD,
+      frag: precisionStr + CUBEMAP_TO_OCTMAP
     }),
     attributes: attributes,
     indices: indices,
@@ -103,8 +104,8 @@ function ReflectionProbe (opts) {
       color: [ octMap ]
     }),
     pipeline: ctx.pipeline({
-      vert: FULLSCREEN_QUAD,
-      frag: CONVOLVE_OCT_MAP_ATLAS_TO_OCT_MAP
+      vert: precisionStr + FULLSCREEN_QUAD,
+      frag: precisionStr + CONVOLVE_OCT_MAP_ATLAS_TO_OCT_MAP
     }),
     attributes: attributes,
     indices: indices,
@@ -133,8 +134,8 @@ function ReflectionProbe (opts) {
       color: [ octMapAtlas ]
     }),
     pipeline: ctx.pipeline({
-      vert: FULLSCREEN_QUAD,
-      frag: BLIT_TO_OCT_MAP_ATLAS
+      vert: precisionStr + FULLSCREEN_QUAD,
+      frag: precisionStr + BLIT_TO_OCT_MAP_ATLAS
     }),
     uniforms: {
       uSource: octMap,
@@ -152,8 +153,8 @@ function ReflectionProbe (opts) {
       clearColor: [0, 1, 0, 1]
     }),
     pipeline: ctx.pipeline({
-      vert: FULLSCREEN_QUAD,
-      frag: DOWNSAMPLE_FROM_OCT_MAP_ATLAS
+      vert: precisionStr + FULLSCREEN_QUAD,
+      frag: precisionStr + DOWNSAMPLE_FROM_OCT_MAP_ATLAS
     }),
     uniforms: {
       uSource: octMapAtlas,
@@ -171,8 +172,8 @@ function ReflectionProbe (opts) {
       clearColor: [0, 1, 0, 1]
     }),
     pipeline: ctx.pipeline({
-      vert: FULLSCREEN_QUAD,
-      frag: PREFILTER_FROM_OCT_MAP_ATLAS
+      vert: precisionStr + FULLSCREEN_QUAD,
+      frag: precisionStr + PREFILTER_FROM_OCT_MAP_ATLAS
     }),
     uniforms: {
       uSource: octMapAtlas,

shaders/error/error.frag.js

@@ -1,6 +1,4 @@
 module.exports = /* glsl */`
-precision mediump float;
-
 void main () {
   gl_FragData[0] = vec4(1.0, 0.0, 0.0, 1.0);
 }

shaders/pipeline/depth-pass.frag.js

@@ -1,8 +1,6 @@
 const SHADERS = require('../chunks/index.js')
 
 module.exports = /* glsl */`
-precision highp float;
-
 // Variables
 varying vec3 vNormalView;
 varying vec2 vTexCoord0;

shaders/pipeline/depth-pre-pass.frag.js

@@ -1,8 +1,6 @@
 const SHADERS = require('../chunks/index.js')
 
 module.exports = /* glsl */`
-precision highp float;
-
 // Variables
 varying vec3 vNormalView;
 varying vec2 vTexCoord0;

shaders/pipeline/material.frag.js

@@ -6,13 +6,11 @@ module.exports = /* glsl */`
   #extension GL_EXT_draw_buffers : enable
 #endif
 
-precision mediump float;
-
 // Variables
-uniform highp mat4 uInverseViewMatrix;
-uniform highp mat4 uViewMatrix;
-uniform highp mat3 uNormalMatrix;
-uniform highp mat4 uModelMatrix;
+uniform mat4 uInverseViewMatrix;
+uniform mat4 uViewMatrix;
+uniform mat3 uNormalMatrix;
+uniform mat4 uModelMatrix;
 
 uniform vec3 uCameraPosition;
 

shaders/pipeline/overlay.frag.js

@@ -1,6 +1,4 @@
 module.exports = /* glsl */`
-precision highp float;
-
 varying vec2 vTexCoord;
 uniform sampler2D uTexture;
 void main() {

shaders/post-processing/bilateral-blur.frag.js

@@ -1,6 +1,4 @@
 module.exports = /* glsl */`
-precision highp float;
-
 varying vec2 vTexCoord;
 
 uniform float near;