webgl added

2024-08-31 22:39:25 +09:00
parent c6bb80ee5c
commit efbcdea403
5 changed files with 1291 additions and 2 deletions
--- a/Cargo.lock
+++ b/Cargo.lock
--- a/Cargo.toml
+++ b/Cargo.toml
@ -5,3 +5,4 @@ edition = "2021"

 [dependencies]
 osmpbf = "0.3.4"
+yew = { git = "https://github.com/yewstack/yew/", features = ["csr"] }
--- a/index.html
+++ b/index.html
@ -0,0 +1,17 @@
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>WebGL Demo</title>
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"
+      integrity="sha512-zhHQR0/H5SEBL3Wn6yYSaTTZej12z0hVZKOv3TwCUXT1z5qeqGcXJLLrbERYRScEDDpYIJhPC1fk31gqR783iQ=="
+      crossorigin="anonymous"
+      defer></script>
+    <script src="webgl-demo.js" type="module"></script>
+  </head>
+  <body>
+    <canvas id="glcanvas" width="640" height="480"></canvas>
+  </body>
+</html>
--- a/src/main.rs
+++ b/src/main.rs
@ -1,4 +1,104 @@
+/*use std::fmt::write;
+
 use osmpbf::*;
+*/
+
+use yew::prelude::*;
+
+#[function_component]
+fn App() -> Html {
+    let counter = use_state(|| 0);
+    let onclick = {
+        let counter = counter.clone();
+        move |_| {
+            let value = *counter + 1;
+            counter.set(value);
+        }
+    };
+
+    html! {
+        <div>
+            <button {onclick}>{ "+1" }</button>
+            <p>{ *counter }</p>
+        </div>
+    }
+}
+
+fn main() {
+    yew::Render::<App>::new().render();
+}
+
+/*
+const fn compileLinkProgram(vs: *const u8, vs_len: usize, fs: *const u8, fs_len: usize) -> i32 {
+    let test_val: i32 = 1;
+    test_val
+}
+
+const fn bind2DFloat32Data(data: *const f32, data_len: usize) -> i32 {
+    let test_val: i32 = 1;
+    test_val
+}
+
+pub fn glBindVertexArray(vao: i32) {
+    println!("glBindVertexArray");
+}
+
+pub fn glClearColor(r: f32, g: f32, b: f32, a:f32) {
+    println!("Clear Color");
+}
+
+pub fn glClear(mask: i32) {
+    println!("Clear");
+}
+
+pub fn glUseProgram(program: i32) {
+    println!("Using Program");
+}
+
+pub fn glDrawArrays(mode: i32, first: i32, last:i32) {
+    println!("Draw Arrays");
+}
+
+
+const COLOR_BUFFER_BIT: i32 = 16384;
+const TRIANGLE_STRIP: i32 = 5;
+
+
+
+pub fn run() {
+    const VS_SOURCE: &str = "attribute vec4 aVertexPosition; \
+      void main() { \
+        gl_Position = aVertexPosition; \
+      } \
+    ;";
+    const FS_SOURCE: &str = "void main() { \
+        gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); \
+      } \
+    ";
+    const POSITIONS: [f32; 8] = [0.5, 0.5, -0.5, 0.5, 0.5, -0.5, -0.5, -0.5];
+    const PROGRAM: i32 = compileLinkProgram(VS_SOURCE.as_ptr(), VS_SOURCE.len(), FS_SOURCE.as_ptr(), FS_SOURCE.len());
+    const VAO: i32 = bind2DFloat32Data(POSITIONS.as_ptr(), POSITIONS.len());
+    glBindVertexArray(VAO);
+    // Set clear color to black, fully opaqe
+    glClearColor(0.0, 0.0, 0.0, 1.0);
+    // Clear the color buffer with specified clear color
+    glClear(COLOR_BUFFER_BIT);
+    glUseProgram(PROGRAM);
+    {
+        const offset = 0;
+        cconst fn bind2DFloat32Data(data: *const f32, data_len: usize) -> i32 {
+    let test_val: i32 = 1;
+    test_val
+}
+
+    const POSITIONS: [f32; 8] = [0.5, 0.5, -0.5, 0.5, 0.5, -0.5, -0.5, -0.5];
+    const PROGRAM: i32 = compileLinkProgram(VS_SOURCE.as_ptr(), VS_SOURCE.len(), FS_SOURCE.as_ptr(), FS_SOURCE.len());
+    const VAO: i32 = bind2DFloat32Data(POSITIONS, POSITIONS.len());onst vertexCount = 4;
+        gl.drawArrays(gl.TRIANGLE_STRIP, offset, vertexCount);
+    }
+
+
+}

 fn main() {
    let reader = ElementReader::from_path(
@ -27,3 +127,4 @@ fn main() {
        }
    }
 }
+*/
--- a/webgl-demo.js
+++ b/webgl-demo.js
@ -0,0 +1,126 @@
+//
+// start here
+//
+//
+//
+var gl = null;
+function loadShader(gl, type, source) {
+  const shader = gl.createShader(type);
+
+  // Send the source to the shader object
+
+  gl.shaderSource(shader, source);
+
+  // Compile the shader program
+
+  gl.compileShader(shader);
+
+  // See if it compiled successfully
+
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    alert(
+      `An error occurred compiling the shaders: ${gl.getShaderInfoLog(shader)}`,
+    );
+    gl.deleteShader(shader);
+    return null;
+  }
+
+  return shader;
+}
+
+function compileLinkProgram(vertex_source, fragment_source) {
+  const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vertex_source);
+  const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fragment_source);
+
+  // Create the shader program
+
+  const shaderProgram = gl.createProgram();
+  gl.attachShader(shaderProgram, vertexShader);
+  gl.attachShader(shaderProgram, fragmentShader);
+  gl.linkProgram(shaderProgram);
+
+  // If creating the shader program failed, alert
+
+  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
+    alert(
+      `Unable to initialize the shader program: ${gl.getProgramInfoLog(
+        shaderProgram,
+      )}`,
+    );
+    return null;
+  }
+  return shaderProgram;
+}
+
+function bind2DFloat32Data(positions) {
+  const positionBuffer = gl.createBuffer();
+
+  // Select the positionBuffer as the one to apply buffer
+  // operations to from here out.
+  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+
+  // Now create an array of positions for the square.
+  // Now pass the list of positions into WebGL to build the
+  // shape. We do this by creating a Float32Array from the
+  // JavaScript array, then use it to fill the current buffer.
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
+  const vao = gl.createVertexArray();
+  gl.bindVertexArray(vao);
+  const vertex_attrib = 0;
+  const numComponents = 2;
+  const type = gl.FLOAT; // the data in the buffer is 32bit floats
+  const normalize = false; // don't normalize
+  const stride = 0; // how many bytes to get from one set of values to the next
+  // 0 = use type and numComponents above
+  const offset = 0; // how many bytes inside the buffer to start from
+  gl.vertexAttribPointer(
+    vertex_attrib,
+    numComponents,
+    type,
+    normalize,
+    stride,
+    offset,
+  );
+
+  gl.enableVertexAttribArray(vertex_attrib);
+  return vao;
+}
+
+function main() {
+  const canvas = document.querySelector("#glcanvas");
+  // Initialize the GL context
+  gl = canvas.getContext("webgl");
+
+  // Only continue if WebGL is available and working
+  if (gl === null) {
+    alert(
+      "Unable to initialize WebGL. Your browser or machine may not support it.",
+    );
+    return;
+  }
+  const vsSource = `
+      attribute vec4 aVertexPosition;
+      void main() {
+        gl_Position = aVertexPosition;
+      }
+    `;
+  const fsSource = `
+      void main() {
+        gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
+      }
+    `;
+  const shaderProgram = compileLinkProgram(vsSource, fsSource);
+  const positions = [0.5, 0.5, -0.5, 0.5, 0.5, -0.5, -0.5, -0.5];
+
+  // Set clear color to black, fully opaqe
+  gl.clearColor(0.0, 0.0, 0.0, 1.0);
+  // Clear the color buffer with specified clear color
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  gl.useProgram(shaderProgram);
+  {
+    const offset = 0;
+    const vertexCount = 4;
+    gl.drawArrays(gl.TRIANGLE_STRIP, offset, vertexCount);
+  }
+}
+window.load = main();