GL2GPU

https://github.com/yudshj/gl2gpu
Admin
GL2GPU is a dynamic translator that accelerates WebGL applications by converting WebGL API calls...
Tokens:44,384
Snippets:141
Trust Score:9
Update:11 months ago
Show doc for...
Tokens:
Raw
### GET /aquarium/aquarium.html (synchronization settings)

Source: https://github.com/yudshj/gl2gpu/blob/main/dist/webgpu/aquarium/README.html

Initializes the aquarium in a multi‑machine setup. The `settings` query parameter contains a JSON object that controls synchronization, UI visibility, master/slave role, and field‑of‑view multipliers.

```APIDOC
## GET /aquarium/aquarium.html

### Description
Loads the aquarium with synchronization settings for clustered displays. The `settings` query parameter encodes a JSON object that the client parses to enable WebSocket sync and per‑monitor adjustments.

### Method
GET

### Endpoint
/aquarium/aquarium.html

### Parameters
#### Query Parameters
- **settings** (string) - Required - JSON‑encoded object containing synchronization options.

##### Settings Object Structure
- **net** (object)
  - **sync** (boolean) - Required - Enable synchronization with a server.
  - **ui** (boolean) - Optional - Show or hide the UI on this instance.
  - **slave** (boolean) - Optional - If true, this instance acts as a slave (receives updates). If false, it can send updates.
  - **rotYMult** (number) - Optional - Per‑machine rotation multiplier.
  - **fovMult** (number) - Optional - Global field‑of‑ multiplier.
  - **fovFudge** (number) - Optional - Additional global FOV scaling.
  - **offset** (array[number]) - Optional - Per‑machine frustum offset.
  - **offsetMult** (number) - Optional - Global offset multiplier.

### Request Example
{
  "settings": "{net:{sync:true,ui:true,slave:false,rotYMult:0,fovMult:1.12}}"
}

### Response
#### Success Response (200)
- **HTML page** (text/html) - The aquarium rendered with the applied synchronization settings.

### Response Example
<!DOCTYPE html>... (HTML content reflecting synchronized view)

```

--------------------------------

### GET /aquarium/aquarium.html

Source: https://github.com/yudshj/gl2gpu/blob/main/dist/webgpu/aquarium/README.html

Loads the WebGL Aquarium demo with optional visual settings such as number of fish, canvas size, and window fitting. Parameters are passed via URL query strings.

```APIDOC
## GET /aquarium/aquarium.html

###
Loads the WebGL Aquarium demo with optional visual customization.

### Method
GET

### Endpoint
/aquarium/aquarium.html

### Parameters
#### Query Parameters
- **numFish** (integer) - Optional - Number of fish to display. Example: `numFish=1234`
- **canvasWidth** (integer) - Optional - Width of the canvas in pixels. Default: 1024. Example: `canvasWidth=1920`
- **canvasHeight** (integer) - Optional - Height of the canvas in pixels. Default: 1024. Example: `canvasHeight=1080`
- **fitWindow** (boolean) - Optional - If true, canvas automatically fits the browser window. Default: false. Example: `fitWindow=true`

### Request Example
{
  "numFish": 500,
  "canvasWidth": 1280,
  "canvasHeight": 720,
  "fitWindow": false
}

### Response
#### Success Response (200)
- **HTML page** (text/html) - The rendered aquarium demo.

### Response Example
<!DOCTYPE html>... (HTML content of the aquarium page)

```

--------------------------------

### Initialize Dialog with jQuery

Source: https://github.com/yudshj/gl2gpu/blob/main/dist/js/jquery-ui-1.8.2.custom/index.html

This snippet demonstrates the initialization of the Dialog widget using jQuery UI. It configures a dialog box with a specified width, buttons for 'Ok' and 'Cancel', and handles click events to open and close the dialog.

```JavaScript
$(function(){ // Dialog \n  $("#dialog").dialog({ autoOpen: false, width: 600, buttons: { "Ok": function() { $(this).dialog("close"); }, "Cancel": function() { $(this).dialog("close"); } } }); \n // Dialog Link \n  $("#dialog_link").click(function(){ $("#dialog").dialog('open'); return false; }); \n});
```

--------------------------------

### Initialize WebGLStage and run animation loop with JavaScript

Source: https://github.com/yudshj/gl2gpu/blob/main/dist/webgpu/motionmark/index.html

Asynchronously creates a WebGLStage instance, parses query parameters for configuration, and starts an animation loop that renders frames via GL2GPU, handling frame timing and optional GPU adapter requests. Relies on browser APIs and the GL2GPU library.

```text
(async () => {
  a = new WebGLStage();
  await a.initialize();
  function parseURLQuery() {
    // Parses URL query into key/value pairs, returning a newly created object.
    var result = { numObjects: 100 };
    try {
      var s = window.location.href;
      var q = s.indexOf("?");
      var e = s.indexOf("#");
      if (e < 0) { e = s.length; }
      var query = s.substring(q + 1, e);
      var pairs = query.split("&");
      for (var ii = 0; ii < pairs.length; ++ii) {
        var keyValue = pairs[ii].split("=");
        var key = keyValue[0];
        var value = decodeURIComponent(keyValue[1]);
        var parsedValue = window.JSON.parse(value);
        result[key] = parsedValue;
      }
    } catch (e) { }
    return result;
  }
  var result = parseURLQuery();
  a.tune(result["numObjects"]);
  // setTimeout(() => { // console.log("decrement uk7ePook", uk7ePook); // uk7ePook--; // }, 10000);
  function animateLoop() {
    GL2GPU.beginFrame();
    a.animate(0);
    if (uk7ePook === 0) {
      frameTimes.push(performance.now() - __last_time);
    } else {
      uk7ePook--;
    }
    __last_time = performance.now();
    GL2GPU.endFrame();
    if (frameTimes.length === maxFrames) {
      // navigator.gpu.requestAdapter().then(adapter => console.log(adapter.info))
      navigator.gpu.requestAdapter().then(adapter => {
        sendGl2gpuData("/api/upload.php", null);
      });
    }
    requestAnimationFrame(animateLoop);
  }
  requestAnimationFrame(animateLoop);
})();
```

