WebGL Point Sprites

Developer
Aitor
Size
4,816 Kb
Views
40,480
  1. WebGL Point Sprites Previews
  2. WebGL Point Sprites HTML Codes
  3. WebGL Point Sprites CSS Codes
  4. WebGL Point Sprites JS Codes

How do I make an webgl point sprites?

WebGL randomly generated starfield. What is a webgl point sprites? How do you make a webgl point sprites? This script and codes were developed by Aitor on 16 September 2022, Friday.

WebGL Point Sprites Previews
IQ Test

WebGL Point Sprites - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>WebGL Point Sprites</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<canvas width="640" height="480"></canvas> <script src='https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.3.1/gl-matrix-min.js'></script> <script src="js/index.js"></script>
</body>
</html>

WebGL Point Sprites - Script Codes CSS Codes

html,
body { background: #000; color: #fff; margin: 0; padding: 0; overflow: hidden;
}

WebGL Point Sprites - Script Codes JS Codes

"use strict";
var canvas = document.querySelector("canvas"), gl = canvas.getContext("webgl", { antialias: false, alpha: false, premultipliedAlpha: false
});
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, "\nprecision mediump float;\n\nuniform mat4 mvp;\n\nattribute vec3 position;\n\nvoid main(void) {\n\n vec4 finalPosition = mvp * vec4(position, 1.0);\n\n gl_Position = finalPosition;\n\n if (gl_Position.w > 0.0) {\n gl_PointSize = 4.0 / gl_Position.w;\n } else {\n gl_PointSize = 0.0;\n }\n\n}");
gl.compileShader(vertexShader);
if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) { console.error(gl.getShaderInfoLog(vertexShader));
}
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, "\nprecision highp float;\n\nconst vec4 begin = vec4(0.1, 0.75, 1.0, 1.0);\nconst vec4 end = vec4(1.0, 1.0, 1.0, 1.0);\n\nvec4 interpolate4f(vec4 a,vec4 b, float p) {\n return a + (b - a) * p;\n}\n\nvoid main(void) {\n\n vec2 pc = (gl_PointCoord - 0.5) * 2.0;\n\n float dist = (1.0 - sqrt(pc.x * pc.x + pc.y * pc.y));\n vec4 color = interpolate4f(begin, end, dist);\n\n gl_FragColor = vec4(dist, dist, dist, dist) * color;\n\n}");
gl.compileShader(fragmentShader);
if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) { console.error(gl.getShaderInfoLog(fragmentShader));
}
var program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
var attributes = { position: gl.getAttribLocation(program, "position")
}, uniforms = { mvp: gl.getUniformLocation(program, "mvp")
};
var NUM_POINTS = 100000;
var points = [];
for (var index = 0; index < NUM_POINTS; index++) { points.push((Math.random() - 0.5) * 8); points.push((Math.random() - 0.5) * 8); points.push((Math.random() - 0.5) * 8);
}
var buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(points), gl.STATIC_DRAW);
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE);
var pMatrix = mat4.create(), vMatrix = mat4.create(), ivMatrix = mat4.create(), mMatrix = mat4.create(), mvMatrix = mat4.create(), mvpMatrix = mat4.create(), position = vec3.create();
mat4.perspective(pMatrix, Math.PI * 0.35, canvas.width / canvas.height, 0.01, 100000.0);
vec3.set(position, 0.0, 0.0, 0.0);
var angle = 0.0;
function render(now) { angle += 0.0005; gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.clear(gl.COLOR_BUFFER_BIT); gl.viewport(0, 0, canvas.width, canvas.height); // P * V * M //mat4.translate(mvpMatrix, mvpMatrix, position); mat4.identity(mMatrix); position[2] = Math.sin(now / 50000); mat4.identity(vMatrix); mat4.translate(vMatrix, vMatrix, position); mat4.rotateX(vMatrix, vMatrix, angle); mat4.rotateY(vMatrix, vMatrix, angle); mat4.rotateZ(vMatrix, vMatrix, angle); mat4.invert(ivMatrix, vMatrix); mat4.multiply(mvMatrix, ivMatrix, mMatrix); mat4.multiply(mvpMatrix, pMatrix, mvMatrix); gl.useProgram(program); gl.enableVertexAttribArray(attributes.position); gl.uniformMatrix4fv(uniforms.mvp, false, mvpMatrix); gl.vertexAttribPointer(0, 3, gl.FLOAT, gl.FALSE, 3 * 4, 0); gl.drawArrays(gl.POINTS, 0, NUM_POINTS); //console.count("render"); window.requestAnimationFrame(render);
}
render();
function resize() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; mat4.perspective(pMatrix, Math.PI * 0.35, canvas.width / canvas.height, 0.01, 1000.0);
}
resize();
window.addEventListener("resize", resize);
WebGL Point Sprites - Script Codes
WebGL Point Sprites - Script Codes
Home Page Home
Developer Aitor
Username AzazelN28
Uploaded September 16, 2022
Rating 4.5
Size 4,816 Kb
Views 40,480
Do you need developer help for WebGL Point Sprites?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Aitor (AzazelN28) Script Codes
Name
Blending Experiment 29
AudioContext Concept
Date Input
Break Out
Clock
Galaxy Preview
Circuitry
Superformula
Loader
Physics 101
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!