shader attribute

This commit is contained in:
monoid 2021-09-02 21:09:50 +09:00
parent 3d9766231d
commit bcef7a452f
7 changed files with 114 additions and 6 deletions

View File

@ -1,13 +1,14 @@
html{ html, body{
width: 100%; width: 100%;
height: 100%; height: 100%;
}
body{
margin: 0; margin: 0;
padding: 0; padding: 0;
}
body{
background: rgba(0, 0, 0, 0) linear-gradient(rgb(56, 56, 56), rgb(122, 122, 122)) repeat scroll 0% 0%; background: rgba(0, 0, 0, 0) linear-gradient(rgb(56, 56, 56), rgb(122, 122, 122)) repeat scroll 0% 0%;
} }
#canvas{ #canvas{
width: 100%; top: 0;
height: 100%; left: 0;
position: fixed;
} }

View File

@ -1,4 +1,9 @@
/// <reference path="node_modules/webgl-strict-types/index.d.ts" /> /// <reference path="node_modules/webgl-strict-types/index.d.ts" />
import {createProgramFromSource, ProgramError, ShaderError} from "./src/gl_util";
/// <reference path="./src/glsl.d.ts" />
import vert_src from "./src/vertex.vert";
import frag_src from "./src/fragment.frag";
function main(){ function main(){
const canvas = document.querySelector("canvas"); const canvas = document.querySelector("canvas");
@ -6,11 +11,24 @@ function main(){
console.error("couldn't find canvas"); console.error("couldn't find canvas");
return; return;
} }
let gl = canvas.getContext("webgl2"); let gl = canvas.getContext("webgl2") as any as WebGL2RenderingContextStrict|null;
if(gl === null){ if(gl === null){
console.error("webgl2 is not supported!"); console.error("webgl2 is not supported!");
return; return;
} }
try{
const program = createProgramFromSource(gl,vert_src,frag_src);
gl.useProgram(program);
}
catch(e){
if(e instanceof ShaderError){
console.error(e.message,e.getShaderInfoLog(gl));
}
else if(e instanceof ProgramError){
console.error(e.message,e.getProgramInfoLog(gl));
}
throw e;
}
const position = [ const position = [
-0.5,-0.5, -0.5,-0.5,
0.0,0.5, 0.0,0.5,
@ -18,6 +36,11 @@ function main(){
]; ];
let positionBuffer = gl.createBuffer(); let positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,positionBuffer); gl.bindBuffer(gl.ARRAY_BUFFER,positionBuffer);
gl.enableVertexAttribArray(0);
gl.vertexAttribPointer(0,2,gl.FLOAT,false,0,0);
const floatPosition = new Float32Array(position); const floatPosition = new Float32Array(position);
gl.bufferData(gl.ARRAY_BUFFER,floatPosition,gl.STATIC_DRAW); gl.bufferData(gl.ARRAY_BUFFER,floatPosition,gl.STATIC_DRAW);
gl.drawArrays(gl.TRIANGLES,0,3); gl.drawArrays(gl.TRIANGLES,0,3);

View File

@ -13,6 +13,8 @@
"parcel-bundler": "^1.12.5" "parcel-bundler": "^1.12.5"
}, },
"devDependencies": { "devDependencies": {
"glslify-bundle": "^5.1.1",
"glslify-deps": "^1.3.2",
"typescript": "^4.4.2", "typescript": "^4.4.2",
"webgl-strict-types": "^1.0.4" "webgl-strict-types": "^1.0.4"
} }

7
src/fragment.frag Normal file
View File

@ -0,0 +1,7 @@
#version 300 es
precision highp float;
layout(location=0) out vec4 outColor;
void main() {
outColor = vec4(0.0,0.0,1.0,1.0);
}

57
src/gl_util.ts Normal file
View File

@ -0,0 +1,57 @@
import GL = WebGLRenderingContextStrict;
import GL2 = WebGL2RenderingContextStrict;
export class ShaderError extends Error{
constructor(
readonly shader:WebGLShader
,msg?:string){
super(msg);
}
getShaderInfoLog(gl:GL2){
return gl.getShaderInfoLog(this.shader);
}
}
export class ProgramError extends Error{
constructor(
readonly program:WebGLProgram
,msg?:string){
super(msg);
}
getProgramInfoLog(gl:GL2){
return gl.getProgramInfoLog(this.program);
}
}
/***
* compile shader
*/
export function compileShader(gl:GL2, source:string, type: GL.ShaderType): WebGLShader{
const shader = gl.createShader(type);
gl.shaderSource(shader,source);
gl.compileShader(shader);
const status = gl.getShaderParameter(shader,gl.COMPILE_STATUS);
if(!status){
throw new ShaderError(shader,"Could not compile shader!");
}
return shader;
}
export function createProgram(gl:GL2, vertex:WebGLShader,frag:WebGLShader){
const program = gl.createProgram();
gl.attachShader(program,vertex);
gl.attachShader(program,frag);
gl.linkProgram(program);
const status = gl.getProgramParameter(program,gl.LINK_STATUS);
if(!status){
throw new ProgramError(program,"Coudl not link program!");
}
return program;
}
export function createProgramFromSource(gl:GL2, vert:string,frag:string){
const vert_shader = compileShader(gl,vert,gl.VERTEX_SHADER);
const frag_shader = compileShader(gl,frag,gl.FRAGMENT_SHADER);
return createProgram(gl,vert_shader,frag_shader);
}

12
src/glsl.d.ts vendored Normal file
View File

@ -0,0 +1,12 @@
declare module '*.glsl' {
const value: string
export default value
}
declare module '*.frag' {
const value: string
export default value
}
declare module '*.vert' {
const value: string
export default value
}

6
src/vertex.vert Normal file
View File

@ -0,0 +1,6 @@
#version 300 es
layout(location=0) in vec4 pos;
void main() {
gl_Position = pos;
}