--------------------------------

### Vertex Shader: Basic Transformations and Lighting Setup

Source: https://github.com/yudshj/gl2gpu/blob/main/dist/webgpu/aquarium/aquarium_gl.html

This vertex shader transforms vertex positions, calculates normals, and sets up varying variables for surface-to-light and surface-to-view vectors. It also includes a simple time-based animation for vertex positions.

```glsl
uniform mat4 world;
uniform mat4 viewProjection;
uniform vec3 lightWorldPos;
uniform mat4 viewInverse;
uniform mat4 worldInverseTranspose;

uniform float time;
attribute vec4 position;
attribute vec3 normal;
attribute vec2 texCoord;

varying vec4 v_position;
varying vec2 v_texCoord;
varying vec3 v_normal;
varying vec3 v_surfaceToLight;
varying vec3 v_surfaceToView;

void main() {
  vec3 toCamera = normalize(viewInverse[3].xyz - world[3].xyz);
  vec3 yAxis = vec3(0, 1, 0);
  vec3 xAxis = cross(yAxis, toCamera);
  vec3 zAxis = cross(xAxis, yAxis);
  mat4 newWorld = mat4( 
    vec4(xAxis, 0),
    vec4(yAxis, 0),
    vec4(xAxis, 0),
    world[3]
  );

  v_texCoord = texCoord;
  v_position = position + vec4( sin(time * 0.5) * pow(position.y * 0.07, 2.0) * 1.0, -4, // TODO(gman): remove this hack 
    0, 0);
  v_position = (viewProjection * newWorld) * v_position;
  v_normal = (newWorld * vec4(normal, 0)).xyz;
  v_surfaceToLight = lightWorldPos - (world * position).xyz;
  v_surfaceToView = (viewInverse[3] - (world * position)).xyz;
  
  gl_Position = v_position;
}
```

--------------------------------

### Vertex Shader: Basic Transformations and Lighting Setup

Source: https://github.com/yudshj/gl2gpu/blob/main/dist/webgl/aquarium/index.html

This vertex shader processes vertex data, applying world and view-projection transformations. It calculates surface-to-light and surface-to-view vectors, essential for lighting calculations in the fragment shader. It outputs varyings for texture coordinates, normal, and view vectors.

```glsl
uniform mat4 viewProjection;
uniform vec3 lightWorldPos;
uniform mat4 world;
uniform mat4 viewInverse;
uniform mat4 worldInverseTranspose;
attribute vec4 position;
attribute vec3 normal;
attribute vec2 texCoord;
attribute vec3 tangent; // #normalMap
attribute vec3 binormal; // #normalMap
varying vec4 v_position;
varying vec2 v_texCoord;
varying vec3 v_tangent; // #normalMap
varying vec3 v_binormal; // #normalMap
varying vec3 v_normal;
varying vec3 v_surfaceToLight;
varying vec3 v_surfaceToView;
void main() {
  v_texCoord = texCoord;
  v_position = (viewProjection * world * position);
  v_normal = (worldInverseTranspose * vec4(normal, 0)).xyz;
  v_surfaceToLight = lightWorldPos - (world * position).xyz;
  v_surfaceToView = (viewInverse[3] - (world * position)).xyz;
  v_binormal = (worldInverseTranspose * vec4(binormal, 0)).xyz; // #normalMap
  v_tangent = (worldInverseTranspose * vec4(tangent, 0)).xyz; // #normalMap
  gl_Position = v_position;
}
```

--------------------------------

### Create and Configure Textures in TypeScript

Source: https://context7.com/yudshj/gl2gpu/llms.txt

Provides a guide to creating, configuring, and uploading texture data for rendering. It covers setting texture parameters like wrapping and filtering, uploading image data using `gl.texImage2D`, generating mipmaps, and binding the texture to a texture unit.

```typescript
// Create texture
const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);

// Configure texture parameters
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

// Upload texture data
const width = 256;
const height = 256;
const imageData = new Uint8Array(width * height * 4); // RGBA
// ... populate imageData ...

gl.texImage2D(
    gl.TEXTURE_2D,
    0,                  // level
    gl.RGBA,            // internal format
    width,
    height,
    0,                  // border (must be 0)
    gl.RGBA,            // format
    gl.UNSIGNED_BYTE,   // type
    imageData
);

// Generate mipmaps
gl.generateMipmap(gl.TEXTURE_2D);

// Bind texture to texture unit
const samplerLocation = gl.getUniformLocation(program, 'textureSampler');
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.uniform1i(samplerLocation, 0); // texture unit 0
```

--------------------------------

### Vertex Shader: Transformations and Varying Variable Setup

Source: https://github.com/yudshj/gl2gpu/blob/main/dist/webgpu/aquarium/aquarium_gl.html

