@group(0) @binding(0)
var modelView: mat4x4;
@group(0) @binding(1)
var projection: mat4x4;
@group(0) @binding(2)
var normalMatrix: mat4x4;
@group(0) @binding(3)
var screenDim: vec2;

struct VertexOutput {
    @builtin(position) clip_position: vec4,
};

@vertex
fn vs_main(
    @location(0) inPos: vec3,
    @location(1) inNormal: vec3
) -> VertexOutput {
    var out: VertexOutput;
    out.clip_position = projection * modelView * vec4(inPos, 1.0);
    var clip_normal:vec4 = projection * normalMatrix * vec4(inNormal, 0.0);

    out.clip_position =vec4( out.clip_position.xy + normalize(clip_normal.xy)*6.4/screenDim * out.clip_position.w,out.clip_position.zw );
    return out;
}

// Fragment shader

@fragment
fn fs_main(in: VertexOutput) -> @location(0) vec4 {
    return vec4( 0.0,0.0,0.0,1.0);
}

let { positionBuffer, normalBuffer, indexBuffer, indexSize } = await loadObj(device, '../data/teapot.obj');
this.positionBuffer = positionBuffer;
// The normal buffer contains vertex normals calculated as averages of adjacent surface normals.
this.normalBuffer = normalBuffer;
this.indexBuffer = indexBuffer;
this.indexSize = indexSize;

const outlinePipelineDesc = {
    layout: device.createPipelineLayout(outlinePipelineLayoutDesc),
    vertex: {
        module: shaderModuleOutline,
        entryPoint: 'vs_main',
        buffers: [positionBufferLayoutDesc, normalBufferLayoutDesc]
    },
    fragment: {
        module: shaderModuleOutline,
        entryPoint: 'fs_main',
        targets: [colorState]
    },
    primitive: {
        topology: 'triangle-list',
        frontFace: 'ccw',
        cullMode: 'front'
    },
    depthStencil: {
        depthWriteEnabled: true,
        depthCompare: 'less',
        format: 'depth32float'
    }
}

// 색상을 RGB로 설정하는 대신, 강도만 계산하기 위해 스칼라를 사용합니다.
const diffuseConstant:f32 = 1.0;
const specularConstant:f32 = 0.0;
const ambientConstant:f32 = 0.0;

// 동일한 퐁 셰이딩을 적용하지만, 최종 색상을 도출하는 대신 강도를 얻습니다.
var intensity:f32 = max(dot(-lightDir, n), 0.0)* diffuseConstant + specular(-lightDir, viewDir, n, shininess) * specularConstant;
// 광원 강도를 사용하여 최종 색상을 룩업합니다.
var diffuse:vec3 = textureSample(t_shade, s_shade, intensity * visibility).xyz;

// 1D 텍스처, 너비는 128로 하드코딩됩니다.
const shadeTextureDesc = {
    size: [128],
    dimension: '1d',
    format: "rgba8unorm",
    usage: GPUTextureUsage.COPY_DST | GPUTextureUsage.TEXTURE_BINDING
};
// 색상 데이터를 채웁니다. 이 룩업 테이블은 4개의 색상 대역을 정의합니다.
let shadeTextureColors = [];
for (let i = 0; i < 128; ++i) {
    if (i < 40) {
        shadeTextureColors.push(95);
        shadeTextureColors.push(121);
        shadeTextureColors.push(127);
        shadeTextureColors.push(255);
    }
    else if (i >= 40 && i < 80) {
        shadeTextureColors.push(143);
        shadeTextureColors.push(181);
        shadeTextureColors.push(191);
        shadeTextureColors.push(255);
    }
    else if (i >= 80 && i < 124) {
        shadeTextureColors.push(191);
        shadeTextureColors.push(242);
        shadeTextureColors.push(255);
        shadeTextureColors.push(255);
    }
    else {
        shadeTextureColors.push(255);
        shadeTextureColors.push(255);
        shadeTextureColors.push(255);
        shadeTextureColors.push(255);
    }
}
// 텍스처를 생성하고 데이터를 복사합니다.
let shadeTexture = device.createTexture(shadeTextureDesc);
device.queue.writeTexture({ texture: shadeTexture }, new Uint8Array(shadeTextureColors), {
    offset: 0,
    bytesPerRow: 128 * 4,
    rowsPerImage: 1
}, { width: 128 });
// 완료될 때까지 기다립니다.
await device.queue.onSubmittedWorkDone();