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

add 3d drawer

Browse Source
This commit is contained in:
monoid 2021-10-10 02:07:34 +09:00
parent 5092540715
commit 1e6314fcdd
7 changed files with 212 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

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

44
src/app.ts
View File

@ -1,18 +1,53 @@
import { Drawer2D } from "./drawer2D";
import { Drawer3D } from "./drawer3D";
import { TriangleDrawer } from "./triangle_drawer";
export class CanvasApp{
readonly gl: WebGL2RenderingContext;
renderer: Drawer2D;
trenderer : TriangleDrawer;
r : Drawer3D;
constructor(gl: WebGL2RenderingContext){
this.gl = gl;
this.renderer = new Drawer2D(gl);
this.trenderer = new TriangleDrawer(gl);
this.r = new Drawer3D(gl);
}
intialize():boolean{
this.renderer.prepare();
this.trenderer.prepare(this.gl);
this.r.init();
document.addEventListener("keydown",(e)=>{
if(e.key == "h"){
this.r.camera.rotateRight(Math.PI * 5 / 180.0);
}
if(e.key == "f"){
this.r.camera.rotateRight(-Math.PI * 5 / 180.0)
}
if(e.key == "t"){
this.r.camera.rotateUp(Math.PI * 5 / 180.0)
}
if(e.key == "g"){
this.r.camera.rotateUp(-Math.PI * 5 / 180.0)
}
if(e.key == "d"){
this.r.camera.pos[0] += 0.5;
}
if(e.key == "a"){
this.r.camera.pos[0] -= 0.5;
}
if(e.key == "w"){
this.r.camera.pos[2] += 0.5;
}
if(e.key == "s"){
this.r.camera.pos[2] -= 0.5;
}
});
this.gl.clearColor(0,0,0,0);
this.gl.clearDepth(1);
this.gl.enable(this.gl.DEPTH_TEST);
return true;
}
startRun(){
@ -32,11 +67,10 @@ export class CanvasApp{
}
drawScene(){
this.gl.viewport(0,0,this.gl.canvas.width,this.gl.canvas.height);
this.gl.clearColor(0,0,0,0);
this.gl.clear(this.gl.COLOR_BUFFER_BIT);
this.renderer.draw(this.gl,{});
this.trenderer.draw(this.gl,{});
this.gl.clear(this.gl.COLOR_BUFFER_BIT|this.gl.DEPTH_BUFFER_BIT);
//this.renderer.draw(this.gl,{});
//this.trenderer.draw(this.gl,{});
this.r.draw(this.gl,{});
requestAnimationFrame(this.drawScene.bind(this));
}
};

32
src/camera.ts
View File

@ -3,12 +3,20 @@ import {mat4, vec3, quat, mat3} from "gl-matrix";
export class Camera{
pos:vec3;
rot:quat;
#proj : mat4;
fovY : number;
aspect : number;
far : number;
near: number;
constructor(pos:vec3,rot?:quat){
this.pos = pos;
this.#proj = mat4.create();
if(rot == undefined){
const lookAt = mat4.lookAt(mat4.create(),this.pos,[0,0,0],[0,0,1])
const lookAt = mat4.lookAt(mat4.create(),this.pos,[0,0,0],[0,1,0]);
const rotMat = mat3.fromMat4(mat3.create(),lookAt);
this.rot = quat.fromMat3(quat.create(), rotMat);
//quat.normalize(this.rot,this.rot);
//quat.conjugate(this.rot,this.rot);
}
else{
this.rot = rot;
@ -18,14 +26,24 @@ export class Camera{
quat.rotateY(this.rot,this.rot,rad);
}
rotateUp(rad:number){
quat.rotateX(this.rot,this.rot,rad);
}
rotateClockwise(rad:number){
quat.rotateZ(this.rot,this.rot,rad);
}
getViewMat(){
rotateClockwise(rad:number){
quat.rotateX(this.rot,this.rot,rad);
}
get viewMatrix():mat4{
const p = vec3.negate(vec3.create() ,this.pos);
const t = mat4.fromTranslation(mat4.create(),p);
const r = mat4.fromQuat(mat4.create(),this.rot);
mat4.translate(r,r,this.pos);
return r;
return mat4.mul(mat4.create(),r,t);
}
/**
* update projection matrix
*/
UpdateProjectionMat(){
mat4.perspective(this.#proj,this.fovY,this.aspect,this.near,this.far);
}
get projectionMatrix():mat4{
return this.#proj;
}
};

60
src/drawer3D.ts Normal file
View File

@ -0,0 +1,60 @@
/// <reference path="./glsl.d.ts" />
import vert_src from "./vertex.vert";
import frag_src from "./fragment.frag";
import {createProgramFromSource, ProgramError, ShaderError} from "./gl_util";
import { Camera } from "./camera";
import * as G from "./glWrapper";
import { Drawable, RenderState } from "./drawable";
import { Model } from "./model";
import { mat4 } from "gl-matrix";
export class Drawer3D implements Drawable{
gl : WebGL2RenderingContext;
program: G.GLProgram;
camera : Camera;
model: Model | undefined;
constructor(gl: WebGL2RenderingContext){
this.gl = gl;
this.camera = new Camera([-20,1,-10]);
this.camera.far = 1000;
this.camera.near = 0.1;
this.camera.fovY = Math.PI * 90 / 180;
this.camera.aspect = 1;
this.model = undefined;
try{
this.program = new G.GLProgram(createProgramFromSource(gl,vert_src,frag_src));
const attr = this.program.getActiveAttributes(gl);
console.log(attr);
}
catch(e){
if(e instanceof ShaderError){
console.log(e.info);
}
throw e;
}
}
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);
console.log("loading model complete");
this.model.ready(gl,this.program);
}
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.program.setUniformMat4f(gl,"modelMat",mat4.fromTranslation(mat4.create(),[0,0,0]));
this.model.draw(gl);
}
}
}

9
src/fragment.frag
View File

@ -1,10 +1,11 @@
#version 300 es
precision highp float;
layout(location=0) out vec4 outColor;
//in vec4 gl_FragCoord;
//in vec2 gl_PointCoord;
uniform vec4 u_color;
in vec3 fragNormal;
void main() {
outColor = u_color;
vec3 c = normalize(vec3(20,20,1));
float intense = dot(c,normalize(fragNormal));
intense = (max(intense,-0.5)+1.0)/2.0;
outColor = vec4(vec3(1,1,0) * intense,1);
}

70
src/model.ts Normal file
View File

@ -0,0 +1,70 @@
import { createIndexBuffer, createVertexArray, createVertexBuffer, GLProgram, IndexBuffer, VertexArray, VertexBuffer } from "./glWrapper";
import {OBJ} from "webgl-obj-loader";
import { assertBoolean } from "./util";
type VertexType = "position" | "normal" | "textureUV";
type Vertexes = {[key in VertexType]:VertexBuffer};
export class Model{
vertexes : Vertexes;
ibo :IndexBuffer;
vao :VertexArray;
constructor(gl:WebGL2RenderingContext,vertex:Vertexes,index :IndexBuffer){
this.vertexes = vertex;
this.vao = createVertexArray(gl);
this.ibo = index;
}
ready(gl:WebGL2RenderingContext,p : GLProgram){
const VertexLayouts = {
"position":{
count:3,
type:gl.FLOAT,
normalize:false,
stride:0,
offset:0
},
"normal":{
count:3,
type:gl.FLOAT,
normalize:false,
stride:0,
offset:0
},
"textureUV":{
count:2,
type:gl.FLOAT,
normalize:false,
stride:0,
offset:0
}
}
this.vao.bind(gl);
for(const [name,buf] of Object.entries(this.vertexes)){
const loc = p.getAttribLocation(gl,name);
assertBoolean(loc >= 0,"there is no",name,"attribute");
this.vao.addBuffer(gl,buf,loc,VertexLayouts[name]);
}
this.ibo.bind(gl);
this.vao.unbind(gl);
}
draw(gl:WebGL2RenderingContext){
this.vao.bind(gl);
gl.drawElements(gl.TRIANGLES,this.ibo.count,gl.UNSIGNED_SHORT,0);
this.vao.unbind(gl);
}
static async loadFromOBJ(gl:WebGL2RenderingContext,src:RequestInfo,init?:RequestInit){
const response = await fetch(src,init);
const text = await response.text();
const mesh = new OBJ.Mesh(text);
const position = createVertexBuffer(gl,mesh.vertices);
const normal = createVertexBuffer(gl,mesh.vertexNormals);
const texture = createVertexBuffer(gl,mesh.textures);
const index = createIndexBuffer(gl,mesh.indices);
return new Model(gl,{
position: position,
normal: normal,
textureUV: texture
}, index);
}
}

14
src/vertex.vert
View File

@ -1,6 +1,16 @@
#version 300 es
layout(location=0) in vec4 pos;
layout(location=0) in vec3 position;
layout(location=1) in vec2 textureUV;
layout(location=2) in vec3 normal;
uniform mat4 modelMat;
uniform mat4 viewMat;
uniform mat4 projectionMat;
out vec3 fragNormal;
void main() {
gl_Position = pos;
gl_Position = projectionMat * viewMat * modelMat * vec4(position,1);
fragNormal = mat3(transpose(inverse(modelMat))) * normal;
}