PC\u6d4f\u89c8\u5668\u8bf7\u4f7f\u7528\u6700\u65b0\u7248\u672cchrome\u6216\u8005firefox\u3002<\/p>\n
\u79fb\u52a8\u7aef\u6d4f\u89c8\u5668\u8bf7\u4f7f\u7528\u6700\u65b0\u7cfb\u7edf\u6216\u5b89\u88c5\u79fb\u52a8\u7248chrome\u6216firefox\u3002<\/p>\n
Dart\u7248\u672c\u8bf7\u67e5\u9605\u6e38\u6838 Dart\u7248\u672c<\/a>\uff08\u4ec0\u4e48\u65f6\u5019\u60f3\u8d77\u6765\u5c31\u6709\u53ef\u80fd\u66f4\u65b0\uff09\uff1b<\/p>\n \u9996\u5148\uff0c\u9700\u8981\u521d\u59cb\u5316WebGL\u5e76\u8bbe\u7f6e\u57fa\u672c\u7684\u5faa\u73af\u6e32\u67d3\uff0c\u7136\u540e\u7ed8\u5236\uff1a<\/p>\n \u7531\u4e8e\u4f7f\u7528\u7684\u662freact\uff0c\u76f4\u63a5\u4f7f\u7528\u811a\u624b\u67b6\u7684\u521d\u59cb\u5bb9\u5668App\uff0c\u5982\u679c\u662fangular\u6216\u8005vue\uff0c\u9700\u8981\u589e\u52a0\u5176\u4ed6\u517c\u5bb9\u5373\u53ef\u3002\u5f53\u7136\u4e5f\u53ef\u4ee5\u4e0d\u9002\u7528\u811a\u624b\u67b6\uff0c\u76f4\u63a5\u4f7f\u7528namespace\u3002<\/p>\n \u81f3\u4e8ecss\u6837\u5f0f\uff0c\u8fd9\u91cc\u4f7f\u7528\u7684\u662fsass\u7684scss\uff0c\u6839\u636e\u81ea\u5df1\u7684\u4f7f\u7528\u60c5\u51b5\u81ea\u5b9a\u3002<\/p>\n \u7136\u540e\u5728\u4e3b\u7c7b\u4e2d\u4f7f\u7528\uff1a<\/p>\n \u8fd9\u4e2a\u65f6\u5019\u5f97\u5230\u9ed1\u9ed1\u7684\u573a\u666f\uff1a<\/p>\n \u7136\u540e\uff0c\u5c01\u88c5WebGL\u7740\u8272\u5668\uff1a<\/p>\n \u63a5\u7740\uff0c\u5c01\u88c5\u7f13\u51b2\u533a\uff1a<\/p>\n \u7136\u540e\uff0c\u6d4b\u8bd5\u529f\u80fd\uff1a<\/p>\n \u5c31\u80fd\u770b\u5230\u4e0b\u9762\u7684\u573a\u666f\u4e86\uff1a<\/p>\n code enjoy! 🧐🧐🧐<\/p>\n \u4f5c\u8005\uff1aindeex<\/p>\n \u94fe\u63a5\uff1ahttps:\/\/indeex.cc<\/a><\/p>\n \u8457\u4f5c\u6743\u5f52\u4f5c\u8005\u6240\u6709\u3002\u5546\u4e1a\u8f6c\u8f7d\u8bf7\u8054\u7cfb\u4f5c\u8005\u83b7\u5f97\u6388\u6743\uff0c\u975e\u5546\u4e1a\u8f6c\u8f7d\u8bf7\u6ce8\u660e\u51fa\u5904\u3002<\/p>\n \u6e38\u620f\u5185\u6838\u662f\u6e38\u620f\u5f00\u53d1\u7684\u6838\u5fc3\uff0c\u662f\u5bf9\u6e38\u620f\u5f00\u53d1\u6548\u7387\u63d0\u5347\u7684\u5173\u952e\uff0c\u8fd9\u91cc\u5199\u4e00\u4e2a\u7b80\u5355\u7684\u6e38\u6838\u3002 \u524d\u7f6e \u6837\u4f8b\u4f7f\u7528ReacRead More<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[4],"_links":{"self":[{"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/posts\/167"}],"collection":[{"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/comments?post=167"}],"version-history":[{"count":1,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/posts\/167\/revisions"}],"predecessor-version":[{"id":168,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/posts\/167\/revisions\/168"}],"wp:attachment":[{"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/media?parent=167"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/categories?post=167"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/tags?post=167"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\u521d\u59cb\u5316<\/h3>\n
export let gl: any;\n\nexport class WEBGLUtils{\n public static initialize(id?:string): HTMLCanvasElement{\n let canvas: HTMLCanvasElement;\n\n if(id){\n canvas = document.getElementById(id) as HTMLCanvasElement;\n if(!canvas){\n throw new Error(\"Not find element:\" + id);\n }\n }else{\n canvas = document.createElement(\"canvas\") as HTMLCanvasElement;\n let reactApp: HTMLElement = document.getElementsByClassName(\"App\")[0] as HTMLElement;\n if(reactApp){\n reactApp.appendChild(canvas);\n }else{\n document.body.appendChild(canvas);\n }\n }\n\n gl = canvas.getContext(\"webgl\");\n if(!gl){\n throw new Error(\"Not initialize WEBGL!\");\n }\n return canvas;\n }\n}\n<\/code><\/pre>\n\u5b9e\u4f8b\u5316<\/h3>\n
import {gl, WEBGLUtils} from '.\/utils\/WebGL';\n\nexport default class Core{\n private _canvas!: HTMLCanvasElement;\n\n public start(): void {\n this._canvas = WEBGLUtils.initialize();\n gl.clearColor(0, 0, 0, 1);\n\n this.resize();\n\n this.loop();\n }\n\n public resize():void {\n if(this._canvas){\n this._canvas.width = window.innerWidth;\n this._canvas.height = window.innerHeight;\n }\n }\n }\n\n private loop():void {\n gl.clear(gl.COLOR_BUFFER_BIT);\n\n requestAnimationFrame(this.loop.bind(this));\n }\n}\n<\/code><\/pre>\n![\"\u6e38\u620f\u5185\u6838\u57fa\u7840\"](\"https:\/\/hungking.cc\/assets\/imgs\/indeex.cc\/TGC1.png\")
<\/p>\n\u7740\u8272\u5668<\/h3>\n
import {gl} from '.\/..\/utils\/WebGL';\nexport default class Shader{\n private _name: string;\n private _program?: WebGLProgram;\n private _attributes: {\n [name: string]: number\n } = {};\n\n public constructor(name: string, vertexSource: string, fragmentSource: string){\n this._name = name;\n\n let vertexShader = this.loadShader(vertexSource, gl.VERTEX_SHADER);\n let fragmentShader = this.loadShader(fragmentSource, gl.FRAGMENT_SHADER);\n\n this.createProgram(vertexShader, fragmentShader);\n\n this.detectAttributes();\n }\n\n public get name(): string{\n return this._name;\n }\n\n public use(): void{\n gl.useProgram(this._program);\n }\n\n public getAttributeLocation(name: string): number {\n if(this._attributes[name] === undefined){\n throw new Error(\"Not find attribute \" + name + \"in shader named \" + this._name);\n }\n\n return this._attributes[name];\n }\n\n private loadShader(source: string, shaderType: number): WebGLShader{\n let shader: WebGLShader = gl.createShader(shaderType);\n\n gl.shaderSource(shader, source);\n gl.compileShader(shader);\n\n let err = gl.getShaderInfoLog(shader);\n if(err){\n throw new Error(\"Error compile \" + this._name + \":\" + err);\n }\n return shader;\n }\n\n private createProgram(vertexShader: WebGLShader, fragmengShader: WebGLShader): void{\n this._program = gl.createProgram();\n\n gl.attachShader(this._program, vertexShader);\n gl.attachShader(this._program, fragmengShader);\n\n gl.linkProgram(this._program);\n\n let err = gl.getProgramInfoLog(this._program);\n if(err){\n throw new Error(\"Error compile \" + this._name + \":\" + err);\n }\n }\n\n private detectAttributes(): void{\n let attributeCount = gl.getProgramParameter(this._program, gl.ACTIVE_ATTRIBUTES);\n for(let i =0; i< attributeCount; i++){\n let attributeInfo: WebGLActiveInfo = gl.getActiveAttrib(this._program, i);\n if(!attributeInfo){\n break;\n }\n\n this._attributes[attributeInfo.name] = gl.getAttribLocation(this._program, attributeInfo.name);\n }\n }\n}\n<\/code><\/pre>\n\u7f13\u51b2\u533a<\/h3>\n
import { gl } from \"..\/utils\/WebGL\";\n\nexport class AttributeInfo{\n public location!: number;\n\n public size!: number;\n\n public offset!: number;\n}\n\nexport default class GLBuffer{\n private _hasAttributeLocation: boolean = false;\n private _elementSize!: number;\n private _stride?: number;\n private _buffer?: WebGLBuffer;\n\n private _targetBufferType?: number;\n private _dataType?: number;\n private _mode?: number;\n private _typeSize!: number;\n\n private _data: number[] = [];\n private _attributes: AttributeInfo[] = [];\n\n \/**\n * \n * @param elementSize \u6bcf\u4e2abuffer\u5143\u7d20\u5927\u5c0f\n * @param dataType buffer\u6570\u636e \u9ed8\u8ba4gl.FLOAT\n * @param targetBufferType bufferTarget\u7c7b\u578b\n * @param mode buffer mode \u9ed8\u8ba4 gl.TRIANGLES\n *\/\n public constructor(elementSize: number, dataType: number = gl.FLOAT, targetBufferType: number = gl.ARRAY_BUFFER, mode: number = gl.TRIANGLES) {\n this._elementSize = elementSize;\n this._dataType = dataType;\n this._targetBufferType = targetBufferType;\n this._mode = mode;\n\n switch(this._dataType){\n case gl.FLOAT:\n case gl.INT:\n case gl.UNSIGNED_INT:\n this._typeSize = 4;\n break;\n case gl.SHORT:\n case gl.UNSIGNED_SHORT:\n this._typeSize = 2;\n break;\n case gl.BYTE:\n case gl.UNSIGNED_BYTE:\n this._typeSize = 1;\n break;\n default:\n throw new Error(\"Unrecognized data type: \" + dataType.toString());\n }\n\n this._stride = this._elementSize = this._typeSize;\n this._buffer = gl.createBuffer();\n }\n\n public destroy(): void{\n gl.deleteBuffer(this._buffer);\n }\n\n public bind(normalized: boolean = false): void{\n gl.bindBuffer(this._targetBufferType, this._buffer);\n if(this._hasAttributeLocation){\n for(let it of this._attributes){\n gl.vertexAttribPointer(it.location, it.size, this._dataType, normalized, this._stride, it.offset * this._typeSize);\n gl.enableVertexAttribArray(it.location);\n }\n }\n }\n\n public unbind(): void{\n for(let it of this._attributes){\n gl.disableVertexAttribArray(it.location);\n }\n gl.bindBuffer(gl.ARRAY_BUFFER, this._buffer);\n }\n\n public addAttributeLocation(info: AttributeInfo): void{\n this._hasAttributeLocation = true;\n this._attributes.push(info);\n }\n\n public pushBackData(data: number[]): void{\n for(let d of data){\n this._data.push(d);\n }\n }\n\n public upload(): void{\n gl.bindBuffer(this._targetBufferType, this._buffer);\n\n let bufferData!: ArrayBuffer;\n switch(this._dataType){\n case gl.FLOAT:\n bufferData = new Float32Array(this._data);\n break;\n case gl.INT:\n bufferData = new Int32Array(this._data);\n break;\n case gl.UNSIGNED_INT:\n bufferData = new Uint32Array(this._data);\n break;\n case gl.SHORT:\n bufferData = new Int16Array(this._data);\n break;\n case gl.UNSIGNED_SHORT:\n bufferData = new Uint16Array(this._data);\n break;\n case gl.BYTE:\n bufferData = new Int8Array(this._data);\n break;\n case gl.UNSIGNED_BYTE:\n bufferData = new Uint8Array(this._data);\n break;\n }\n\n gl.bufferData(this._targetBufferType, bufferData, gl.STATIC_DRAW);\n }\n\n public draw(): void{\n if(this._targetBufferType === gl.ARRAY_BUFFER){\n gl.drawArrays(this._mode, 0, this._data.length \/ this._elementSize);\n }else if(this._targetBufferType === gl.ELEMENT_ARRAY_BUFFER){\n gl.drawElements(this._mode, this._data.length, this._dataType, 0);\n }\n }\n}\n<\/code><\/pre>\n\/\/...\nimport Shader from '.\/shader\/Shader';\nimport GLBuffer, { AttributeInfo } from '.\/buffer\/GLBuffer';\n\nexport default class Core{\n \/\/...\n private _shader!: Shader;\n private _buffer!: GLBuffer;\n\n public start(): void {\n \/\/...\n\n this.loadShaders();\n this._shader.use();\n this.createBuffer();\n\n this.resize();\n\n this.loop();\n }\n\n public resize():void {\n if(this._canvas){\n \/\/...\n gl.viewport(0, 0, this._canvas.width, this._canvas.height);\n }\n }\n\n public loadShaders(): void{\n let vertexShaderSource = `\n attribute vec3 a_position;\n\n void main(){\n gl_Position = vec4(a_position, 1.0);\n }\n `;\n\n let fragmentShaderSource = `\n precision mediump float;\n\n uniform vec4 u_color;\n\n void main(){\n gl_FragColor = u_color;\n }\n `;\n\n this._shader = new Shader(\"basic\", vertexShaderSource, fragmentShaderSource);\n }\n\n private createBuffer(): void{\n this._buffer = new GLBuffer(3);\n\n let positionAttribute = new AttributeInfo();\n positionAttribute.location = this._shader.getAttributeLocation(\"a_position\");\n positionAttribute.offset = 0;\n positionAttribute.size = 3;\n this._buffer.addAttributeLocation(positionAttribute);\n\n let vertices = [\/\/x, y, z\n 0, 0, 0,\n 0, 0.5, 0,\n 0.5, 0.5, 0\n ];\n\n this._buffer.pushBackData(vertices);\n this._buffer.upload();\n this._buffer.unbind();\n }\n\n private loop():void {\n gl.clear(gl.COLOR_BUFFER_BIT);\n\n let colorPosition = this._shader.getUniformLocation(\"u_color\");\n gl.uniform4f(colorPosition, 1, 0.5, 0, 1);\n\n this._buffer.bind();\n this._buffer.draw();\n\n let positionLocation = this._shader.getAttributeLocation(\"a_position\");\n\n gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0);\n gl.enableVertexAttribArray(positionLocation);\n\n gl.drawArrays(gl.TRIANGLES, 0, 3);\n\n requestAnimationFrame(this.loop.bind(this));\n }\n}\n<\/code><\/pre>\n![\"\u6e38\u620f\u5185\u6838\u57fa\u7840\"](\"https:\/\/hungking.cc\/assets\/imgs\/indeex.cc\/TGC2.png\")
<\/p>\n\n
\n","protected":false},"excerpt":{"rendered":"