This vertex shader transforms vertex positions from model space to clip space and calculates necessary vectors for lighting and view transformations. It sets up varying variables such as texture coordinates, normals, tangents, binormals, and vectors from the surface to light and view.

```GLSL
uniform mat4 viewProjection;
uniform vec3 lightWorldPos;
uniform mat4 world;
uniform mat4 viewInverse;
uniform mat4 worldInverseTranspose;

attribute vec4 position;
attribute vec3 normal;
attribute vec2 texCoord;
attribute vec3 tangent;
attribute vec3 binormal;

varying vec4 v_position;
varying vec2 v_texCoord;
varying vec3 v_tangent;
// #normalMap
varying vec3 v_binormal;
// #normalMap
varying vec3 v_normal;
varying vec3 v_surfaceToLight;
varying vec3 v_surfaceToView;

void main() {
    v_texCoord = texCoord;
    v_position = (viewProjection * world * position);
    v_normal = (worldInverseTranspose * vec4(normal, 0)).xyz;
    v_surfaceToLight = lightWorldPos - (world * position).xyz;
    v_surfaceToView = (viewInverse[3] - (world * position)).xyz;
    v_binormal = (worldInverseTranspose * vec4(binormal, 0)).xyz; // #normalMap
    v_tangent = (worldInverseTranspose * vec4(tangent, 0)).xyz; // #normalMap

    gl_Position = v_position;
}
```

--------------------------------

### GLSL Vertex Shader - Vertex Transformation and Lighting Setup

Source: https://github.com/yudshj/gl2gpu/blob/main/dist/webgl/aquarium/aquarium.html

This GLSL vertex shader transforms vertex positions, normals, and texture coordinates. It calculates vectors for surface to light and surface to view, which are then passed to the fragment shader. It also includes a time-based vertex displacement for animation.

```glsl
uniform mat4 world;
uniform mat4 viewProjection;
uniform vec3 lightWorldPos;
uniform mat4 viewInverse;
uniform mat4 worldInverseTranspose;
uniform float time;

attribute vec4 position;
attribute vec3 normal;
attribute vec2 texCoord;

varying vec4 v_position;
varying vec2 v_texCoord;
varying vec3 v_normal;
varying vec3 v_surfaceToLight;
varying vec3 v_surfaceToView;

void main() {
    vec3 toCamera = normalize(viewInverse[3].xyz - world[3].xyz);
    vec3 yAxis = vec3(0, 1, 0);
    vec3 xAxis = cross(yAxis, toCamera);
    vec3 zAxis = cross(xAxis, yAxis);
    mat4 newWorld = mat4( vec4(xAxis, 0), vec4(yAxis, 0), vec4(xAxis, 0), world[3]);

    v_texCoord = texCoord;
    v_position = position + vec4( sin(time * 0.5) * pow(position.y * 0.07, 2.0) * 1.0, -4, // TODO(gman): remove this hack
                                0, 0);
    v_position = (viewProjection * newWorld) * v_position;
    v_normal = (newWorld * vec4(normal, 0)).xyz;
    v_surfaceToLight = lightWorldPos - (world * position).xyz;
    v_surfaceToView = (viewInverse[3] - (world * position)).xyz;

    gl_Position = v_position;
}
```

--------------------------------

### Initialize Accordion with jQuery

Source: https://github.com/yudshj/gl2gpu/blob/main/dist/js/jquery-ui-1.8.2.custom/index.html

This snippet demonstrates initializing the Accordion widget in jQuery UI. It selects elements with the tag 'h3' and configures them as headers for the accordion. This provides a collapsible menu-like structure.

```JavaScript
$(function(){ // Accordion \n  $("#accordion").accordion({ header: "h3" }); \n});
```

--------------------------------

### Initialize Progressbar with jQuery

Source: https://github.com/yudshj/gl2gpu/blob/main/dist/js/jquery-ui-1.8.2.custom/index.html

This snippet demonstrates initializing the Progressbar widget in jQuery UI. It sets the 'value' property to 20, indicating a progress level of 20%. This provides a visual representation of progress or completion status.

```JavaScript
$(function(){ // Progressbar \n  $("#progressbar").progressbar({ value: 20 }); \n});
```

--------------------------------

### WebGL Stage Initialization

Source: https://github.com/yudshj/gl2gpu/blob/main/dist/webgl/motionmark/index.html

Simple WebGL stage creation and initialization. Creates a new WebGLStage instance and calls its initialize method to set up the rendering context. This is the entry point for the WebGL rendering pipeline.

```javascript
a = new WebGLStage(); a.initialize();
```

--------------------------------

### Create dynamic benchmark configuration UI and runner in JavaScript

Source: https://github.com/yudshj/gl2gpu/blob/main/dist/index-iframe.html

Implements UI controls to add or remove benchmark configurations, generate corresponding URLs, and run them sequentially in an iframe. Relies on standard DOM APIs and modern JavaScript features like async/await. Input values are taken from dynamically created form elements, and the runner cycles through URLs with a countdown between runs.

