Heat Conduction in a 2D Fin Tutorial (WebGPU)

This page demonstrates solving the 2D heat conduction fin problem using FEAScript with a WebGPU-accelerated Jacobi solver. For the mathematical formulation and theory, see the basic tutorial.

⚠️ Important: This feature is experimental and requires a browser that supports WebGPU.

Also, due to security restrictions, this example requires launching the browser with reduced security settings, e.g.:

start chrome --disable-web-security --user-data-dir="C:\tmp\chrome-cors" --disable-site-isolation-trials

These flags temporarily disable CORS restrictions that normally block a web worker from loading scripts or data when running from local files. For production applications, proper CORS headers should be configured on your server.

WebGPU Implementation

The code below shows how to use FEAScript with the WebGPU-accelerated Jacobi solver. The solution is plotted as a 2D contour.

<body>
  <!-- ...body region... -->
<script type="module">
  // Import FEAScript library
  import { FEAScriptModel, plotSolution, printVersion } from "https://core.feascript.com/src/index.js";
  
  window.addEventListener("DOMContentLoaded", async () => {
      // Print FEAScript version in the console
      printVersion();

    // Create and configure model
    const model = new FEAScriptModel();
    model.setSolverConfig("heatConductionScript");
    model.setMeshConfig({
      meshDimension: "2D",
      elementOrder: "quadratic",
      numElementsX: 8,
      numElementsY: 4,
      maxX: 4,
      maxY: 2,
    });

    // Apply boundary conditions
    model.addBoundaryCondition("0", ["constantTemp", 200]);
    model.addBoundaryCondition("1", ["symmetry"]);
    model.addBoundaryCondition("2", ["convection", 1, 20]);
    model.addBoundaryCondition("3", ["constantTemp", 200]);

    // Set solver method to use the GPU-accelerated Jacobi solver
    model.setSolverMethod("jacobi-gpu");

    // Solve
    const { solutionVector, nodesCoordinates } = await model.solveAsync();

    // Plot results
    plotSolution(
      solutionVector,
      nodesCoordinates,
      "heatConductionScript",
      "2D",
      "contour",
      "resultsCanvas"
    );
  });
  </script>
  <!-- ...rest of body region... -->
</body>

Results

Below is the 2D contour plot of the computed temperature distribution. This plot is generated in real time using FEAScript.

Solving...