点的位置修改

docs/WebGL点的绘制.md

@@ -1,8 +1,9 @@
-# 设置背景色
+# 1 设置背景色
 
 ## 主要代码文件
-src/index.html
-src/webgl/hello.js
+
+>src/index.html
+>src/webgl/hello.js
 
 ## index.html
 引入canvas标签。
@@ -21,11 +22,13 @@ gl.clear(gl.COLOR_BUFFER_BIT);
 设置背景色
 清空canvas
 
-# 绘制点
+# 2 绘制点
 
-主要代码
-src/index.html
-src/webgl/point.js
+>主要代码
+
+>src/index.html
+
+>src/webgl/point.js
 
 ## point.js
 
@@ -68,6 +71,17 @@ gl.useProgram(program);
 使用创建的程序对象
 
 ~~~
- gl.drawArrays(gl.POINTS,0,1);
+gl.drawArrays(gl.POINTS,0,1);
 ~~~
-绘制一个点
+绘制一个点
+
+# 3 webgl函数封装
+
+主要代码
+> src/lib/webgl.js
+> src/webgl/point2.js
+
+# 4 点的位置和大小修改
+
+主要代码
+> src/webgl/point3.js

src/index.js

@@ -1,7 +1,16 @@
 import hello from "./webgl/hello";
 import point from "./webgl/point";
+import point2 from "./webgl/point2";
+import point3 from "./webgl/point3";
 
 // 清空canvas
 // hello();
 
-point();
+// 点的绘制
+// point();
+
+// 封装webgl
+// point2();
+
+// 点的位置修改
+point3();

src/lib/webgl.js

@@ -0,0 +1,82 @@
+function getContext(canvas,type='webgl',bgcolor=[0.0,0.0,0.0,1.0]){
+    let gl = canvas.getContext(type);
+    if (!gl) {
+        console.error("获取webgl失败");
+        return false;
+    }
+    // 设置背景色
+    gl.clearColor(...bgcolor);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+
+    return gl;
+}
+
+function setShader(gl,vsource,fsource){
+    let program = createProgram(gl,vsource,fsource);
+    if (!program) {
+        console.error("创建程序对象失败");
+        return false;
+    }
+
+    gl.useProgram(program);
+    // 保存program到gl
+    gl.program = program;
+
+    return true;
+}
+function createProgram(gl,vsource,fsource){
+    let vshader = loadShader(gl,gl.VERTEX_SHADER,vsource);
+    let fshader = loadShader(gl,gl.FRAGMENT_SHADER,fsource);
+
+    if (!vshader || !fshader) {
+        return false;
+    }
+
+    let program = gl.createProgram();
+    if (!program) {
+        console.error("创建Program对象失败");
+        return false;
+    }
+
+    gl.attachShader(program,vshader);
+    gl.attachShader(program,fshader);
+
+    gl.linkProgram(program);
+
+    let linked = gl.getProgramParameter(program,gl.LINK_STATUS);
+    if (!linked) {
+        let error = gl.getProgramInfoLog(program);
+        console.error("链接程序对象失败:"+error);
+        gl.deleteProgram(program);
+        gl.deleteShader(fshader);
+        gl.deleteShader(vshader);
+        return false;
+    }
+    return program;
+}
+function loadShader(gl,type,source){
+    let shader = gl.createShader(type);
+    if (shader == null) {
+        console.error("创建Shader对象失败");
+        return false;
+    }
+
+    gl.shaderSource(shader,source);
+    gl.compileShader(shader);
+
+    let compiled = gl.getShaderParameter(shader,gl.COMPILE_STATUS);
+    if (!compiled) {
+        let error = gl.getShaderInfoLog(shader);
+        console.error("编译着色器代码失败"+error);
+        gl.deleteShader(shader);
+        return false;
+    }
+    return shader;
+}
+
+
+
+export {
+    getContext,
+    setShader
+}

src/webgl/point2.js