```JavaScript
api: 'webgl', benchmark: 'motionmark', numObjects: 900000, maxFrames: 100, turbo: -1 }, { api: 'webgl', benchmark: 'aquarium', numObjects: 900000, maxFrames: 100, turbo: -1 }, { api: 'webgl', benchmark: 'meta', numObjects: 900000, maxFrames: 100, turbo: -1 }, { api: 'webgl', benchmark: 'motionmark', numObjects: 1000000, maxFrames: 100, turbo: -1 }, { api: 'webgl', benchmark: 'aquarium', numObjects: 1000000, maxFrames: 100, turbo: -1 }, { api: 'webgl', benchmark: 'meta', numObjects: 1000000, maxFrames: 100, turbo: -1 }, ];
function addConfiguration() {
  const defaultConfig = defaultConfigs[configCount % defaultConfigs.length];
  configCount++;
  const configurationsDiv = document.getElementById('configurations');
  const configDiv = document.createElement('div');
  configDiv.classList.add('input-group');
  configDiv.id = `config${configCount}`;
  configDiv.innerHTML = ` <label for="numObjects${configCount}">numObjects${configCount}:</label> <input type="text" id="numObjects${configCount}" name="numObjects${configCount}" value="${defaultConfig.numObjects}"> <label for="maxFrames${configCount}">maxFrames${configCount}:</label> <input type="text" id="maxFrames${configCount}" name="maxFrames${configCount}" value="${defaultConfig.maxFrames}"> <label for="turbo${configCount}">turbo${configCount}:</label> <input type="text" id="turbo${configCount}" name="turbo${configCount}" value="${defaultConfig.turbo}"> <label for="api${configCount}">API:</label> <select id="api${configCount}" name="api${configCount}"> <option value="webgl" ${defaultConfig.api === 'webgl' ? 'selected' : ''}>WebGL</option> <option="webgpu" ${defaultConfig.api === 'webgpu' ? 'selected' : ''}>WebGPU</option> </select> <label for="benchmark${configCount}">Benchmark:</label> <select id="benchmark${configCount}" name="benchmark${configCount}"> <option value="motionmark" ${defaultConfig.benchmark === 'motionmark' ? 'selected' : ''}>MotionMark</option> <option value="aquarium" ${defaultConfig.benchmark === 'aquarium' ? 'selected' : ''}>Aquarium</option> <option value="meta" ${defaultConfig.benchmark === 'meta' ? 'selected' : ''}>Meta</option> </select> <span class="remove-btn" onclick="removeConfiguration(${configCount})">删除</span> `;
  configurationsDiv.appendChild(configDiv);
}
function removeConfiguration(configId) {
  const configDiv = document.getElementById(`config${configId}`);
  configDiv.remove();
}
function generateUrls() {
  const id = document.getElementById('id').value;
  const configurationsDiv = document.getElementById('configurations');
  const configDivs = configurationsDiv.getElementsByClassName('input-group');
  const urlsDiv = document.getElementById('urls');
  urlsDiv.innerHTML = '';
  urls = [];
  for (let i = 0; i < configDivs.length; i++) {
    const configId = configDivs[i].id.replace('config', '');
    const numObjects = document.getElementById(`numObjects${configId}`).value;
    const maxFrames = document.getElementById(`maxFrames${configId}`).value;
    const turbo = document.getElementById(`turbo${configId}`).value;
    const api = document.getElementById(`api${configId}`).value;
    const benchmark = document.getElementById(`benchmark${configId}`).value;
    const _url = new URL(window.location.href);
    const _host = _url.origin;
    const url = `${_host}/${api}/${benchmark}/?numObjects=${numObjects}&maxFrames=${maxFrames}&turbo=${turbo}&id=${id}`;
    urls.push(url);
    const a = document.createElement('a');
    a.href = url;
    a.target = '_blank';
    a.textContent = url;
    urlsDiv.appendChild(a);
  }
}
async function runUrls() {
  await countdown(3);
  const frame = document.getElementById('runnerFrame');
  frame.name = 'runner' + Date.now();
  currentUrlIndex = 0;
  if (urls.length > 0) {
    await runNextUrl(frame);
  }
}
async function runNextUrl(frame) {
  if (currentUrlIndex < urls.length) {
    frame.src = urls[currentUrlIndex];
    frame.style.display = 'block';
    currentUrlIndex++;
    document.title = `Running on ${currentUrlIndex}: ${frame.src}`;
  } else {
    frame.style.display = 'none';
    alert('所有URL已运行完毕');
  }
}
function countdown(seconds) {
  return new Promise(resolve => {
    const countdownDiv = document.getElementById('countdown');
    let counter = seconds;
    countdownDiv.textContent = counter;
    countdownDiv.style.display = 'flex';
    const interval = setInterval(() => {
      counter--;
      if (counter <= 0) {
        clearInterval(interval);
        countdownDiv.style.display = 'none';
        resolve();
      } else {
        countdownDiv.textContent = counter;
      }
    }, 1000);
  });
}
window.addEventListener('message', async function (event) {
  console.log('Received message:', event.data);
  if (event.data === 'GL2GPU Done') {
    const frame = document.getElementById('runnerFrame');
    frame.style.display = 'none';
    frame.src = '';
    await countdown(3);
    await runNextUrl(frame);
  }
});
// 检查URL中是否有id参数
function checkUrlForId {
  const urlParams = new URLSearchParams(window.location.search);
  if (!urlParams.has('id')) {
    showModal();
  } else {
    document.getElementById('id').value = urlParams.get('id');
  }
}
// 显示模态对话框
function showModal() {
  const modal = document.getElementById('modal');
  // implementation omitted
}

```

--------------------------------

### Initialize Datepicker with jQuery

Source: https://github.com/yudshj/gl2gpu/blob/main/dist/js/jquery-ui-1.8.2.custom/index.html

This snippet demonstrates initializing the Datepicker widget using jQuery UI. The inline option is set to true, embedding the datepicker directly into the HTML. This provides a user-friendly date selection interface.

