尝试从我的项目中添加景深： http://www.andrewberg.com/prototypes/threejs/bokeh/
但是从着色器中获取错误：
three.js：16612THREE.WebGLProgram：着色器错误：0 gl.VALIDATE_STATUS false gl.getProgramInfoLog无效着色器错误：0：101： 'DEPTH_PACKING'：条件表达式后的意外标记 错误：0：228：'DEPTH_PACKING'：条件后的意外令牌 表达式错误：0：248：'DEPTH_PACKING'：后面的意外令牌 条件表达式错误：0：250：'DEPTH_PACKING'：意外 条件表达式后的标记
显示错误的着色器：
HREE.WebGLShader: gl.getShaderInfoLog() fragment ERROR: 0:101: 'DEPTH_PACKING' : unexpected token after conditional expression
ERROR: 0:228: 'DEPTH_PACKING' : unexpected token after conditional expression
ERROR: 0:248: 'DEPTH_PACKING' : unexpected token after conditional expression
ERROR: 0:250: 'DEPTH_PACKING' : unexpected token after conditional expression
1: precision highp float;
2: precision highp int;
3: #define SHADER_NAME ShaderMaterial
4: #define GAMMA_FACTOR 2
5: #define NUM_CLIPPING_PLANES 0
6: #define UNION_CLIPPING_PLANES 0
7: uniform mat4 viewMatrix;
8: uniform vec3 cameraPosition;
9: #define TONE_MAPPING
10: #define saturate(a) clamp( a, 0.0, 1.0 )
11: uniform float toneMappingExposure;
12: uniform float toneMappingWhitePoint;
13: vec3 LinearToneMapping( vec3 color ) {
14: return toneMappingExposure * color;
15: }
16: vec3 ReinhardToneMapping( vec3 color ) {
17: color *= toneMappingExposure;
18: return saturate( color / ( vec3( 1.0 ) + color ) );
19: }
20: #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 ) )
21: vec3 Uncharted2ToneMapping( vec3 color ) {
22: color *= toneMappingExposure;
23: return saturate( Uncharted2Helper( color ) / Uncharted2Helper( vec3( toneMappingWhitePoint ) ) );
24: }
25: vec3 OptimizedCineonToneMapping( vec3 color ) {
26: color *= toneMappingExposure;
27: color = max( vec3( 0.0 ), color - 0.004 );
28: return pow( ( color * ( 6.2 * color + 0.5 ) ) / ( color * ( 6.2 * color + 1.7 ) + 0.06 ), vec3( 2.2 ) );
29: }
30:
31: vec3 toneMapping( vec3 color ) { return LinearToneMapping( color ); }
32:
33: vec4 LinearToLinear( in vec4 value ) {
34: return value;
35: }
36: vec4 GammaToLinear( in vec4 value, in float gammaFactor ) {
37: return vec4( pow( value.xyz, vec3( gammaFactor ) ), value.w );
38: }
39: vec4 LinearToGamma( in vec4 value, in float gammaFactor ) {
40: return vec4( pow( value.xyz, vec3( 1.0 / gammaFactor ) ), value.w );
41: }
42: vec4 sRGBToLinear( in vec4 value ) {
43: 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.w );
44: }
45: vec4 LinearTosRGB( in vec4 value ) {
46: 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.w );
47: }
48: vec4 RGBEToLinear( in vec4 value ) {
49: return vec4( value.rgb * exp2( value.a * 255.0 - 128.0 ), 1.0 );
50: }
51: vec4 LinearToRGBE( in vec4 value ) {
52: float maxComponent = max( max( value.r, value.g ), value.b );
53: float fExp = clamp( ceil( log2( maxComponent ) ), -128.0, 127.0 );
54: return vec4( value.rgb / exp2( fExp ), ( fExp + 128.0 ) / 255.0 );
55: }
56: vec4 RGBMToLinear( in vec4 value, in float maxRange ) {
57: return vec4( value.xyz * value.w * maxRange, 1.0 );
58: }
59: vec4 LinearToRGBM( in vec4 value, in float maxRange ) {
60: float maxRGB = max( value.x, max( value.g, value.b ) );
61: float M = clamp( maxRGB / maxRange, 0.0, 1.0 );
62: M = ceil( M * 255.0 ) / 255.0;
63: return vec4( value.rgb / ( M * maxRange ), M );
64: }
65: vec4 RGBDToLinear( in vec4 value, in float maxRange ) {
66: return vec4( value.rgb * ( ( maxRange / 255.0 ) / value.a ), 1.0 );
67: }
68: vec4 LinearToRGBD( in vec4 value, in float maxRange ) {
69: float maxRGB = max( value.x, max( value.g, value.b ) );
70: float D = max( maxRange / maxRGB, 1.0 );
71: D = min( floor( D ) / 255.0, 1.0 );
72: return vec4( value.rgb * ( D * ( 255.0 / maxRange ) ), D );
73: }
74: const mat3 cLogLuvM = mat3( 0.2209, 0.3390, 0.4184, 0.1138, 0.6780, 0.7319, 0.0102, 0.1130, 0.2969 );
75: vec4 LinearToLogLuv( in vec4 value ) {
76: vec3 Xp_Y_XYZp = value.rgb * cLogLuvM;
77: Xp_Y_XYZp = max(Xp_Y_XYZp, vec3(1e-6, 1e-6, 1e-6));
78: vec4 vResult;
79: vResult.xy = Xp_Y_XYZp.xy / Xp_Y_XYZp.z;
80: float Le = 2.0 * log2(Xp_Y_XYZp.y) + 127.0;
81: vResult.w = fract(Le);
82: vResult.z = (Le - (floor(vResult.w*255.0))/255.0)/255.0;
83: return vResult;
84: }
85: const mat3 cLogLuvInverseM = mat3( 6.0014, -2.7008, -1.7996, -1.3320, 3.1029, -5.7721, 0.3008, -1.0882, 5.6268 );
86: vec4 LogLuvToLinear( in vec4 value ) {
87: float Le = value.z * 255.0 + value.w;
88: vec3 Xp_Y_XYZp;
89: Xp_Y_XYZp.y = exp2((Le - 127.0) / 2.0);
90: Xp_Y_XYZp.z = Xp_Y_XYZp.y / value.y;
91: Xp_Y_XYZp.x = value.x * Xp_Y_XYZp.z;
92: vec3 vRGB = Xp_Y_XYZp.rgb * cLogLuvInverseM;
93: return vec4( max(vRGB, 0.0), 1.0 );
94: }
95:
96: vec4 mapTexelToLinear( vec4 value ) { return LinearToLinear( value ); }
97: vec4 envMapTexelToLinear( vec4 value ) { return LinearToLinear( value ); }
98: vec4 emissiveMapTexelToLinear( vec4 value ) { return LinearToLinear( value ); }
99: vec4 linearToOutputTexel( vec4 value ) { return LinearToLinear( value ); }
100:
101: #if DEPTH_PACKING == 3200
102: uniform float opacity;
103: #endif
104: #define PI 3.14159265359
105: #define PI2 6.28318530718
106: #define RECIPROCAL_PI 0.31830988618
107: #define RECIPROCAL_PI2 0.15915494
108: #define LOG2 1.442695
109: #define EPSILON 1e-6
110: #define saturate(a) clamp( a, 0.0, 1.0 )
111: #define whiteCompliment(a) ( 1.0 - saturate( a ) )
112: float pow2( const in float x ) { return x*x; }
113: float pow3( const in float x ) { return x*x*x; }
114: float pow4( const in float x ) { float x2 = x*x; return x2*x2; }
115: float average( const in vec3 color ) { return dot( color, vec3( 0.3333 ) ); }
116: highp float rand( const in vec2 uv ) {
117: const highp float a = 12.9898, b = 78.233, c = 43758.5453;
118: highp float dt = dot( uv.xy, vec2( a,b ) ), sn = mod( dt, PI );
119: return fract(sin(sn) * c);
120: }
121: struct IncidentLight {
122: vec3 color;
123: vec3 direction;
124: bool visible;
125: };
126: struct ReflectedLight {
127: vec3 directDiffuse;
128: vec3 directSpecular;
129: vec3 indirectDiffuse;
130: vec3 indirectSpecular;
131: };
132: struct GeometricContext {
133: vec3 position;
134: vec3 normal;
135: vec3 viewDir;
136: };
137: vec3 transformDirection( in vec3 dir, in mat4 matrix ) {
138: return normalize( ( matrix * vec4( dir, 0.0 ) ).xyz );
139: }
140: vec3 inverseTransformDirection( in vec3 dir, in mat4 matrix ) {
141: return normalize( ( vec4( dir, 0.0 ) * matrix ).xyz );
142: }
143: vec3 projectOnPlane(in vec3 point, in vec3 pointOnPlane, in vec3 planeNormal ) {
144: float distance = dot( planeNormal, point - pointOnPlane );
145: return - distance * planeNormal + point;
146: }
147: float sideOfPlane( in vec3 point, in vec3 pointOnPlane, in vec3 planeNormal ) {
148: return sign( dot( point - pointOnPlane, planeNormal ) );
149: }
150: vec3 linePlaneIntersect( in vec3 pointOnLine, in vec3 lineDirection, in vec3 pointOnPlane, in vec3 planeNormal ) {
151: return lineDirection * ( dot( planeNormal, pointOnPlane - pointOnLine ) / dot( planeNormal, lineDirection ) ) + pointOnLine;
152: }
153:
154: vec3 packNormalToRGB( const in vec3 normal ) {
155: return normalize( normal ) * 0.5 + 0.5;
156: }
157: vec3 unpackRGBToNormal( const in vec3 rgb ) {
158: return 1.0 - 2.0 * rgb.xyz;
159: }
160: const float PackUpscale = 256. / 255.;const float UnpackDownscale = 255. / 256.;
161: const vec3 PackFactors = vec3( 256. * 256. * 256., 256. * 256., 256. );
162: const vec4 UnpackFactors = UnpackDownscale / vec4( PackFactors, 1. );
163: const float ShiftRight8 = 1. / 256.;
164: vec4 packDepthToRGBA( const in float v ) {
165: vec4 r = vec4( fract( v * PackFactors ), v );
166: r.yzw -= r.xyz * ShiftRight8; return r * PackUpscale;
167: }
168: float unpackRGBAToDepth( const in vec4 v ) {
169: return dot( v, UnpackFactors );
170: }
171: float viewZToOrthographicDepth( const in float viewZ, const in float near, const in float far ) {
172: return ( viewZ + near ) / ( near - far );
173: }
174: float orthographicDepthToViewZ( const in float linearClipZ, const in float near, const in float far ) {
175: return linearClipZ * ( near - far ) - near;
176: }
177: float viewZToPerspectiveDepth( const in float viewZ, const in float near, const in float far ) {
178: return (( near + viewZ ) * far ) / (( far - near ) * viewZ );
179: }
180: float perspectiveDepthToViewZ( const in float invClipZ, const in float near, const in float far ) {
181: return ( near * far ) / ( ( far - near ) * invClipZ - far );
182: }
183:
184: #if defined( USE_MAP ) || defined( USE_BUMPMAP ) || defined( USE_NORMALMAP ) || defined( USE_SPECULARMAP ) || defined( USE_ALPHAMAP ) || defined( USE_EMISSIVEMAP ) || defined( USE_ROUGHNESSMAP ) || defined( USE_METALNESSMAP )
185: varying vec2 vUv;
186: #endif
187: #ifdef USE_MAP
188: uniform sampler2D map;
189: #endif
190:
191: #ifdef USE_ALPHAMAP
192: uniform sampler2D alphaMap;
193: #endif
194:
195: #ifdef USE_LOGDEPTHBUF
196: uniform float logDepthBufFC;
197: #ifdef USE_LOGDEPTHBUF_EXT
198: varying float vFragDepth;
199: #endif
200: #endif
201:
202: #if NUM_CLIPPING_PLANES > 0
203: #if ! defined( PHYSICAL ) && ! defined( PHONG )
204: varying vec3 vViewPosition;
205: #endif
206: uniform vec4 clippingPlanes[ NUM_CLIPPING_PLANES ];
207: #endif
208:
209: void main() {
210: #if NUM_CLIPPING_PLANES > 0
211: for ( int i = 0; i < UNION_CLIPPING_PLANES; ++ i ) {
212: vec4 plane = clippingPlanes[ i ];
213: if ( dot( vViewPosition, plane.xyz ) > plane.w ) discard;
214: }
215:
216: #if UNION_CLIPPING_PLANES < NUM_CLIPPING_PLANES
217: bool clipped = true;
218: for ( int i = UNION_CLIPPING_PLANES; i < NUM_CLIPPING_PLANES; ++ i ) {
219: vec4 plane = clippingPlanes[ i ];
220: clipped = ( dot( vViewPosition, plane.xyz ) > plane.w ) && clipped;
221: }
222: if ( clipped ) discard;
223:
224: #endif
225: #endif
226:
227: vec4 diffuseColor = vec4( 1.0 );
228: #if DEPTH_PACKING == 3200
229: diffuseColor.a = opacity;
230: #endif
231: #ifdef USE_MAP
232: vec4 texelColor = texture2D( map, vUv );
233: texelColor = mapTexelToLinear( texelColor );
234: diffuseColor *= texelColor;
235: #endif
236:
237: #ifdef USE_ALPHAMAP
238: diffuseColor.a *= texture2D( alphaMap, vUv ).g;
239: #endif
240:
241: #ifdef ALPHATEST
242: if ( diffuseColor.a < ALPHATEST ) discard;
243: #endif
244:
245: #if defined(USE_LOGDEPTHBUF) && defined(USE_LOGDEPTHBUF_EXT)
246: gl_FragDepthEXT = log2(vFragDepth) * logDepthBufFC * 0.5;
247: #endif
248: #if DEPTH_PACKING == 3200
249: gl_FragColor = vec4( vec3( gl_FragCoord.z ), opacity );
250: #elif DEPTH_PACKING == 3201
251: gl_FragColor = packDepthToRGBA( gl_FragCoord.z );
252: #endif
253: }
254:
答案 0 :(得分：0)
DEPTH_PACKING似乎没有定义。
我认为depth shader被另一个父着色器使用，这就是为什么当我们想单独使用它时它会出现错误。
我通过重写和删除所有DEPTH_PACKING条件来解决问题：
以depth_frag.glsl：
#include <common>
#include <packing>
#include <uv_pars_fragment>
#include <map_pars_fragment>
#include <alphamap_pars_fragment>
#include <logdepthbuf_pars_fragment>
#include <clipping_planes_pars_fragment>
void main() {
#include <clipping_planes_fragment>
vec4 diffuseColor = vec4( 1.0 );
#include <map_fragment>
#include <alphamap_fragment>
#include <alphatest_fragment>
#include <logdepthbuf_fragment>
gl_FragColor = packDepthToRGBA( gl_FragCoord.z );
}
您可以在此处找到此着色器的基础：/r86/src/renderers/shaders/ShaderLib/depth_frag.glsl。