erichlof
commented
4 years ago @bvrice-khalisha Hello, it looks like some of my original shader code is missing from the demo program you are trying to run. The first line of any webgl 2.0 compliant shader must read:
version 300 es
The above line needs to be at the top of every single shader to let the browser know that we want opengl 3.0 es. Also, make sure you are running the demos on the latest browsers that have support for WebGL 2.0 (opengl 3.0 es). I have tested on all 3 major browsers, and Chrome and Firefox work out of the box with WebGL 2.0 (opengl 3.0 es), and Microsoft Edge will work, but you have to use the Dev channel because the regular version of the Edge browser doesn't have WebGL 2.0 on by default as of yet. Safari and Safari iOS do not support WebGL 2.0 and I'm not sure if that is on the roadmap for Apple at all.
Good luck getting things working. If you run into any more problems using my original source code in its entirety, let me know and I'll try to help as much as I can.
Thanks! -Erich
https://erichlof.github.io/THREE.js-PathTracing-Renderer/Geometry_Showcase.html
Error coming in console as below:
three.min.js:82 THREE.WebGLProgram: shader error: 0 35715 false gl.getProgramInfoLog invalid shaders THREE.WebGLShader: gl.getShaderInfoLog() vertex ERROR: 0:50: 'version' : #version directive must occur before anything else, except for comments and white space 1: precision highp float; 2: precision highp int; 3: #define HIGH_PRECISION 4: #define SHADER_NAME ShaderMaterial 5: #define VERTEX_TEXTURES 6: #define GAMMA_FACTOR 2 7: #define MAX_BONES 0 8: #define BONE_TEXTURE 9: uniform mat4 modelMatrix; 10: uniform mat4 modelViewMatrix; 11: uniform mat4 projectionMatrix; 12: uniform mat4 viewMatrix; 13: uniform mat3 normalMatrix; 14: uniform vec3 cameraPosition; 15: uniform bool isOrthographic; 16: #ifdef USE_INSTANCING 17: attribute mat4 instanceMatrix; 18: #endif 19: attribute vec3 position; 20: attribute vec3 normal; 21: attribute vec2 uv; 22: #ifdef USE_TANGENT 23: attribute vec4 tangent; 24: #endif 25: #ifdef USE_COLOR 26: attribute vec3 color; 27: #endif 28: #ifdef USE_MORPHTARGETS 29: attribute vec3 morphTarget0; 30: attribute vec3 morphTarget1; 31: attribute vec3 morphTarget2; 32: attribute vec3 morphTarget3; 33: #ifdef USE_MORPHNORMALS 34: attribute vec3 morphNormal0; 35: attribute vec3 morphNormal1; 36: attribute vec3 morphNormal2; 37: attribute vec3 morphNormal3; 38: #else 39: attribute vec3 morphTarget4; 40: attribute vec3 morphTarget5; 41: attribute vec3 morphTarget6; 42: attribute vec3 morphTarget7; 43: #endif 44: #endif 45: #ifdef USE_SKINNING 46: attribute vec4 skinIndex; 47: attribute vec4 skinWeight; 48: #endif 49: 50: #version 300 es 51: precision highp float; 52: precision highp int; 53: void main() 54: { 55: gl_Position = vec4( position, 1.0 ); 56: } THREE.WebGLShader: gl.getShaderInfoLog() fragment ERROR: 0:106: 'version' : #version directive must occur before anything else, except for comments and white space ERROR: 0:111: 'out' : storage qualifier supported in GLSL ES 3.00 and above only ERROR: 0:114: 'texelFetch' : no matching overloaded function found ERROR: 0:114: '=' : dimension mismatch ERROR: 0:114: 'assign' : cannot convert from 'const mediump float' to 'out highp 4-component vector of float' 1: precision highp float; 2: precision highp int; 3: #define HIGH_PRECISION 4: #define SHADER_NAME ShaderMaterial 5: #define GAMMA_FACTOR 2 6: uniform mat4 viewMatrix; 7: uniform vec3 cameraPosition; 8: uniform bool isOrthographic; 9: #define TONE_MAPPING 10: #ifndef saturate 11: #define saturate(a) clamp( a, 0.0, 1.0 ) 12: #endif 13: uniform float toneMappingExposure; 14: uniform float toneMappingWhitePoint; 15: vec3 LinearToneMapping( vec3 color ) { 16: return toneMappingExposure color; 17: } 18: vec3 ReinhardToneMapping( vec3 color ) { 19: color = toneMappingExposure; 20: return saturate( color / ( vec3( 1.0 ) + color ) ); 21: } 22: #define Uncharted2Helper( x ) max( ( ( x ( 0.15 x + 0.10 0.50 ) + 0.20 0.02 ) / ( x ( 0.15 x + 0.50 ) + 0.20 0.30 ) ) - 0.02 / 0.30, vec3( 0.0 ) ) 23: vec3 Uncharted2ToneMapping( vec3 color ) { 24: color = toneMappingExposure; 25: return saturate( Uncharted2Helper( color ) / Uncharted2Helper( vec3( toneMappingWhitePoint ) ) ); 26: } 27: vec3 OptimizedCineonToneMapping( vec3 color ) { 28: color = toneMappingExposure; 29: color = max( vec3( 0.0 ), color - 0.004 ); 30: return pow( ( color ( 6.2 color + 0.5 ) ) / ( color ( 6.2 color + 1.7 ) + 0.06 ), vec3( 2.2 ) ); 31: } 32: vec3 ACESFilmicToneMapping( vec3 color ) { 33: color = toneMappingExposure; 34: return saturate( ( color ( 2.51 color + 0.03 ) ) / ( color ( 2.43 color + 0.59 ) + 0.14 ) ); 35: } 36: vec3 toneMapping( vec3 color ) { return LinearToneMapping( color ); } 37: 38: vec4 LinearToLinear( in vec4 value ) { 39: return value; 40: } 41: vec4 GammaToLinear( in vec4 value, in float gammaFactor ) { 42: return vec4( pow( value.rgb, vec3( gammaFactor ) ), value.a ); 43: } 44: vec4 LinearToGamma( in vec4 value, in float gammaFactor ) { 45: return vec4( pow( value.rgb, vec3( 1.0 / gammaFactor ) ), value.a ); 46: } 47: vec4 sRGBToLinear( in vec4 value ) { 48: return vec4( mix( pow( value.rgb 0.9478672986 + vec3( 0.0521327014 ), vec3( 2.4 ) ), value.rgb 0.0773993808, vec3( lessThanEqual( value.rgb, vec3( 0.04045 ) ) ) ), value.a ); 49: } 50: vec4 LinearTosRGB( in vec4 value ) { 51: return vec4( mix( pow( value.rgb, vec3( 0.41666 ) ) 1.055 - vec3( 0.055 ), value.rgb 12.92, vec3( lessThanEqual( value.rgb, vec3( 0.0031308 ) ) ) ), value.a ); 52: } 53: vec4 RGBEToLinear( in vec4 value ) { 54: return vec4( value.rgb exp2( value.a 255.0 - 128.0 ), 1.0 ); 55: } 56: vec4 LinearToRGBE( in vec4 value ) { 57: float maxComponent = max( max( value.r, value.g ), value.b ); 58: float fExp = clamp( ceil( log2( maxComponent ) ), -128.0, 127.0 ); 59: return vec4( value.rgb / exp2( fExp ), ( fExp + 128.0 ) / 255.0 ); 60: } 61: vec4 RGBMToLinear( in vec4 value, in float maxRange ) { 62: return vec4( value.rgb value.a maxRange, 1.0 ); 63: } 64: vec4 LinearToRGBM( in vec4 value, in float maxRange ) { 65: float maxRGB = max( value.r, max( value.g, value.b ) ); 66: float M = clamp( maxRGB / maxRange, 0.0, 1.0 ); 67: M = ceil( M 255.0 ) / 255.0; 68: return vec4( value.rgb / ( M maxRange ), M ); 69: } 70: vec4 RGBDToLinear( in vec4 value, in float maxRange ) { 71: return vec4( value.rgb ( ( maxRange / 255.0 ) / value.a ), 1.0 ); 72: } 73: vec4 LinearToRGBD( in vec4 value, in float maxRange ) { 74: float maxRGB = max( value.r, max( value.g, value.b ) ); 75: float D = max( maxRange / maxRGB, 1.0 ); 76: D = min( floor( D ) / 255.0, 1.0 ); 77: return vec4( value.rgb ( D ( 255.0 / maxRange ) ), D ); 78: } 79: const mat3 cLogLuvM = mat3( 0.2209, 0.3390, 0.4184, 0.1138, 0.6780, 0.7319, 0.0102, 0.1130, 0.2969 ); 80: vec4 LinearToLogLuv( in vec4 value ) { 81: vec3 Xp_Y_XYZp = cLogLuvM value.rgb; 82: Xp_Y_XYZp = max( Xp_Y_XYZp, vec3( 1e-6, 1e-6, 1e-6 ) ); 83: vec4 vResult; 84: vResult.xy = Xp_Y_XYZp.xy / Xp_Y_XYZp.z; 85: float Le = 2.0 log2(Xp_Y_XYZp.y) + 127.0; 86: vResult.w = fract( Le ); 87: vResult.z = ( Le - ( floor( vResult.w 255.0 ) ) / 255.0 ) / 255.0; 88: return vResult; 89: } 90: const mat3 cLogLuvInverseM = mat3( 6.0014, -2.7008, -1.7996, -1.3320, 3.1029, -5.7721, 0.3008, -1.0882, 5.6268 ); 91: vec4 LogLuvToLinear( in vec4 value ) { 92: float Le = value.z 255.0 + value.w; 93: vec3 Xp_Y_XYZp; 94: Xp_Y_XYZp.y = exp2( ( Le - 127.0 ) / 2.0 ); 95: Xp_Y_XYZp.z = Xp_Y_XYZp.y / value.y; 96: Xp_Y_XYZp.x = value.x Xp_Y_XYZp.z; 97: vec3 vRGB = cLogLuvInverseM * Xp_Y_XYZp.rgb; 98: return vec4( max( vRGB, 0.0 ), 1.0 ); 99: } 100: vec4 mapTexelToLinear( vec4 value ) { return LinearToLinear( value ); } 101: vec4 matcapTexelToLinear( vec4 value ) { return LinearToLinear( value ); } 102: vec4 envMapTexelToLinear( vec4 value ) { return LinearToLinear( value ); } 103: vec4 emissiveMapTexelToLinear( vec4 value ) { return LinearToLinear( value ); } 104: vec4 linearToOutputTexel( vec4 value ) { return LinearToLinear( value ); } 105: 106: #version 300 es 107: precision highp float; 108: precision highp int; 109: precision highp sampler2D; 110: uniform sampler2D tPathTracedImageTexture; 111: out vec4 out_FragColor; 112: void main() 113: { 114: out_FragColor = texelFetch(tPathTracedImageTexture, ivec2(gl_FragCoord.xy), 0); 115: }