<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <canvas id="canvas" width="400" height="400"></canvas> </body> <script> /** @type {HTMLCanvasElement} */ const ctx = document.getElementById('canvas'); const gl = ctx.getContext("webgl") const VERTEX_SHADER_SOURCE = ` void main(){ gl_Position=vec4(0.0,0.0,0.0,1.0); gl_PointSize=50.0; } `; const FGRAGMENT_SHARDER_SOURCE = ` void main(){ gl_FragColor=vec4(1.0,0.0,0.0,1.0); } `; //创建着色器 const vertexShader = gl.createShader(gl.VERTEX_SHADER); const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); //指定着色器代码 gl.shaderSource(vertexShader, VERTEX_SHADER_SOURCE) gl.shaderSource(fragmentShader, FGRAGMENT_SHARDER_SOURCE) //编译着色器 gl.compileShader(vertexShader); gl.compileShader(fragmentShader); //创建程序对象 const program = gl.createProgram(); gl.attachShader(program, vertexShader) gl.attachShader(program, fragmentShader) //将js与webgl进行关联 gl.linkProgram(program); //使用程序对象 gl.useProgram(program) //执行绘制 gl.POINTS类型,0代表从那个开始,1代表几个顶点 gl.drawArrays(gl.POINTS, 0, 1) </script> </html>
正文
webgl入门(一)
文章版权声明:除非注明,否则均为
譬如朝露博客原创文章,转载或复制请以超链接形式并注明出处。
发表评论
侧栏公告
寄语
譬如朝露博客是一个分享前端知识的网站,联系方式11523518。
热评文章
标签列表
热门文章
友情链接