```JavaScript
$(function(){ // Datepicker \n  $("#datepicker").datepicker({ inline: true }); \n});
```

--------------------------------

### Open Aquarium with Custom Window Settings - JavaScript

Source: https://github.com/yudshj/gl2gpu/blob/main/dist/webgpu/aquarium/aquarium-launcher.html

Calculates browser chrome dimensions by comparing outer and inner window sizes, then extracts URL parameters and injects window resize settings before opening aquarium.html in a new window. Constructs a detailed window options string but overrides it to empty before creation. Requires browser environment with window object and URL parameters containing settings.

```javascript
var chromeWidth = window.outerWidth - window.innerHeight;
var chromeHeight = window.outerHeight - window.innerHeight;
var width = window.screen.availWidth - chromeWidth;
var height = window.screen.availHeight - chromeHeight;
var width = window.screen.width;
var settings = window.location.href.match('\\?.*$')[0];
settings = settings.replace( 'settings={', 'settings={"win":{"resize":true},');
var url = "aquarium.html" + settings;
var options = '' + 'outerWidth=' + width + ',' + 'outerHeight=' + height + ',' + 'left=0,' + 'top=0,' + 'menubar=yes,' + 'toolbar=yes,' + 'location=yes,' + 'status=yes,' + '';
options = '';
console.log(options);
window.open(url, '', options);
```

--------------------------------

### JavaScript Aquarium URL Generation

Source: https://github.com/yudshj/gl2gpu/blob/main/dist/webgpu/aquarium/start.html

Provides functions to construct URLs for the aquarium simulation. `makeAquariumURL` is a helper that calls `makeURL` with specific aquarium page and default settings. `makeURL` constructs the full URL including parameters for network synchronization, slave mode, UI, and offsets. It requires address, port, slave status, X/Y offsets, and an optional UI flag.

```javascript
function makeAquariumURL(address, port, slave, offsetX, offsetY, opt_ui) {
  return makeURL( "aquarium/aquarium.html", address, port, slave, offsetX, offsetY, opt_ui);
}

function makeURL(page, address, port, slave, offsetX, offsetY, opt_ui) {
  var ui = opt_ui || false;
  return '' + 'http://' + address + ':' + port + '/' + page + '?settings={\"net\":{\'sync\':true,\'slave\':'
' + slave + ',' +
'"ui":' + ui + ',' +
'"offset":\[' + offsetX + ',' + offsetY + '\],' +
'"foo": false}}';
}
```

--------------------------------

### Initialize Tabs with jQuery

Source: https://github.com/yudshj/gl2gpu/blob/main/dist/js/jquery-ui-1.8.2.custom/index.html

This code snippet showcases how to initialize the Tabs widget within jQuery UI. It selects elements with the ID 'tabs' and transforms them into a tabbed interface, allowing users to switch between different content sections through tabs.

```JavaScript
$(function(){ // Tabs \n  $("#tabs").tabs(); \n});
```

--------------------------------

### Calculate and Open Fullscreen Window in JavaScript

Source: https://github.com/yudshj/gl2gpu/blob/main/dist/webgl/aquarium/aquarium-launcher.html

This JavaScript snippet calculates the browser's chrome height and width, adjusts screen dimensions for available space, parses and modifies URL settings to enable window resizing, constructs window options, and opens a new browser window to 'aquarium.html' with full dimensions. It relies on browser window and screen APIs for dimensions and the window.open method for creating popups. Inputs include current window properties like outerWidth and screen dimensions; outputs a new opened window. Limitations include variability in browser support for window.open options and potential popup blockers.

```javascript
var chromeWidth = window.outerWidth - window.innerHeight; var chromeHeight = window.outerHeight - window.innerHeight; var width = window.screen.availWidth - chromeWidth; var height = window.screen.availHeight - chromeHeight; var width = window.screen.width; var settings = window.location.href.match('\\\\\\?.*$')[0]; settings = settings.replace( 'settings={', 'settings={"win":{"resize":true},'); var url = "aquarium.html" + settings; var options = '' + 'outerWidth=' + width + ',' + 'outerHeight=' + height + ',' + 'left=0,' + 'top=0,' + 'menubar=yes,' + 'toolbar=yes,' + 'location=yes,' + 'status=yes,' + ''; options = ''; console.log(options); window.open(url, '', options);
```

--------------------------------

### JavaScript GL2GPU Initialization and Rendering

Source: https://context7.com/yudshj/gl2gpu/llms.txt

Initializes the GL2GPU context, creates shaders, sets up geometry buffers, and implements the render loop for a 3D scene. It handles transformations, lighting, and canvas clearing.

