when I render a primitive to frameBuffer,then send to post-processing,there will be strange phenomena.
I try to renew a frameBuffer with new size,but nothing has changed.
class MyPrimitive{
constructor(modelMatrix,context,framebuffer,depthFramebuffer){ //-------------改到这，改成深度
this.framebuffer = framebuffer
this.depthFramebuffer = depthFramebuffer
var v0 = [0.5, 0.5, 0];
var v1 = [-0.5, 0.5, 0];
var v2 = [-0.5, -0.5, 0];
var v3 = [0.5, -0.5, 0];
var vertex = [
...v0, ...v1, ...v2, ...v3
]
var positions = new Float64Array(vertex)
var nny = [0,-1,0]
var normals = new Float32Array([
...nny, ...nny, ...nny, ...nny
])
var sts = new Float32Array([
1.,1.,
0.,1.,
0.,0.,
1.,0.
])
var indices = new Uint16Array([
0,1,2,0,2,3
])
//纹理
var texture = undefined
var imageUri = 'http://localhost:8080/Widgets/Images/ImageryProviders/bingAerial.png'
Cesium.Resource.createIfNeeded(imageUri).fetchImage().then(function(image){
console.log('图片已加载')
var textureObj;
if(Cesium.defined(image.internalFormat)){
textureObj = new Cesium.Texture({
context:context,
pixelFormat: image.internalFormat,
width: image.width,
height: image.height,
source: {
arrayBufferView: image.bufferView
}
})
}else{
textureObj = new Cesium.Texture({
context:context,
source:image
})
}
texture = textureObj
})
// 1.6 定义attributeLocations
var attributeLocations = {
position: 0,
normal: 1,
textureCoordinates: 2,
};
var vs = `
attribute vec3 position;
attribute vec3 normal;
attribute vec2 st;
attribute float batchId;
varying vec3 v_positionEC;
varying vec3 v_normalEC;
varying vec2 v_st;
varying vec3 v_normal;
varying vec4 v_normalWC;
void main(){
v_positionEC = (czm_modelView * vec4(position, 1.0)).xyz;
v_normalEC = czm_normal * normal;
v_normalWC = czm_inverseModel * vec4(normal,1.);
v_normal = normal;
v_st = st;
gl_Position = czm_modelViewProjection * vec4(position, 1.0);
}
`
var fs = `
varying vec3 v_positionEC;
varying vec3 v_normalEC;
varying vec2 v_st;
uniform sampler2D myImage;
varying vec3 v_normal;
varying vec4 v_normalWC;
void main(){
vec3 positionToEyeEC = -v_positionEC;
vec3 normalEC = normalize(v_normalEC);
#ifdef FACE_FORWARD
normalEC = faceforward(normalEC, vec3(0.0, 0.0, 1.0), -normalEC);
#endif
czm_materialInput materialInput;
materialInput.normalEC = normalEC;
materialInput.positionToEyeEC = positionToEyeEC;
materialInput.st = v_st;
czm_material material = czm_getDefaultMaterial(materialInput);
material.diffuse = texture2D(myImage, materialInput.st).rgb;
vec3 normalWC = v_normalWC.xyz;
// #ifdef FLAT
gl_FragColor = vec4(normalWC,1.);//vec4(material.diffuse + material.emission, material.alpha); //vec4(normalEC.xyz,1.);
// #else
// gl_FragColor = czm_phong(normalize(positionToEyeEC), material);
// #endif
}
`
var fs_depth = `
varying vec3 v_positionEC;
varying vec3 v_normalEC;
varying vec2 v_st;
varying vec3 v_normal;
void main(){
// vec3 positionToEyeEC = -v_positionEC;
gl_FragColor = vec4(gl_FragCoord.z,0.,0.,0.);
}
`
//创建vertexArray（Geometry）
function createVertexArray(context){
var geometry = new Cesium.Geometry({
attributes: {
position: new Cesium.GeometryAttribute({
// vtxf 使用double类型的position进行计算
// componentDatatype : Cesium.ComponentDatatype.DOUBLE,
componentDatatype: Cesium.ComponentDatatype.FLOAT,
componentsPerAttribute: 3,
values: positions
}),
normal: new Cesium.GeometryAttribute({
componentDatatype: Cesium.ComponentDatatype.FLOAT,
componentsPerAttribute: 3,
values: normals
}),
textureCoordinates: new Cesium.GeometryAttribute({
componentDatatype: Cesium.ComponentDatatype.FLOAT,
componentsPerAttribute: 2,
values: sts
})
},
// Workaround Internet Explorer 11.0.8 lack of TRIANGLE_FAN
indices: indices,
primitiveType: Cesium.PrimitiveType.TRIANGLES,
boundingSphere: Cesium.BoundingSphere.fromVertices(positions)
});
var vertexArray = Cesium.VertexArray.fromGeometry({
context: context,
geometry: geometry,
attributeLocations: attributeLocations,
bufferUsage: Cesium.BufferUsage.STATIC_DRAW,
// interleave : true
});
return vertexArray;
}
//创建command
function createCommand(context){
var translucent = false
var closed = true
// 借用一下Appearance.getDefaultRenderState
var rawRenderState = Cesium.Appearance.getDefaultRenderState(translucent, closed, undefined);
var renderState = Cesium.RenderState.fromCache(rawRenderState);
var vertexShaderSource = new Cesium.ShaderSource({
sources: [vs]
});
var fragmentShaderSource = new Cesium.ShaderSource({
sources: [fs]
});
var uniformMap = {
myImage: function() {
if (Cesium.defined(texture)) {
return texture;
} else {
return context.defaultTexture;
}
}
}
var shaderProgram = Cesium.ShaderProgram.fromCache({
context: context,
vertexShaderSource: vertexShaderSource,
fragmentShaderSource: fragmentShaderSource,
attributeLocations: attributeLocations
});
return new Cesium.DrawCommand({
vertexArray: createVertexArray(context),
primitiveType: Cesium.PrimitiveType.TRIANGLES,
renderState: renderState,
shaderProgram: shaderProgram,
uniformMap: uniformMap,
owner: this,
framebuffer : framebuffer?framebuffer:undefined,
pass: Cesium.Pass.OPAQUE,
modelMatrix: modelMatrix,
})
}
function createDepthCommand(context){
var translucent = false
var closed = true
// 借用一下Appearance.getDefaultRenderState
var rawRenderState = Cesium.Appearance.getDefaultRenderState(translucent, closed, undefined);
var renderState = Cesium.RenderState.fromCache(rawRenderState);
var vertexShaderSource = new Cesium.ShaderSource({
sources: [vs]
});
var fragmentShaderSource = new Cesium.ShaderSource({
sources: [fs_depth]
});
var uniformMap = {
}
var shaderProgram = Cesium.ShaderProgram.fromCache({
context: context,
vertexShaderSource: vertexShaderSource,
fragmentShaderSource: fragmentShaderSource,
attributeLocations: attributeLocations
});
return new Cesium.DrawCommand({
vertexArray: createVertexArray(context),
primitiveType: Cesium.PrimitiveType.TRIANGLES,
renderState: renderState,
shaderProgram: shaderProgram,
uniformMap: uniformMap,
owner: this,
framebuffer : depthFramebuffer?depthFramebuffer:undefined,
pass: Cesium.Pass.OPAQUE,
modelMatrix: modelMatrix,
})
}
//清空命令
function createClearCommand(fb){
return new Cesium.ClearCommand({
pass:Cesium.Pass.OPAQUE,
color:new Cesium.Color(0.,0.,0.,0.),
framebuffer:fb,
// stencil : 0,
// owner : this,
depth: 1.0,
})
}
this.show = true
this._command = undefined
this._createCommand = createCommand;
this._positionECCommand = undefined
this._createDepthCommand = createDepthCommand
this._cCommand = undefined
this._cPositionECCommand = undefined
this._createClearCommand = createClearCommand;
}
update(frameState){
if(!this.show){
return
}
if(!Cesium.defined(this._cCommand) && this.framebuffer && this.depthFramebuffer){
this._cCommand = this._createClearCommand(this.framebuffer)
this._cPositionECCommand = this._createClearCommand(this.depthFramebuffer)
}
if(Cesium.defined(this._cCommand) && Cesium.defined(this._cPositionECCommand)){
frameState.commandList.push(this._cCommand)
frameState.commandList.push(this._cPositionECCommand)
}
if(!Cesium.defined(this._command)){
this._command = this._createCommand(frameState.context)
}
if(Cesium.defined(this._command)){
frameState.commandList.push(this._command)
}
//深度绘制命令
if(!Cesium.defined(this._positionECCommand) && this.depthFramebuffer){
this._positionECCommand = this._createDepthCommand(frameState.context)
}
if(Cesium.defined(this._positionECCommand)){
frameState.commandList.push(this._positionECCommand)
}
}
isDestroyed() {
return false;
}
destroy() {
if (Cesium.defined(this._command)) {
this._command.shaderProgram = this._command.shaderProgram && this._command.shaderProgram.destroy();
}
return destroyObject(this);
};
}
