dongho/rust-map
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

webgl added

Browse Source
This commit is contained in:
dongho
2024-08-31 22:39:25 +09:00
parent c6bb80ee5c
commit efbcdea403
5 changed files with 1291 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1048
Cargo.lock generated
View File

File diff suppressed because it is too large Load Diff

1
Cargo.toml
View File

@ -5,3 +5,4 @@ edition = "2021"
[dependencies] [dependencies]
osmpbf = "0.3.4" osmpbf = "0.3.4"
yew = { git = "https://github.com/yewstack/yew/", features = ["csr"] }

17
index.html Normal file
View File

@ -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>

101
src/main.rs
View File

@ -1,4 +1,104 @@
/*use std::fmt::write;
use osmpbf::*; 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() { fn main() {
let reader = ElementReader::from_path( let reader = ElementReader::from_path(
@ -27,3 +127,4 @@ fn main() {
} }
} }
} }
*/

126
webgl-demo.js Normal file
View File

@ -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();