add texture

package.json

@@ -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"

src/app.ts

@@ -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(){

src/drawer3D.ts

@@ -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);
+        const teapot_url = new URL("../assets/models/teapot/teapot.obj",import.meta.url);
-        this.model = await Model.loadFromOBJ(gl,url.href);
+        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.teapot.draw(gl);
-                this.model.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);
         }
     }
 }

src/fragment.frag

@@ -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);
 }

src/glWrapper.ts

@@ -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;
+}

src/vertex.vert

@@ -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;
 }