monoid/computer-graphics-study
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add texture

Browse Source
This commit is contained in:
monoid 2021-10-16 23:00:34 +09:00
parent cbbb67719e
commit 1202b4faad
6 changed files with 157 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -18,6 +18,7 @@
},
"devDependencies": {
"@parcel/transformer-glsl": "^2.0.0-rc.0",
"@parcel/transformer-image": "^2.0.0-rc.0",
"@types/react": "^17.0.27",
"parcel": "^2.0.0-rc.0",
"webgl-strict-types": "^1.0.5"

1
src/app.ts
View File

@ -70,6 +70,7 @@ export class CanvasApp{
this.gl.clearColor(0,0,0,0);
this.gl.clearDepth(1);
this.gl.enable(this.gl.DEPTH_TEST);
//this.gl.enable(this.gl.CULL_FACE);
return true;
}
handleInput(){

43
src/drawer3D.ts
View File

@ -16,7 +16,9 @@ export class Drawer3D implements Drawable{
gl : WebGL2RenderingContext;
program: G.GLProgram;
camera : Camera;
model: Model | undefined;
teapot: Model | undefined;
cube: Model | undefined;
texture: G.Texture;
constructor(gl: WebGL2RenderingContext){
this.gl = gl;
this.camera = new Camera([-20,1,-10]);
@ -24,7 +26,9 @@ export class Drawer3D implements Drawable{
this.camera.near = 0.1;
this.camera.fovY = Math.PI * 90 / 180;
this.camera.aspect = 1;
this.model = undefined;
this.teapot = undefined;
this.cube = undefined;
this.texture = new G.Texture(gl);
try{
this.program = new G.GLProgram(createProgramFromSource(gl,vert_src,frag_src));
const attr = this.program.getActiveAttributes(gl);
@ -39,24 +43,43 @@ export class Drawer3D implements Drawable{
}
async init(){
const gl = this.gl;
const url = new URL("../assets/models/teapot/teapot.obj",import.meta.url);
this.model = await Model.loadFromOBJ(gl,url.href);
const teapot_url = new URL("../assets/models/teapot/teapot.obj",import.meta.url);
this.teapot = await Model.loadFromOBJ(gl,teapot_url.href);
const cube_url = new URL("../assets/models/cube/cube.obj",import.meta.url);
this.cube = await Model.loadFromOBJ(gl,cube_url.href);
console.log("loading model complete");
this.model.ready(gl,this.program);
this.teapot.ready(gl,this.program);
this.cube.ready(gl,this.program);
this.texture;
const texture_url = new URL("../assets/uv-grid.png",import.meta.url);
const texture_image = G.makeImageElement(texture_url.href);
texture_image.onload = ()=>{
this.texture.setImage(gl,texture_image);
}
}
draw(gl: WebGL2RenderingContext,state:RenderState): void {
if(this.model !== undefined){
this.camera.aspect = gl.canvas.width/gl.canvas.height;
this.camera.UpdateProjectionMat();
this.program.use(gl);
this.program.setUniformMat4f(gl,"viewMat",this.camera.viewMatrix);
this.program.setUniformMat4f(gl,"projectionMat",this.camera.projectionMatrix);
this.texture.bind(gl,0);
this.program.setUniform1i(gl,"mainTexture",0);
if(this.teapot !== undefined){
for(const pos of [[0,0,0],[0,0,25],[40,0,25]]){
this.program.setUniformMat4f(gl,"modelMat",mat4.fromTranslation(mat4.create(), vec3.fromValues(pos[0],pos[1],pos[2]) ));
this.model.draw(gl);
}
this.teapot.draw(gl);
}
}
if(this.cube !== undefined){
const modelMat = mat4.create();
mat4.identity(modelMat);
mat4.translate(modelMat,modelMat,[45,0,0]);
mat4.scale(modelMat,modelMat,[5,5,5]);
//mat4.rotateX(modelMat,modelMat,Math.PI * 30 / 180);
this.program.setUniformMat4f(gl,"modelMat",modelMat);
this.cube.draw(gl);
}
}
}

11
src/fragment.frag
View File

@ -1,11 +1,18 @@
#version 300 es
precision highp float;
layout(location=0) out vec4 outColor;
uniform sampler2D mainTexture;
in vec3 fragNormal;
in vec2 texUV;
void main() {
vec3 c = normalize(vec3(20,20,1));
vec3 lightPos = vec3(20,20,1);
vec3 c = normalize(lightPos);
float intense = dot(c,normalize(fragNormal));
intense = (max(intense,-0.5)+1.0)/2.0;
outColor = vec4(vec3(1,1,0) * intense,1);
vec4 objectColor = texture(mainTexture,texUV);
outColor = vec4(objectColor.xyz * intense,1);
}

37
src/glWrapper.ts
View File

@ -148,3 +148,40 @@ export class VertexArray{
export function createVertexArray(gl: WebGL2RenderingContext) {
return new VertexArray(gl.createVertexArray());
}
export class Texture {
readonly id: WebGLTexture;
constructor(gl: WebGL2RenderingContext) {
this.id = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, this.id);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
//1x1 texture를 생성합니다.
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([0, 0, 255, 255]));
gl.bindTexture(gl.TEXTURE_2D, null);
}
bind(gl: WebGL2RenderingContext, slot: number) {
gl.activeTexture(gl.TEXTURE0 + slot);
gl.bindTexture(gl.TEXTURE_2D, this.id);
}
unbind(gl: WebGL2RenderingContext) {
gl.bindTexture(gl.TEXTURE_2D, null);
}
setImage(gl: WebGL2RenderingContext, image: HTMLImageElement) {
gl.bindTexture(gl.TEXTURE_2D, this.id);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
gl.generateMipmap(gl.TEXTURE_2D);
gl.bindTexture(gl.TEXTURE_2D, null);
}
}
export function makeImageElement(url: string) {
const image = new Image();
image.src = url;
image.crossOrigin = "";
return image;
}

3
src/vertex.vert
View File

@ -9,8 +9,11 @@ uniform mat4 viewMat;
uniform mat4 projectionMat;
out vec3 fragNormal;
out vec2 texUV;
void main() {
gl_Position = projectionMat * viewMat * modelMat * vec4(position,1);
fragNormal = mat3(transpose(inverse(modelMat))) * normal;
texUV = textureUV;
}