CocosPlugin/esengine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

shader

Browse Source
This commit is contained in:
YHH
2020-06-28 08:38:22 +08:00
parent d7385654ef
commit a63d8598d8
12 changed files with 440 additions and 437 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
source/src/ECS/Components/RenderableComponent.ts
View File

@@ -7,6 +7,8 @@ abstract class RenderableComponent extends Component implements IRenderable {
protected _bounds: Rectangle = new Rectangle();
protected _localOffset: Vector2 = Vector2.zero;
public color: number = 0x000000;
public get width(){
return this.getWidth();
}

178
source/src/Graphics/Effects/GaussianBlurEffect.ts
View File

@@ -1,126 +1,72 @@
class GaussianBlurEffect extends egret.CustomFilter {
private static vertSrc = "attribute vec2 aVertexPosition;\n" +
"attribute vec2 aTextureCoord;\n" +
// private static blur_frag = "precision mediump float;\n" +
// "uniform vec2 blur;\n" +
// "uniform sampler2D uSampler;\n" +
// "varying vec2 vTextureCoord;\n" +
// "uniform vec2 uTextureSize;\n" +
// "void main()\n" +
// "{\n " +
// "const int sampleRadius = 5;\n" +
// "const int samples = sampleRadius * 2 + 1;\n" +
// "vec2 blurUv = blur / uTextureSize;\n" +
// "vec4 color = vec4(0, 0, 0, 0);\n" +
// "vec2 uv = vec2(0.0, 0.0);\n" +
// "blurUv /= float(sampleRadius);\n" +
// "for (int i = -sampleRadius; i <= sampleRadius; i++) {\n" +
// "uv.x = vTextureCoord.x + float(i) * blurUv.x;\n" +
// "uv.y = vTextureCoord.y + float(i) * blurUv.y;\n" +
// "color += texture2D(uSampler, uv);\n" +
// "}\n" +
// "color /= float(samples);\n" +
// "gl_FragColor = color;\n" +
// "}";
"uniform vec2 projectionVector;\n" +
private static blur_frag = "precision mediump float;\n" +
"uniform sampler2D uSampler;\n" +
"uniform float screenWidth;\n" +
"uniform float screenHeight;\n" +
"varying vec2 vTextureCoord;\n" +
"float normpdf(in float x, in float sigma)\n" +
"{\n" +
"return 0.39894*exp(-0.5*x*x/(sigma*sigma))/sigma;\n" +
"}\n" +
"const vec2 center = vec2(-1.0, 1.0);\n" +
"void main()\n" +
"{\n" +
"vec3 c = texture2D(uSampler, gl_FragCoord.xy / vec2(screenWidth, screenHeight).xy).rgb;\n" +
"void main(void) {\n" +
" gl_Position = vec4( (aVertexPosition / projectionVector) + center , 0.0, 1.0);\n" +
" vTextureCoord = aTextureCoord;\n" +
"const int mSize = 11;\n" +
"const int kSize = (mSize - 1)/2;\n" +
"float kernel[mSize];\n" +
"vec3 final_colour = vec3(0.0);\n" +
"float sigma = 7.0;\n" +
"float z = 0.0;\n" +
"for (int j = 0; j <= kSize; ++j)\n" +
"{\n" +
"kernel[kSize+j] = kernel[kSize-j] = normpdf(float(j),sigma);\n" +
"}\n" +
"for (int j = 0; j < mSize; ++j)\n" +
"{\n" +
"z += kernel[j];\n" +
"}\n" +
"for (int i = -kSize; i <= kSize; ++i)\n" +
"{\n" +
"for (int j = -kSize; j <= kSize; ++j)\n" +
"{\n" +
"final_colour += kernel[kSize+j]*kernel[kSize+i]*texture2D(uSampler, (gl_FragCoord.xy+vec2(float(i),float(j))) / vec2(screenWidth, screenHeight).xy).rgb;\n" +
"}\n}\n" +
"gl_FragColor = vec4(final_colour/(z*z), 1.0);\n" +
"}";
private static fragmentSrc = "precision lowp float;\n" +
"varying vec2 vTextureCoord;\n" +
"uniform sampler2D uSampler;\n" +
"#define SAMPLE_COUNT 15\n" +
"uniform vec2 _sampleOffsets[SAMPLE_COUNT];\n" +
"uniform float _sampleWeights[SAMPLE_COUNT];\n" +
"void main(void) {\n" +
"vec4 c = vec4(0, 0, 0, 0);\n" +
"for( int i = 0; i < SAMPLE_COUNT; i++ )\n" +
" c += texture2D( uSampler, vTextureCoord + _sampleOffsets[i] ) * _sampleWeights[i];\n" +
"gl_FragColor = c;\n" +
"}";
private _sampleWeights: number[];
private _verticalSampleOffsets: Vector2[];
private _horizontalSampleOffsets: Vector2[];
private _blurAmount = 2;
private _horizontalBlurDelta = 0.01;
private _verticalBlurDelta = 0.01;
private _sampleCount: number = 15;
public get blurAmount(){
return this._blurAmount;
}
public set blurAmount(value: number){
if (this._blurAmount != value){
if (value == 0)
value = 0.001;
this._blurAmount = value;
this.calculateSampleWeights();
}
}
public get horizontalBlurDelta(){
return this._horizontalBlurDelta;
}
public set horizontalBlurDelta(value: number){
if (value != this._horizontalBlurDelta){
this._horizontalBlurDelta = value;
this.setBlurEffectParameters(this._horizontalBlurDelta, 0, this._horizontalSampleOffsets);
}
}
public get verticalBlurDelta(){
return this._verticalBlurDelta;
}
public set verticalBlurDelta(value: number){
if (value != this._verticalBlurDelta){
this._verticalBlurDelta = value;
this.setBlurEffectParameters(0, this._verticalBlurDelta, this._verticalSampleOffsets);
}
}
constructor(){
super(GaussianBlurEffect.vertSrc, GaussianBlurEffect.fragmentSrc);
this._sampleWeights = [];
this._verticalSampleOffsets = [];
this._horizontalSampleOffsets = [];
this._verticalSampleOffsets[0] = Vector2.zero;
this._horizontalSampleOffsets[0] = Vector2.zero;
this.calculateSampleWeights();
this.setBlurEffectParameters(this._horizontalBlurDelta, 0, this._horizontalSampleOffsets);
this.prepareForHorizontalBlur();
}
public prepareForHorizontalBlur(){
this.uniforms._sampleOffsets = this._horizontalSampleOffsets;
}
public prepareForVerticalBlur(){
this.uniforms._sampleOffsets = this._verticalSampleOffsets;
}
private calculateSampleWeights(){
this._sampleWeights[0] = this.computeGaussian(0);
let totalWeights = this._sampleWeights[0];
for (let i = 0; i < this._sampleCount / 2; i ++){
let weight = this.computeGaussian(i + 1);
this._sampleWeights[i * 2 + 1] = weight;
this._sampleWeights[i * 2 + 2] = weight;
totalWeights += weight * 2;
}
for (let i = 0; i < this._sampleWeights.length; i ++){
this._sampleWeights[i] /= totalWeights;
}
this.uniforms._sampleWeights = this._sampleWeights;
}
private setBlurEffectParameters(dx: number, dy: number, offsets: Vector2[]){
for (let i = 0; i < this._sampleCount / 2; i ++){
let sampleOffset = i * 2 + 1.5;
let delta = Vector2.multiply( new Vector2(dx, dy), new Vector2(sampleOffset));
offsets[i * 2 + 1] = delta;
offsets[i * 2 + 2] = new Vector2(-delta);
}
}
private computeGaussian(n: number){
return ((1 / Math.sqrt(2 * Math.PI * this._blurAmount)) * Math.exp(-(n * n) / (2 * this._blurAmount * this._blurAmount)));
super(PostProcessor.default_vert, GaussianBlurEffect.blur_frag,{
screenWidth: SceneManager.stage.stageWidth,
screenHeight: SceneManager.stage.stageHeight
});
}
}

34
source/src/Graphics/Effects/PolygonLightEffect.ts Normal file
View File

@@ -0,0 +1,34 @@
class PolygonLightEffect extends egret.CustomFilter {
private static vertSrc = "attribute vec2 aVertexPosition;\n" +
"attribute vec2 aTextureCoord;\n" +
"uniform vec2 projectionVector;\n" +
"varying vec2 vTextureCoord;\n" +
"const vec2 center = vec2(-1.0, 1.0);\n" +
"void main(void) {\n" +
" gl_Position = vec4( (aVertexPosition / projectionVector) + center , 0.0, 1.0);\n" +
" vTextureCoord = aTextureCoord;\n" +
"}";
private static fragmentSrc = "precision lowp float;\n" +
"varying vec2 vTextureCoord;\n" +
"uniform sampler2D uSampler;\n" +
"#define SAMPLE_COUNT 15\n" +
"uniform vec2 _sampleOffsets[SAMPLE_COUNT];\n" +
"uniform float _sampleWeights[SAMPLE_COUNT];\n" +
"void main(void) {\n" +
"vec4 c = vec4(0, 0, 0, 0);\n" +
"for( int i = 0; i < SAMPLE_COUNT; i++ )\n" +
" c += texture2D( uSampler, vTextureCoord + _sampleOffsets[i] ) * _sampleWeights[i];\n" +
"gl_FragColor = c;\n" +
"}";
constructor(){
super(PolygonLightEffect.vertSrc, PolygonLightEffect.fragmentSrc);
}
}

25
source/src/Graphics/PostProcessing/PostProcessor.ts
View File

@@ -1,10 +1,28 @@
class PostProcessor {
public enable: boolean;
public effect: egret.CustomFilter;
public effect: egret.Filter;
public scene: Scene;
public shape: egret.Shape;
constructor(effect: egret.CustomFilter = null){
public static default_vert = "attribute vec2 aVertexPosition;\n" +
"attribute vec2 aTextureCoord;\n" +
"attribute vec2 aColor;\n" +
"uniform vec2 projectionVector;\n" +
//"uniform vec2 offsetVector;\n" +
"varying vec2 vTextureCoord;\n" +
"varying vec4 vColor;\n" +
"const vec2 center = vec2(-1.0, 1.0);\n" +
"void main(void) {\n" +
"gl_Position = vec4( (aVertexPosition / projectionVector) + center , 0.0, 1.0);\n" +
"vTextureCoord = aTextureCoord;\n" +
"vColor = vec4(aColor.x, aColor.x, aColor.x, aColor.x);\n" +
"}";
constructor(effect: egret.Filter = null){
this.enable = true;
this.effect = effect;
}
@@ -25,7 +43,8 @@ class PostProcessor {
public onSceneBackBufferSizeChanged(newWidth: number, newHeight: number){}
protected drawFullscreenQuad(){
this.shape.filters = [this.effect];
this.scene.filters = [this.effect];
// this.shape.filters = [this.effect];
}
public unload(){

30
source/src/Graphics/PostProcessing/PostProcessors/GaussianBlurPostProcessor.ts
View File

@@ -1,36 +1,6 @@
class GaussianBlurPostProcessor extends PostProcessor {
private _renderTargetScale = 1;
public get renderTargetScale(){
return this._renderTargetScale;
}
public set renderTargetScale(value: number){
if (this._renderTargetScale != value){
this._renderTargetScale = value;
this.updateEffectDeltas();
}
}
public onAddedToScene(scene: Scene){
super.onAddedToScene(scene);
this.effect = new GaussianBlurEffect();
}
public onSceneBackBufferSizeChanged(newWidth: number, newHeight: number){
this.updateEffectDeltas();
}
private updateEffectDeltas(){
let effect = this.effect as GaussianBlurEffect;
effect.horizontalBlurDelta = 1 / (this.scene.stage.stageWidth * this._renderTargetScale);
effect.verticalBlurDelta = 1 / (this.scene.stage.stageHeight * this._renderTargetScale);
}
public process(){
let effect = this.effect as GaussianBlurEffect;
effect.prepareForHorizontalBlur();
this.drawFullscreenQuad();
effect.prepareForVerticalBlur();
this.drawFullscreenQuad();
}
}

52
source/src/Graphics/Renderers/PolygonLight/PolyLight.ts Normal file
View File

@@ -0,0 +1,52 @@
class PolyLight extends RenderableComponent {
public power: number;
protected _radius: number;
private _lightEffect;
private _indices: number[] = [];
public get bounds(){
if (this._areBoundsDirty){
this._bounds.calculateBounds(this.entity.transform.position, this._localOffset, new Vector2(this._radius),
Vector2.one, 0, this._radius * 2, this._radius * 2);
this._areBoundsDirty = false;
}
return this._bounds;
}
public get radius(){
return this._radius;
}
public set radius(value: number){
this.setRadius(value);
}
constructor(radius: number, color: number, power: number){
super();
this.radius = radius;
this.power = power;
this.color = color;
this.computeTriangleIndices();
}
private computeTriangleIndices(totalTris: number = 20){
this._indices.length = 0;
for (let i = 0; i < totalTris; i += 2){
this._indices.push(0);
this._indices.push(i + 2);
this._indices.push(i + 1);
}
}
public setRadius(radius: number){
if (radius != this._radius){
this._radius = radius;
this._areBoundsDirty = true;
}
}
public render(camera: Camera) {
}
}