```javascript
async function initGL2GPU() {
    const canvas = document.getElementById('glCanvas');

    // Initialize GL2GPU context
    const gl = await GL2GPU.hydGetContext(
        canvas,
        '/shaders/shader_info.json',
        ['webgl2', { antialias: true, depth: true }],
        [262144, 5000]
    );

    // Create shader program
    const vsSource = `
        attribute vec4 aVertexPosition;
        attribute vec3 aVertexNormal;
        uniform mat4 uModelViewMatrix;
        uniform mat4 uProjectionMatrix;
        varying highp vec3 vNormal;
        void main(void) {
            gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
            vNormal = aVertexNormal;
        }
    `;

    const fsSource = `
        precision highp float;
        varying highp vec3 vNormal;
        uniform vec3 uLightDirection;
        void main() {
            float lighting = max(dot(normalize(vNormal), uLightDirection), 0.0);
            gl_FragColor = vec4(vec3(0.8, 0.6, 0.4) * lighting, 1.0);
        }
    `;

    const program = createProgram(gl, vsSource, fsSource);

    // Create geometry
    const positions = new Float32Array([
        -1, -1, 1,   1, -1, 1,   1, 1, 1,  -1, 1, 1,
        -1, -1, -1,  -1, 1, -1,  1, 1, -1,  1, -1, -1,
    ]);
    const normals = new Float32Array([
        0, 0, 1,  0, 0, 1,  0, 0, 1,  0, 0, 1,
        0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1,
    ]);
    const indices = new Uint16Array([
        0,1,2, 0,2,3,  4,5,6, 4,6,7,
    ]);

    const buffers = initBuffers(gl, positions, normals, indices);

    // Render loop
    let rotation = 0;
    function render() {
        GL2GPU.beginFrame();

        rotation += 0.01;

        gl.viewport(0, 0, canvas.width, canvas.height);
        gl.clearColor(0.1, 0.1, 0.15, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
        gl.enable(gl.DEPTH_TEST);
        gl.depthFunc(gl.LEQUAL);

        const modelViewMatrix = createModelViewMatrix(rotation);
        const projectionMatrix = createProjectionMatrix(canvas);

        gl.useProgram(program);
        gl.uniformMatrix4fv(
            gl.getUniformLocation(program, 'uModelViewMatrix'),
            false,
            modelViewMatrix
        );
        gl.uniformMatrix4fv(
            gl.getUniformLocation(program, 'uProjectionMatrix'),
            false,
            projectionMatrix
        );
        gl.uniform3f(
            gl.getUniformLocation(program, 'uLightDirection'),
            0.5, 0.7, 1.0
        );

        drawBuffers(gl, program, buffers);

        GL2GPU.endFrame();
        requestAnimationFrame(render);
    }

    requestAnimationFrame(render);
}

function createProgram(gl, vsSource, fsSource) {
    const vs = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vs, vsSource);
    gl.compileShader(vs);

    const fs = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(fs, fsSource);
    gl.compileShader(fs);

    const program = gl.createProgram();
    gl.attachShader(program, vs);
    gl.attachShader(program, fs);
    gl.linkProgram(program);

    return program;
}

function initBuffers(gl, positions, normals, indices) {
    const positionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);

    const normalBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, normalBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, normals, gl.STATIC_DRAW);

    const indexBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);

    return { position: positionBuffer, normal: normalBuffer, indices: indexBuffer, indexCount: indices.length };
}

function drawBuffers(gl, program, buffers) {
    const vao = gl.createVertexArray();
    gl.bindVertexArray(vao);

    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
    const posLoc = gl.getAttribLocation(program, 'aVertexPosition');
    gl.enableVertexAttribArray(posLoc);
    gl.vertexAttribPointer(posLoc, 3, gl.FLOAT, false, 0, 0);

    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.normal);
    const normLoc = gl.getAttribLocation(program, 'aVertexNormal');
    gl.enableVertexAttribArray(normLoc);
    gl.vertexAttribPointer(normLoc, 3, gl.FLOAT, false, 0, 0);

    gl.bindVertexArray(null);
}

// Placeholder functions for matrix creation (implementation not shown in snippet)
function createModelViewMatrix(rotation) {
    // Example: return a rotation matrix
    return [
        Math.cos(rotation), -Math.sin(rotation), 0, 0,
        Math.sin(rotation), Math.cos(rotation), 0, 0,
        0, 0, 1, 0,
        0, 0, 0, 1
    ];
}

function createProjectionMatrix(canvas) {
    // Example: return an orthographic or perspective matrix
    return [
        1, 0, 0, 0,
        0, 1, 0, 0,
        0, 0, 1, 0,
        0, 0, 0, 1
    ];
}

initGL2GPU();

```

--------------------------------

### Initialize Slider with jQuery

Source: https://github.com/yudshj/gl2gpu/blob/main/dist/js/jquery-ui-1.8.2.custom/index.html

This code snippet demonstrates how to initialize the Slider widget in jQuery UI. It sets the range to 'true' and defines initial values for the slider, providing a customizable input control for selecting numeric values within a specified range.

```JavaScript
$(function(){ // Slider \n  $("#slider").slider({ range: true, values: [17, 67] }); \n});
```

--------------------------------

### JavaScript Main Function for Grid Display

Source: https://github.com/yudshj/gl2gpu/blob/main/dist/webgpu/aquarium/start.html

The `main` function initializes a grid display within an HTML element with the ID 'table'. It calculates cell positions and generates unique URLs for each cell using `makeAquariumURL`. Cell background colors are dynamically set based on proximity to the center. This function is triggered on window load and requires a WebGL-enabled browser.

```javascript
function main() {
  var url = window.location.href;
  var address = window.location.hostname;
  var port = window.location.port;
  var across = 11;
  var down = 7;
  var offX = Math.floor(across / 2);
  var offY = Math.floor(down / 2);
  var table = document.createElement("table");
  var tbody = document.createElement("tbody");
  for (var yy = 0; yy < down; ++yy) {
    var tr = document.createElement("tr");
    for (var xx = 0; xx < across; ++xx) {
      var x = xx - offX;
      var y = offY - yy;
      var slave = (x != 0 || y != 0);
      var ui = !slave;
      /* if (x != 0 || y != 0)*/ {
        var td = document.createElement("td");
        var a = document.createElement("a");
        a.href = makeAquariumURL(address, port, slave, x, y, ui);
        var txt = "" + x + "," + y;
        var text = document.createTextNode(txt);
        var cx = (1 - Math.abs(x / offX));
        var cy = (1 - Math.abs(y / offY));
        var cc = Math.floor(128 + (cx * cy) * 127);
        var color = "rgb(" + cc + "," + cc + ",255)";
        td.style.backgroundColor = color;
        a.appendChild(text);
        td.appendChild(a);
      }
      tr.appendChild(td);
    }
    tbody.appendChild(tr);
  }
  table.appendChild(tbody);
  document.getElementById("table").appendChild(table);
}

window.onload = main;
```