@@ -0,0 +1,29 @@
+import {getContext,setShader} from './../lib/webgl';
+
+export default function(){
+    // 获取webgl
+    const canvas = document.getElementById('webgl');
+    const gl = getContext(canvas);
+
+
+
+    // 着色器代码
+    let v_shader_source = `
+        void main() {
+            gl_Position = vec4(0.0,0.0,0.0,1.0);
+            gl_PointSize = 10.0;
+        }
+    `;
+    let f_shader_source =`
+        void main() {
+            gl_FragColor = vec4(1.0,0.0,0.0,1.0);
+        }
+    `;
+
+    // 初始化gl
+    setShader(gl,v_shader_source,f_shader_source);
+
+
+    // 绘制点
+    gl.drawArrays(gl.POINTS,0,1);
+}

src/webgl/point3.js

@@ -0,0 +1,48 @@
+import {getContext,setShader} from './../lib/webgl';
+
+export default function(){
+    // 获取webgl
+    const canvas = document.getElementById('webgl');
+    const gl = getContext(canvas);
+
+
+
+    // 着色器代码
+    let v_shader_source = `
+        attribute vec4 a_Position;
+        attribute float a_PointSize;
+        void main() {
+            gl_Position = a_Position;
+            gl_PointSize = a_PointSize;
+        }
+    `;
+    let f_shader_source =`
+        void main() {
+            gl_FragColor = vec4(1.0,0.0,0.0,1.0);
+        }
+    `;
+
+    // 初始化gl
+    setShader(gl,v_shader_source,f_shader_source);
+
+    // 获取OpenGL ES点位置变量地址
+    let a_Position = gl.getAttribLocation(gl.program,'a_Position');
+    if (a_Position < 0) {
+        console.error("获取点位置信息失败");
+    }
+    let a_PointSize = gl.getAttribLocation(gl.program,'a_PointSize');
+    if (a_PointSize < 0) {
+        console.error("获取点位置信息失败");
+    }
+    // 设置点的位置    
+    // gl.vertexAttrib3f(a_Position,0.5,0.0,0.0);
+    // gl.vertexAttrib1f(a_Position,-0.5);
+    // gl.vertexAttrib2f(a_Position,0.5,0.0);
+    gl.vertexAttrib4f(a_Position,-0.5,0.0,0.0,1.0);
+
+    // 设置点的大小
+    gl.vertexAttrib1f(a_PointSize,20.0);
+
+    // 绘制点
+    gl.drawArrays(gl.POINTS,0,1);
+}

src/webgl/point4.js

@@ -0,0 +1,48 @@
+import {getContext,setShader} from './../lib/webgl';
+
+export default function(){
+    // 获取webgl
+    const canvas = document.getElementById('webgl');
+    const gl = getContext(canvas);
+
+
+
+    // 着色器代码
+    let v_shader_source = `
+        attribute vec4 a_Position;
+        attribute float a_PointSize;
+        void main() {
+            gl_Position = a_Position;
+            gl_PointSize = a_PointSize;
+        }
+    `;
+    let f_shader_source =`
+        void main() {
+            gl_FragColor = vec4(1.0,0.0,0.0,1.0);
+        }
+    `;
+
+    // 初始化gl
+    setShader(gl,v_shader_source,f_shader_source);
+
+    // 获取OpenGL ES点位置变量地址
+    let a_Position = gl.getAttribLocation(gl.program,'a_Position');
+    if (a_Position < 0) {
+        console.error("获取点位置信息失败");
+    }
+    let a_PointSize = gl.getAttribLocation(gl.program,'a_PointSize');
+    if (a_PointSize < 0) {
+        console.error("获取点位置信息失败");
+    }
+    // 设置点的位置    
+    // gl.vertexAttrib3f(a_Position,0.5,0.0,0.0);
+    // gl.vertexAttrib1f(a_Position,-0.5);
+    // gl.vertexAttrib2f(a_Position,0.5,0.0);
+    gl.vertexAttrib4f(a_Position,-0.5,0.0,0.0,1.0);
+
+    // 设置点的大小
+    gl.vertexAttrib1f(a_PointSize,20.0);
+
+    // 绘制点
+    gl.drawArrays(gl.POINTS,0,1);
+}