diff --git a/index.css b/index.css index 198cd1d..f5846cd 100644 --- a/index.css +++ b/index.css @@ -11,4 +11,28 @@ body{ top: 0; left: 0; position: fixed; +} + +#drawer-button{ + width: 30px; + height: 30px; + top: 5px; + right: 5px; + position: fixed; + background-color: rgb(0, 0, 0,0.5); + border-radius: 5px; + color: white; +} + +#drawer{ + position: fixed; + width: 350px; + height: calc(90vh - 70px); + top: 70px; + right: -380px; + transition: right 0.4s ease; + background-color: white; + box-shadow: black 5px 5px 10px 0px; + border-radius: 5px; + padding: 15px; } \ No newline at end of file diff --git a/index.html b/index.html index c9efe47..32d1649 100644 --- a/index.html +++ b/index.html @@ -5,9 +5,17 @@ - + +
+ + + +
+
+ +
\ No newline at end of file diff --git a/index.ts b/index.ts deleted file mode 100644 index 0505bac..0000000 --- a/index.ts +++ /dev/null @@ -1,95 +0,0 @@ -/// -import {createProgramFromSource, ProgramError, ShaderError} from "./src/gl_util"; - -/// -import vert_src from "./src/vertex"; -import frag_src from "./src/fragment"; - -function findCanvas(){ - const canvas = document.querySelector("canvas"); - if(canvas === null){ - console.error("couldn't find canvas"); - throw new Error("canvas is null"); - } - return canvas; -} - -function getGLContext(canvas : HTMLCanvasElement){ - const gl = canvas.getContext("webgl2") as any as WebGL2RenderingContextStrict|null; - if(gl === null){ - console.error("webgl2 is not supported!"); - throw new Error("webgl2 not supported"); - } - return gl; -} - -class Renderer{ - gl : WebGL2RenderingContextStrict; - constructor(gl: WebGL2RenderingContextStrict){ - this.gl = gl; - } - init(){ - const gl = this.gl; - let program: WebGLProgram; - try{ - program = createProgramFromSource(gl,vert_src,frag_src); - gl.useProgram(program); - } - catch(e){ - if(e instanceof ShaderError){ - console.log(e.message,"\n",e.info); - } - else if(e instanceof ProgramError){ - console.log(e.message,"\n",e.info); - } - else throw e; - } - const position = [ - -0.5,-0.5, - 0.5,-0.5, - 0.5,0.5, - -0.5,0.5 - ]; - const index = [ - 0,1,2, - 2,3,0 - ]; - const positionBuffer = gl.createBuffer(); - gl.bindBuffer(gl.ARRAY_BUFFER,positionBuffer); - gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(position),gl.STATIC_DRAW); - - const indexBuffer = gl.createBuffer(); - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,indexBuffer); - gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,new Uint16Array(index),gl.STATIC_DRAW); - - let location = gl.getUniformLocation(program, "u_color"); //u_color 변수 위치를 참조 - gl.uniform4f(location, 0.8, 0.3, 0.8, 1.0); //해당 위치에 0.2, 0.3, 0.8, 1.0 데이터를 전달 - - } - draw(){ - const gl = this.gl; - gl.viewport(0,0,gl.canvas.width,gl.canvas.height); - - gl.enableVertexAttribArray(0); - gl.vertexAttribPointer(0,2,gl.FLOAT,false,0,0); - - gl.drawElements(gl.TRIANGLES,6,gl.UNSIGNED_SHORT,0); - } -} - -function main(){ - const canvas = findCanvas(); - const gl = getGLContext(canvas); - const renderer = new Renderer(gl); - renderer.init() - window.addEventListener("resize",(e)=>{ - e.preventDefault(); - canvas.width = document.body.clientWidth; - canvas.height = document.body.clientHeight; - renderer.draw(); - }); - canvas.width = document.body.clientWidth; - canvas.height = document.body.clientHeight; - renderer.draw(); -} -main(); \ No newline at end of file diff --git a/index.tsx b/index.tsx new file mode 100644 index 0000000..3b427b7 --- /dev/null +++ b/index.tsx @@ -0,0 +1,60 @@ +import { Renderer } from './src/renderer'; + +import React from 'react'; +import ReactDOM from 'react-dom'; + +import { MenuBar } from "./src/menu"; + +function findCanvas(){ + const canvas = document.querySelector("canvas"); + if(canvas === null){ + console.error("couldn't find canvas"); + throw new Error("canvas is null"); + } + return canvas; +} + +function getGLContext(canvas : HTMLCanvasElement){ + const gl = canvas.getContext("webgl2") as any as WebGL2RenderingContext|null; + if(gl === null){ + console.error("webgl2 is not supported!"); + throw new Error("webgl2 not supported"); + } + return gl; +} + +function setupButton(){ + let toggle = false; + const button = document.querySelector("#drawer-button") as HTMLDivElement; + const drawer = document.querySelector("#drawer") as HTMLDivElement; + button.addEventListener("click",()=>{ + toggle = !toggle; + if(toggle){ + drawer.style.right = "0px"; + } + else{ + drawer.style.right = ""; + } + }); +} + +function main(){ + setupButton(); + const canvas = findCanvas(); + const gl = getGLContext(canvas); + const renderer = new Renderer(gl); + renderer.init(); + ReactDOM.render({renderer.settingUniform(u); renderer.draw();}} /> + ,document.getElementById("drawer")); + window.addEventListener("resize",(e)=>{ + e.preventDefault(); + canvas.width = document.body.clientWidth; + canvas.height = document.body.clientHeight; + renderer.draw(); + }); + canvas.width = document.body.clientWidth; + canvas.height = document.body.clientHeight; + renderer.draw(); +} +main(); \ No newline at end of file diff --git a/package.json b/package.json index 3458c62..5363cd5 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,13 @@ "author": "", "license": "ISC", "dependencies": { - "parcel-bundler": "^1.12.5" + "@emotion/react": "^11.4.1", + "@emotion/styled": "^11.3.0", + "@mui/material": "^5.0.1", + "@types/react": "^17.0.24", + "parcel-bundler": "^1.12.5", + "react": "^17.0.2", + "react-dom": "^17.0.2" }, "devDependencies": { "glslify-bundle": "^5.1.1", diff --git a/src/gl_util.ts b/src/gl_util.ts index cbdc19b..c6f2c5c 100644 --- a/src/gl_util.ts +++ b/src/gl_util.ts @@ -1,6 +1,3 @@ -import GL = WebGLRenderingContextStrict; -import GL2 = WebGL2RenderingContextStrict; - export class ShaderError extends Error{ constructor( readonly info:string @@ -20,7 +17,7 @@ export class ProgramError extends Error{ /*** * compile shader */ -export function compileShader(gl:GL2, source:string, type: GL.ShaderType): WebGLShader{ +export function compileShader(gl:WebGL2RenderingContext, source:string, type: GLenum): WebGLShader{ const shader = gl.createShader(type); gl.shaderSource(shader,source); gl.compileShader(shader); @@ -32,7 +29,7 @@ export function compileShader(gl:GL2, source:string, type: GL.ShaderType): WebGL return shader; } -export function createProgram(gl:GL2, vertex:WebGLShader,frag:WebGLShader){ +export function createProgram(gl:WebGL2RenderingContext, vertex:WebGLShader,frag:WebGLShader){ const program = gl.createProgram(); gl.attachShader(program,vertex); gl.attachShader(program,frag); @@ -46,7 +43,7 @@ export function createProgram(gl:GL2, vertex:WebGLShader,frag:WebGLShader){ } return program; } -export function createProgramFromSource(gl:GL2, vert:string,frag:string){ +export function createProgramFromSource(gl:WebGL2RenderingContext, 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); diff --git a/src/menu.tsx b/src/menu.tsx new file mode 100644 index 0000000..51ad7d2 --- /dev/null +++ b/src/menu.tsx @@ -0,0 +1,19 @@ +import * as React from 'react'; +import Slider from "@mui/material/Slider"; +import Typograpy from "@mui/material/Typography"; +import {UniformSet} from "./uniform"; + +export function MenuBar(prop:{u:UniformSet,onUniformChange:(u:UniformSet)=>void}){ + const [uniform,setUniform] = React.useState(prop.u); + const onRedChange = (_,v)=>{ + setUniform({...uniform,redcolor:v/100}); + }; + React.useEffect(()=>{ + prop.onUniformChange(uniform); + }) + const a = uniform.redcolor*100; + return (
+ Uniform + +
); +} \ No newline at end of file diff --git a/src/renderer.ts b/src/renderer.ts new file mode 100644 index 0000000..45bc38b --- /dev/null +++ b/src/renderer.ts @@ -0,0 +1,74 @@ +import {createProgramFromSource, ProgramError, ShaderError} from "./gl_util"; + +/// +import vert_src from "./vertex.vert"; +import frag_src from "./fragment.frag"; + +import { getUniformDefaultValue, UniformSet } from "./uniform"; + +export class Renderer{ + gl : WebGL2RenderingContext; + uniforms : UniformSet; + program: WebGLProgram; + positionBuffer: WebGLBuffer; + indexBuffer: WebGLBuffer; + constructor(gl: WebGL2RenderingContext){ + this.gl = gl; + this.uniforms = getUniformDefaultValue(); + try{ + this.program = createProgramFromSource(gl,vert_src,frag_src); + gl.useProgram(this.program); + } + catch(e){ + if(e instanceof ShaderError){ + console.log(e.message,"\n",e.info); + } + else if(e instanceof ProgramError){ + console.log(e.message,"\n",e.info); + } + else throw e; + } + } + init(){ + const gl = this.gl; + const position = [ + -0.5,-0.5, + 0.5,-0.5, + 0.5,0.5, + -0.5,0.5 + ]; + const index = [ + 0,1,2, + 2,3,0 + ]; + this.positionBuffer = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER,this.positionBuffer); + gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(position),gl.STATIC_DRAW); + + this.indexBuffer = gl.createBuffer(); + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,this.indexBuffer); + gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,new Uint16Array(index),gl.STATIC_DRAW); + this.settingUniform(this.uniforms); + } + useProgram(){ + this.gl.useProgram(this.program); + } + settingUniform(u:UniformSet){ + const gl = this.gl; + this.uniforms = u; + const location = gl.getUniformLocation(this.program, "u_color"); //u_color 변수 위치를 참조 + gl.uniform4f(location, this.uniforms.redcolor, 0.3, 0.8, 1.0); //해당 위치에 0.2, 0.3, 0.8, 1.0 데이터를 전달 + } + draw(){ + const gl = this.gl; + gl.clearColor(0,0,0,0); + gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT); + + gl.viewport(0,0,gl.canvas.width,gl.canvas.height); + + gl.enableVertexAttribArray(0); + gl.vertexAttribPointer(0,2,gl.FLOAT,false,0,0); + + gl.drawElements(gl.TRIANGLES,6,gl.UNSIGNED_SHORT,0); + } +} \ No newline at end of file diff --git a/src/uniform.ts b/src/uniform.ts new file mode 100644 index 0000000..ad65653 --- /dev/null +++ b/src/uniform.ts @@ -0,0 +1,9 @@ +export type UniformSet = { + redcolor:number +}; + +export function getUniformDefaultValue():UniformSet{ + return { + redcolor:0.5, + } +} \ No newline at end of file