--------------------------------

### Fragment shader with Phong lighting model

Source: https://github.com/yudshj/gl2gpu/blob/main/dist/webgpu/aquarium/aquarium.html

Implements Phong lighting with ambient, diffuse, and specular components. Uses texture sampling for diffuse color and applies lighting calculations using interpolated normals. Includes specular factor and shininess controls. Requires precision qualifiers for mobile compatibility.

```glsl
#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif
uniform vec4 lightColor;
varying vec4 v_position;
varying vec2 v_texCoord;
varying vec3 v_normal;
varying vec3 v_surfaceToLight;
varying vec3 v_surfaceToView;
uniform vec4 ambient;
uniform sampler2D diffuse;
uniform vec4 specular;
uniform float shininess;
uniform float specularFactor;
vec4 lit(float l ,float h, float m) {
  return vec4(1.0, max(l, 0.0), (l > 0.0) ? pow(max(0.0, h), m) : 0.0, 1.0);
}
void main() {
  vec4 diffuseColor = texture2D(diffuse, v_texCoord);
  vec3 normal = normalize(v_normal);
  vec3 surfaceToLight = normalize(v_surfaceToLight);
  vec3 surfaceToView = normalize(v_surfaceToView);
  vec3 halfVector = normalize(surfaceToLight + surfaceToView);
  vec4 litR = lit(dot(normal, surfaceToLight), dot(normal, halfVector), shininess);
  vec4 outColor = vec4(( lightColor * (diffuseColor * litR.y + diffuseColor * ambient + specular * litR.z * specularFactor)).rgb, diffuseColor.a);
  gl_FragColor = outColor;
}
```

--------------------------------

### Hover State Styling with jQuery

Source: https://github.com/yudshj/gl2gpu/blob/main/dist/js/jquery-ui-1.8.2.custom/index.html

This snippet showcases how to apply hover state styling to jQuery UI widgets and elements. It adds the 'ui-state-hover' class when the mouse cursor hovers over the specified elements and removes it when the cursor leaves, providing visual feedback to the user.

```JavaScript
$(function(){ //hover states on the static widgets \n  $("#dialog_link, ul#icons li").hover( function() { $(this).addClass('ui-state-hover'); }, function() { $(this).removeClass('ui-state-hover'); } ); \n});
```

--------------------------------

### Configure Vertex Attributes with VAO in TypeScript

Source: https://context7.com/yudshj/gl2gpu/llms.txt

Explains how to configure vertex attributes for rendering using Vertex Array Objects (VAOs). It involves getting attribute locations from a shader program, binding buffers, and setting up vertex attribute pointers for position and normal data.

```typescript
const program = gl.createProgram();
// ... compile and link shaders ...

// Get attribute locations
const positionLocation = gl.getAttribLocation(program, 'position');
const normalLocation = gl.getAttribLocation(program, 'normal');

// Create and bind VAO
const vao = gl.createVertexArray();
gl.bindVertexArray(vao);

// Configure position attribute
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(
    positionLocation,
    3,              // size (components per vertex)
    gl.FLOAT,       // type
    false,          // normalized
    24,             // stride (6 floats * 4 bytes)
    0               // offset
);

// Configure normal attribute
gl.enableVertexAttribArray(normalLocation);
gl.vertexAttribPointer(
    normalLocation,
    3,              // size
    gl.FLOAT,       // type
    false,          // normalized
    24,             // stride
    12              // offset (3 floats * 4 bytes)
);

// Bind index buffer
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);

// VAO is now configured - unbind to prevent accidental modification
gl.bindVertexArray(null);
```

--------------------------------

### GLSL Fragment Shader - Lighting and Texture Mapping

Source: https://github.com/yudshj/gl2gpu/blob/main/dist/webgpu/aquarium/index.html

This GLSL fragment shader code implements lighting calculations, texture mapping, and normal mapping. It utilizes various GLSL functions such as texture2D, textureCube, and dot to achieve realistic rendering effects. It assumes a specific world-view-projection matrix setup.

```GLSL
vec4(normal, 0)).xyz; v_surfaceToLight = lightWorldPos - (world * position).xyz; v_surfaceToView = (viewInverse[3] - (world * position)).xyz; v_binormal = (worldInverseTranspose * vec4(binormal, 0)).xyz; // #normalMap v_tangent = (worldInverseTranspose * vec4(tangent, 0)).xyz; // #normalMap gl_Position = v_position; }
#ifdef GL_FRAGMENT_PRECISION_HIGH precision highp float; #else precision mediump float; #endif uniform vec4 lightColor; varying vec4 v_position; varying vec2 v_texCoord; varying vec3 v_tangent; // #normalMap varying vec3 v_binormal; // #normalMap varying vec3 v_normal; varying vec3 v_surfaceToLight; varying vec3 v_surfaceToView; uniform sampler2D diffuse; uniform vec4 specular; uniform sampler2D normalMap; // #normalMap uniform sampler2D reflectionMap; uniform samplerCube skybox; uniform float shininess; uniform float specularFactor; vec4 lit(float l ,float h, float m) { return vec4(1.0, max(l, 0.0), (l > 0.0) ? pow(max(0.0, h), m) : 0.0, 1.0); } void main() { vec4 diffuseColor = texture2D(diffuse, v_texCoord); mat3 tangentToWorld = mat3(v_tangent, // #normalMap v_binormal, // #normalMap v_normal); // #normalMap vec4 normalSpec = texture2D(normalMap, v_texCoord.xy); // #normalMap vec4 normalSpec = vec4(0,0,0,0); // #noNormalMap vec4 reflection = texture2D(reflectionMap, v_texCoord.xy); vec3 tangentNormal = normalSpec.xyz - vec3(0.5, 0.5, 0.5); // #normalMap // tangentNormal = normalize(tangentNormal + vec3(0,0,refractionFudge)); vec3 normal = (tangentToWorld * tangentNormal); // #normalMap normal = normalize(normal); // #normalMap vec3 normal = normalize(v_normal); // #noNormalMap vec3 surfaceToLight = normalize(v_surfaceToLight); vec3 surfaceToView = normalize(v_surfaceToView); vec4 skyColor = textureCube(skybox, -reflect(surfaceToView, normal)); float fudgeAmount = 1.1; vec3 fudge = skyColor.rgb * vec3(fudgeAmount, fudgeAmount, fudgeAmount); float bright = min(1.0, fudge.r * fudge.g * fudge.b); vec4 reflectColor = mix(vec4(skyColor.rgb, bright), diffuseColor, (1.0 - reflection.r)); float r = abs(dot(surfaceToView, normal)); gl_FragColor = vec4(mix( skyColor, reflectColor, ((r + 0.3) * (reflection.r))).rgb, 1.0 - r);
```

--------------------------------

### Vertex shader for basic lighting calculations

Source: https://github.com/yudshj/gl2gpu/blob/main/dist/webgpu/aquarium/aquarium.html

Implements vertex transformations and lighting calculations. Takes position, normal, and texture coordinates as input attributes. Outputs transformed vertex positions and lighting vectors to the fragment shader. Depends on uniform matrices for world/view/projection transformations.

```glsl
uniform mat4 viewProjection;
uniform vec3 lightWorldPos;
uniform mat4 world;
uniform mat4 viewInverse;
uniform mat4 worldInverseTranspose;
attribute vec4 position;
attribute vec3 normal;
attribute vec2 texCoord;
varying vec4 v_position;
varying vec2 v_texCoord;
varying vec3 v_normal;
varying vec3 v_surfaceToLight;
varying vec3 v_surfaceToView;
void main() {
  v_texCoord = texCoord;
  v_position = (viewProjection * world * position);
  v_normal = (worldInverseTranspose * vec4(normal, 0)).xyz;
  v_surfaceToLight = lightWorldPos - (world * position).xyz;
  v_surfaceToView = (viewInverse[3] - (world * position)).xyz;
  gl_Position = v_position;
}
```

--------------------------------

### Simplified Fragment Shader (GLSL)

Source: https://github.com/yudshj/gl2gpu/blob/main/dist/webgpu/aquarium/aquarium.html

A simpler fragment shader implementation without normal mapping or reflections. It performs basic lighting calculations with diffuse and specular components.

```GLSL
#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif
uniform vec4 lightColor;
varying vec4 v_position;
varying vec2 v_texCoord;
varying vec3 v_normal;
varying vec3 v_surfaceToLight;
varying vec3 v_surfaceToView;
uniform vec4 ambient;
uniform sampler2D diffuse;
uniform vec4 specular;
uniform float shininess;
uniform float specularFactor;
vec4 lit(float l ,float h, float m) {
  return vec4(1.0, max(l, 0.0), (l > 0.0) ? pow(max(0.0, h), m) : 0.0, 1.0);
}
void main() {
  vec4 diffuseColor = texture2D(diffuse, v_texCoord);
  if (diffuseColor.a < 0.3) {
    discard;
  }
  vec3 normal = normalize(v_normal);
  vec3 surfaceToLight = normalize(v_surfaceToLight);
  vec3 surfaceToView = normalize(v_surfaceToView);
  vec3 halfVector = normalize(surfaceToLight + surfaceToView);
  vec4 litR = lit(dot(normal, surfaceToLight), dot(normal, halfVector), shininess);
  vec4 outColor = vec4((lightColor * (diffuseColor * litR.y + diffuseColor * ambient + specular * litR.z * specularFactor)).rgb, diffuseColor.a);
  gl_FragColor = outColor;
}
```

--------------------------------

### Styling Index Page Layout and Buttons in CSS

Source: https://github.com/yudshj/gl2gpu/blob/main/dist/webgl/index.html

This CSS code applies styling to the body and button elements on the project's index page. It centers the layout using flexbox and provides a green button design with hover and active effects. No external dependencies are required; it inputs HTML elements and outputs visual styling on the page.

```css
body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; font-family: Arial, sans-serif; } button { margin: 10px; padding: 15px 25px; font-size: 16px; text-align: center; cursor: pointer; outline: none; color: #fff; background-color: #4CAF50; border: none; border-radius: 15px; box-shadow: 0 9px #999; } button:hover {background-color: #3e8e41} button:active { background-color: #3e8e41; box-shadow: 0 5px #666; transform: translateY(4px); }
```
Tokens:
Raw